feat: initial pipeline test

.github/workflows/playwright_tests.yml

@@ -0,0 +1,48 @@
+name: Playwright tests
+
+on:
+  push:
+    branches:
+      - feat/e2e-ci
+
+jobs:
+  e2e_tests:
+      runs-on: ubuntu-latest
+      timeout-minutes: 30
+      permissions:
+        contents: read
+        deployments: write
+      steps:
+        - name: checkout
+          uses: actions/checkout@v3
+
+        - name: setup-node
+          uses: actions/setup-node@v3
+          with:
+            node-version: 18.x
+            cache: 'npm'
+            cache-dependency-path: 'package-lock.json'
+
+        - name: Install deps
+          run: npm ci
+
+        - name: build
+          run: npm run build
+          env:
+            NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+
+        - name: Install Playwright Browsers
+          run: npx playwright install --with-deps
+
+        - name: Run Playwright tests
+          working-directory: ./laboratory
+          run: npx playwright test
+          env:
+            NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
+
+        - uses: actions/upload-artifact@v3
+          if: always()
+          with:
+            name: playwright-report
+            path: ./laboratory/playwright-report/
+            retention-days: 30

laboratory/.env.local.example

@@ -1,3 +1,10 @@
 # Get your projectId at https://cloud.walletconnect.com
 NEXT_PUBLIC_PROJECT_ID=""
 NEXT_PUBLIC_SENTRY_DSN="" # OPTIONAL
+
+# E2E test vars (optional)
+LOCAL_LABS_URL="http://localhost:3000"
+LOCAL_WALLET_URL="http://localhost:3001"
+
+LABS_URL="https://labs.walletconnect.com"
+WALLET_URL="https://react-wallet.walletconnect.com/"

laboratory/package.json

@@ -6,7 +6,7 @@
     "dev": "rm -rf .next; next dev",
     "build": "next build",
     "playwright:start": "next dev",
-    "playwright:install": "playwright install --with-deps",
+    "playwright:install": "npx playwright install --with-deps",
     "playwright:test": "playwright test",
     "playwright:debug": "playwright test --debug"
   },
@@ -23,5 +23,8 @@
     "valtio": "1.11.0",
     "viem": "1.4.1",
     "wagmi": "1.3.9"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.36.2"
   }
 }

laboratory/playwright.config.ts

@@ -1,5 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
-import { LOCAL_LAB_URL } from './tests/shared/constants'
+import { LOCAL_LABS_URL } from './tests/shared/constants'
+
+import { config } from 'dotenv'
+config({ path: './.env.local' })
 
 export default defineConfig({
   testDir: './tests',
@@ -16,8 +19,7 @@ export default defineConfig({
 
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    /* BaseURL: process.env.CI ? LAB_URL : LOCAL_SERVER, */
-    baseURL: LOCAL_LAB_URL,
+    baseURL: LOCAL_LABS_URL,
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -69,6 +71,7 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'npm run playwright:start',
-    url: LOCAL_LAB_URL
+    url: LOCAL_LABS_URL,
+    reuseExistingServer: !process.env.CI
   }
 })

laboratory/tests/shared/constants/index.ts

@@ -6,6 +6,6 @@ export const DEFAULT_SESSION_PARAMS: SessionParams = {
   accept: true
 }
 
-// Will be moved to env vars in the future
-export const LOCAL_LAB_URL = 'http://localhost:3000/with-wagmi/react'
+export const LOCAL_LABS_URL = 'http://localhost:3000/with-wagmi/react'
 export const LOCAL_WALLET_URL = 'http://localhost:3001'
+export const WALLET_URL = process.env.CI ? (process.env.WALLET_URL as string) : LOCAL_WALLET_URL

laboratory/tests/shared/pages/ModalPage.ts

@@ -1,8 +1,8 @@
 import type { Locator, Page } from '@playwright/test'
-import { LOCAL_LAB_URL } from '../constants'
+import { LOCAL_LABS_URL } from '../constants'
 
 export class ModalPage {
-  private readonly baseURL = LOCAL_LAB_URL
+  private readonly baseURL = LOCAL_LABS_URL
 
   private readonly w3modal: Locator
 

laboratory/tests/shared/pages/WalletPage.ts

@@ -1,10 +1,10 @@
 /* eslint-disable no-await-in-loop */
 import type { Locator, Page } from '@playwright/test'
 import type { SessionParams } from '../types'
-import { LOCAL_WALLET_URL } from '../constants'
+import { WALLET_URL } from '../constants'
 
 export class WalletPage {
-  private readonly baseURL = LOCAL_WALLET_URL
+  private readonly baseURL = WALLET_URL
 
   private readonly gotoAccounts: Locator
 

laboratory/tests/shared/validators/ModalValidator.ts

@@ -1,21 +1,21 @@
 import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
-import { LOCAL_LAB_URL } from '../constants'
+import { LOCAL_LABS_URL } from '../constants'
 
 export class ModalValidator {
-  private readonly baseURL = LOCAL_LAB_URL
+  private readonly baseURL = LOCAL_LABS_URL
 
   constructor(public readonly page: Page) {}
 
   async expectConnected() {
-    if (this.page.url() !== this.baseURL) {
+    if (this.page.url() !== this.baseURL && this.baseURL) {
       await this.page.goto(this.baseURL)
     }
     await expect(this.page.getByTestId('partial-account-address')).toBeVisible()
   }
 
   async expectDisconnected() {
-    if (this.page.url() !== this.baseURL) {
+    if (this.page.url() !== this.baseURL && this.baseURL) {
       await this.page.goto(this.baseURL)
     }
     await expect(this.page.getByTestId('partial-account-address')).not.toBeVisible()

laboratory/tests/shared/validators/WalletValidator.ts

@@ -1,9 +1,9 @@
 import { expect } from '@playwright/test'
 import type { Locator, Page } from '@playwright/test'
-import { LOCAL_WALLET_URL } from '../constants'
+import { WALLET_URL } from '../constants'
 
 export class WalletValidator {
-  private readonly baseURL = LOCAL_WALLET_URL
+  private readonly baseURL = WALLET_URL
 
   private readonly gotoAccounts: Locator