CI

.github/workflows/playwright.yml

@@ -0,0 +1,48 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  playwright:
+    name: "Playwright Tests"
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.50.1-noble
+    env:
+      NEXT_PUBLIC_WC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_WC_PROJECT_ID }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: "yarn"
+
+      - name: ⚙️ Enable Corepack (Yarn 4)
+        run: corepack enable
+
+      - name: ⚙️ Install dependencies
+        run: yarn install --immutable
+
+      - name: 🌐 Start UI
+        run: |
+          yarn start:ui &
+          echo "Waiting for Next.js to be ready..."
+          until curl --silent --fail http://localhost:3000 > /dev/null; do
+            sleep 2
+          done
+          echo "Next.js is ready!"
+
+      - name: 👝 Download wallets
+        run: yarn download-wallets
+
+      - name: 🖨 Copy test envs
+        run: cp packages/w3wallets/.env.example packages/w3wallets/.env
+
+      - name: 🧪 Run tests
+        run: xvfb-run --auto-servernum --server-args='-screen 0 1280x800x24' yarn test

package.json

@@ -6,9 +6,11 @@
   ],
   "scripts": {
     "start:chain": "yarn workspace @w3wallets/test-contract local-node",
-    "start:ui": "yarn workspace @w3wallets/test-app dev",
+    "start:ui": "yarn workspace @w3wallets/test-app buildAndStart",
     "deploy:contract": "yarn workspace @w3wallets/test-contract deploy",
-    "build": "yarn workspace w3wallets build"
+    "build": "yarn workspace w3wallets build",
+    "download-wallets": "yarn workspace w3wallets download-wallets",
+    "test": "yarn workspace w3wallets test"
   },
-  "packageManager": "yarn@1.22.22+sha256.c17d3797fb9a9115bf375e31bfd30058cac6bc9c3b8807a3d8cb2094794b51ca"
+  "packageManager": "yarn@4.6.0"
 }

packages/test-app/package.json

@@ -6,6 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "buildAndStart": "yarn build && yarn start",
     "lint": "next lint"
   },
   "dependencies": {

packages/test-app/src/wagmi.ts

@@ -1,15 +1,14 @@
-import { http, cookieStorage, createConfig, createStorage } from 'wagmi'
-import { mainnet, sepolia } from 'wagmi/chains'
-import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors'
+import { http, cookieStorage, createConfig, createStorage } from "wagmi";
+import { mainnet, sepolia } from "wagmi/chains";
+import { coinbaseWallet, injected, walletConnect } from "wagmi/connectors";
 
 export function getConfig() {
+  const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
+  if (!projectId) throw Error("The NEXT_PUBLIC_WC_PROJECT_ID is not set");
+
   return createConfig({
     chains: [mainnet, sepolia],
-    connectors: [
-      injected(),
-      coinbaseWallet(),
-      walletConnect({ projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID }),
-    ],
+    connectors: [injected(), coinbaseWallet(), walletConnect({ projectId })],
     storage: createStorage({
       storage: cookieStorage,
     }),
@@ -18,11 +17,11 @@ export function getConfig() {
       [mainnet.id]: http(),
       [sepolia.id]: http(),
     },
-  })
+  });
 }
 
-declare module 'wagmi' {
+declare module "wagmi" {
   interface Register {
-    config: ReturnType<typeof getConfig>
+    config: ReturnType<typeof getConfig>;
   }
 }

packages/w3wallets/.env.example

@@ -1,2 +1,2 @@
-ETHEREUM_PRIVATE_KEY=0x..
-SUBSTRATE_SEED=focus inspire ...
+ETHEREUM_PRIVATE_KEY=0xd127e970659c283ab6289e70ef5de487135f0e75a2fc618d7cb068dc7f4f066c
+SUBSTRATE_SEED=focus inspire onion claw ski jaguar kidney screen bike kiss icon aerobic

packages/w3wallets/README.md

@@ -3,6 +3,7 @@
 ![License](https://img.shields.io/badge/License-MIT-yellow.svg)
 [![npm version](https://img.shields.io/npm/v/w3wallets.svg)](https://www.npmjs.com/package/w3wallets)
 ![CodeQL](https://github.com/Maksandre/w3wallets/actions/workflows/github-code-scanning/codeql/badge.svg?branch=main)
+[![Tests](https://github.com/Maksandre/w3wallets/actions/workflows/playwright.yml/badge.svg?branch=main)](https://github.com/Maksandre/w3wallets/actions/workflows/playwright.yml)
 
 Web3 wallets for Playwright.
 

packages/w3wallets/package.json

@@ -31,8 +31,9 @@
   ],
   "bin": "./src/scripts/download.js",
   "scripts": {
-    "start:ui": "yarn workspace @w3wallets/test-app dev",
-    "test": "npx playwright test",
+    "start:ui": "yarn workspace @w3wallets/test-app buildAndStart",
+    "download-wallets": "npx w3wallets backpack polkadotJS",
+    "test": "npx playwright test --project=ci",
     "build": "tsup",
     "clean": "rm -rf dist",
     "check-format": "prettier --check .",

packages/w3wallets/playwright.config.ts

@@ -11,9 +11,9 @@ export default defineConfig({
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  // retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  // workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -23,13 +23,17 @@ export default defineConfig({
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
+    headless: true,
   },
 
-  /* Configure projects for major browsers */
   projects: [
     {
-      name: "chromium",
+      name: "local",
       use: { ...devices["Desktop Chrome"] },
     },
+    {
+      name: "ci",
+      use: { ...devices["Desktop Chrome"], headless: true },
+    },
   ],
 });

packages/w3wallets/src/withWallets.ts

@@ -55,17 +55,14 @@ export function withWallets<T extends readonly WalletName[]>(
       }
 
       const context = await chromium.launchPersistentContext(userDataDir, {
-        headless: false,
+        headless: testInfo.project.use.headless ?? true,
+        channel: "chromium",
         args: [
           `--disable-extensions-except=${extensionPaths.join(",")}`,
           `--load-extension=${extensionPaths.join(",")}`,
         ],
       });
 
-      // Wait until service workers appear for the loaded extensions
-      await context.waitForEvent("serviceworker");
-
-      // Depending on how quickly the extension service workers load, we poll.
       while (context.serviceWorkers().length < extensionPaths.length) {
         await sleep(1000);
       }