examples: Playwright e2e

.github/workflows/ci-playwright.yaml

@@ -0,0 +1,73 @@
+name: playwright-test
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  playwright-test:
+    runs-on: ubuntu-latest
+    services:
+      sapphire-localnet-ci:
+        image: ghcr.io/oasisprotocol/sapphire-localnet:latest
+        ports:
+          - 8545:8545
+          - 8546:8546
+        env:
+          OASIS_DEPOSIT_BINARY: /oasis-deposit -test-mnemonic -n 5
+        options: >-
+          --rm
+          --health-cmd="test -f /CONTAINER_READY"
+          --health-start-period=90s
+    env:
+      SAPPHIRE_LOCALNET_HTTP_PROXY_PORT: 3001
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Install jq
+        run: sudo apt install -y jq
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build JS client
+        run: make -C clients/js build
+      - name: Build & Test integrations
+        run: make -C integrations
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Start example
+        run: pnpm dev &
+        working-directory: examples/wagmi-v2
+      - run: npx wait-on http://localhost:5173/ --timeout 60000
+      - name: Run playwright tests
+        working-directory: examples/wagmi-v2
+        run: make test
+      - name: 'Upload playwright test-results'
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-test-results
+          path: playwright/test-results
+          retention-days: 5

examples/wagmi-v2/.gitignore

@@ -12,6 +12,8 @@ stats.html
 node_modules
 dist
 dist-ssr
+playwright-report
+test-results
 *.local
 
 # Editor directories and files

examples/wagmi-v2/Makefile

@@ -17,7 +17,7 @@ dependencies:
 full: dependencies build
 
 test:
-	@echo Please make tests for wagmi-v2 example!
+	$(NPM) run e2e:test
 
 run:
 	$(NPM) run dev

examples/wagmi-v2/package.json

@@ -10,11 +10,13 @@
 		"lint": "biome check .",
 		"format": "biome format --write .",
 		"preview": "vite preview",
-		"start:server": "vite --port 3000"
+		"start:server": "vite --port 3000",
+		"e2e:test": "playwright test"
 	},
 	"dependencies": {
-		"@oasisprotocol/sapphire-wagmi-v2": "workspace:^",
 		"@oasisprotocol/sapphire-paratime": "workspace:^",
+		"@oasisprotocol/sapphire-wagmi-v2": "workspace:^",
+		"@playwright/test": "^1.48.0",
 		"@tanstack/react-query": "5.0.5",
 		"abitype": "^1.0.2",
 		"react": "^18.2.0",

examples/wagmi-v2/playwright.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  timeout: 2 * 60 * 1000,
+  testDir: "./test/e2e/",
+  fullyParallel: true,
+  /* 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,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [["html"], ["list", { printSteps: true }]],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL: process.env.FRONTEND_URL || "http://localhost:5173/",
+    trace: "on-first-retry",
+    headless: false,
+    screenshot: {
+      mode: "only-on-failure",
+      fullPage: true,
+    },
+  },
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'main',
+      testDir: './test/e2e/',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+});

examples/wagmi-v2/src/App.tsx

@@ -101,7 +101,7 @@ function App() {
 				abi: StorageABI,
 				address: contractAddress,
 				functionName: "store",
-				args: [BigInt(Math.round((Math.random() * 100000)))],
+				args: [BigInt(40367)],
 			} as const;
 			const result = await walletClient!.writeContract({
 				...callArgs,