integrate playwright

.github/workflows/test-nextjs-passport-example.yaml

@@ -30,5 +30,8 @@ jobs:
       - name: Build
         run: yarn build
         working-directory: ./examples/passport/wallets-with-nextjs
-
-
+
+      - name: Test
+        run: yarn test
+        working-directory: ./examples/passport/wallets-with-nextjs
+

examples/passport/wallets-with-nextjs/.gitignore

@@ -34,3 +34,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/

examples/passport/wallets-with-nextjs/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "playwright install && playwright test"
   },
   "dependencies": {
     "@ethersproject/providers": "^5.7.2",
@@ -19,6 +20,7 @@
     "wagmi": "^2.11.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.45.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

examples/passport/wallets-with-nextjs/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+  },
+
+  projects: [
+    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+    { name: "webkit", use: { ...devices["Desktop Safari"] } },
+
+    { name: "Mobile Chrome", use: { ...devices["Pixel 5"] } },
+    { name: "Mobile Safari", use: { ...devices["iPhone 12"] } },
+  ],
+
+  webServer: {
+    command: "yarn start",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+});

examples/passport/wallets-with-nextjs/tests/base.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+})
+
+test.describe('home page', () => {
+  test('has title, heading and link', async ({ page }) => {
+    await expect(page).toHaveTitle('Immutable Passport Example');
+
+    await expect(page.getByRole('heading', { name: 'Passport Wallet Examples' })).toBeVisible();
+    await expect(page.getByRole('link', { name: 'Connect Wallet with EtherJS' })).toBeVisible();
+  })
+})
+
+test.describe('connect wallet with etherjs', () => {
+  test('has heading, login button and initial account status set correctly', async ({ page }) => {
+    await page.click('text=Connect Wallet with EtherJS');   
+
+    await expect(page.getByRole('heading', { name: 'Passport Wallet - Connect Wallet with EtherJS' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Login' })).toBeVisible();
+    await expect(page.getByText('Connected Account: (not connected)')).toBeVisible();
+  })
+})

examples/passport/wallets-with-nextjs/yarn.lock

@@ -2025,6 +2025,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@playwright/test@npm:^1.45.2":
+  version: 1.45.2
+  resolution: "@playwright/test@npm:1.45.2"
+  dependencies:
+    playwright: 1.45.2
+  bin:
+    playwright: cli.js
+  checksum: 7f916fde237e6f5a5461571da026a959f8730dccfad6b4ee01ed6566089c750b8079c3a9930c45875faf67a7418195a8b11e0cdb6134405805065f6c7ee347de
+  languageName: node
+  linkType: hard
+
 "@prisma/debug@npm:5.17.0":
   version: 5.17.0
   resolution: "@prisma/debug@npm:5.17.0"
@@ -7004,6 +7015,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@npm:2.3.2":
+  version: 2.3.2
+  resolution: "fsevents@npm:2.3.2"
+  dependencies:
+    node-gyp: latest
+  checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
@@ -7014,6 +7035,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@patch:[email protected]#~builtin<compat/fsevents>":
+  version: 2.3.2
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  dependencies:
+    node-gyp: latest
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
@@ -9798,6 +9828,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"playwright-core@npm:1.45.2":
+  version: 1.45.2
+  resolution: "playwright-core@npm:1.45.2"
+  bin:
+    playwright-core: cli.js
+  checksum: 536423bfb320ad045b638498748df5681585dadda8bae1eff8995c70fcd6695761caf3c331c1e807e323e2af431bb15b0216142c5315d28f110b129f6e800b30
+  languageName: node
+  linkType: hard
+
+"playwright@npm:1.45.2":
+  version: 1.45.2
+  resolution: "playwright@npm:1.45.2"
+  dependencies:
+    fsevents: 2.3.2
+    playwright-core: 1.45.2
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    playwright: cli.js
+  checksum: ff37a27f85220363fcc6876389f58ea43f95946a1c26a8153b5f831e3a6693772e4ff45290e32dc193b4f64bc5053dbae3305432eaf5bd4a7dc6782e9b7b8e4a
+  languageName: node
+  linkType: hard
+
 "pngjs@npm:^5.0.0":
   version: 5.0.0
   resolution: "pngjs@npm:5.0.0"
@@ -11886,6 +11940,7 @@ __metadata:
   dependencies:
     "@ethersproject/providers": ^5.7.2
     "@imtbl/sdk": latest
+    "@playwright/test": ^1.45.2
     "@tanstack/react-query": ^5.51.11
     "@types/node": ^20
     "@types/react": ^18