feat: add commands to run playwright

samshara · samshara · commit cbbc0e1069db · 2024-11-27T13:57:49.000+05:45
diff --git a/.changeset/smart-cars-promise.md b/.changeset/smart-cars-promise.md
@@ -0,0 +1,7 @@
+---
+"e2e-tests": major
+---
+
+- Implemented Playwright for automated browser testing in (#1046)[https://github.com/IFRCGo/go-web-app/issues/1046]
+  - Added CLI commands to run Playwright tests in (#1047)[https://github.com/IFRCGo/go-web-app/issues/1047]
+  - Integrated Playwright tests into CI pipeline (#1048)[https://github.com/IFRCGo/go-web-app/issues/1048]
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -1,17 +1,35 @@
 name: Playwright Tests
+
+env:
+  APP_BASE_URL: ${{ vars.APP_BASE_URL }}
+
 on:
   push:
-    branches: [ develop ]
+    branches:
+      - develop
+      - 'project/playwright'
   pull_request:
-    branches: [ develop ]
+    branches:
+      - develop
+      - 'project/playwright'
+# Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
 jobs:
   test-e2e:
     name: Playwright e2e test
+    environment: 'test'
     timeout-minutes: 60
     runs-on: ubuntu-latest
     defaults:
       run:
-        working-directory: packages/tests-e2e
+        working-directory: packages/e2e-tests
     steps:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
@@ -24,8 +42,30 @@ jobs:
     - name: Run Playwright tests
       run: yarn playwright test
     - uses: actions/upload-artifact@v4
-      if: always()
+      id: playwright-report-artifact
+      if: ${{ !cancelled() }}
       with:
         name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+        path: ./packages/e2e-tests/playwright-report/
+    - uses: actions/upload-pages-artifact@v3
+      id: playwright-report-github-pages-artifact
+      if: ${{ !cancelled() }}
+      with:
+        name: github-pages
+        path: ./packages/e2e-tests/playwright-report/
+  deploy:
+    name: Upload Playwright Report to GitHub Pages
+    needs: test-e2e
+    # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to Github Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
@@ -24,7 +24,6 @@ build-ssr
 *.njsproj
 *.sln
 *.sw?
-
 .env*
 !.env.example
 .eslintcache
@@ -41,3 +40,7 @@ storybook-static/
 
 # Helm
 .helm-charts/
+
+#tests
+test-results/
+
diff --git a/app/.env.example b/app/.env.example
@@ -0,0 +1,22 @@
+APP_TITLE=IFRC GO
+APP_ENVIRONMENT=testing
+APP_API_ENDPOINT=
+APP_ADMIN_URL=
+APP_SHOW_ENV_BANNER=
+
+# Mapbox
+APP_MAPBOX_ACCESS_TOKEN=
+
+# TinyMCE
+APP_TINY_API_KEY=
+
+# GO Risk Server
+APP_RISK_API_ENDPOINT=
+
+# Sentry
+APP_SENTRY_DSN=
+APP_SENTRY_TRACES_SAMPLE_RATE=
+APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE=
+APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=
+# Google Analytics
+APP_GOOGLE_ANALYTICS_ID=
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
         "preview": "pnpm -F go-web-app preview",
         "storybook": "pnpm -F go-ui-storybook storybook",
         "build-storybook": "pnpm -F go-ui-storybook build-storybook",
-        "chromatic": "pnpm -F go-ui-storybook chromatic"
+        "chromatic": "pnpm -F go-ui-storybook chromatic",
+        "test:e2e": "yarn workspace e2e-tests playwright test"
     },
     "devDependencies": {
         "knip": "^5.36.3"
diff --git a/packages/e2e-tests/.env.example b/packages/e2e-tests/.env.example
@@ -0,0 +1,2 @@
+#Playwright Base URL
+APP_BASE_URL=
diff --git a/packages/e2e-tests/.gitignore b/packages/e2e-tests/.gitignore
diff --git a/packages/e2e-tests/biome.json b/packages/e2e-tests/biome.json
@@ -9,8 +9,11 @@
             "recommended": true
         }
     },
-    "formatter": {
-        "indentStyle": "space",
-        "indentWidth": 4
+    "javascript": {
+        "formatter": {
+            "indentStyle": "space",
+            "quoteStyle": "single",
+            "indentWidth": 4
+        }
     }
 }
diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "e2e-tests",
+    "version": "0.0.1",
+    "main": "index.js",
+    "license": "MIT",
+    "devDependencies": {
+        "@biomejs/biome": "1.7.3",
+        "@playwright/test": "^1.44.0",
+        "@types/node": "^20.12.12"
+    },
+    "scripts": {
+        "install": "playwright install",
+        "test": "playwright test",
+        "format": "biome format --write ./tests/*",
+        "lint": "yarn biome lint --apply ./tests/*",
+        "biome:check": "biome check --apply ./tests/*"
+    },
+    "dependencies": {
+        "dotenv": "^16.4.5"
+    }
+}
diff --git a/packages/e2e-tests/playwright.config.ts b/packages/e2e-tests/playwright.config.ts
@@ -1,17 +1,17 @@
-import { defineConfig, devices } from "@playwright/test";
-import "dotenv/config";
+import { defineConfig, devices } from '@playwright/test';
+import 'dotenv/config';
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
+require('dotenv').config();
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-    testDir: "./tests",
+    testDir: './tests',
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -21,31 +21,31 @@ export default defineConfig({
     /* 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",
+    reporter: 'html',
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
     use: {
         /* Base URL to use in actions like `await page.goto('/')`. */
         baseURL: process.env.APP_BASE_URL,
         /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-        trace: "on-first-retry",
+        trace: 'on-first-retry',
     },
 
     /* Configure projects for major browsers */
     projects: process.env.CI
         ? [
               {
-                  name: "chromium",
-                  use: { ...devices["Desktop Chrome"] },
+                  name: 'chromium',
+                  use: { ...devices['Desktop Chrome'] },
               },
 
               {
-                  name: "firefox",
-                  use: { ...devices["Desktop Firefox"] },
+                  name: 'firefox',
+                  use: { ...devices['Desktop Firefox'] },
               },
 
               {
-                  name: "webkit",
-                  use: { ...devices["Desktop Safari"] },
+                  name: 'webkit',
+                  use: { ...devices['Desktop Safari'] },
               },
 
               /* Test against mobile viewports. */
@@ -71,13 +71,13 @@ export default defineConfig({
         : [
               // NOTE: WebKit is only supported on Debian and Ubuntu in Playwright.
               {
-                  name: "chromium",
-                  use: { ...devices["Desktop Chrome"] },
+                  name: 'chromium',
+                  use: { ...devices['Desktop Chrome'] },
               },
 
               {
-                  name: "firefox",
-                  use: { ...devices["Desktop Firefox"] },
+                  name: 'firefox',
+                  use: { ...devices['Desktop Firefox'] },
               },
           ],
 
diff --git a/packages/e2e-tests/tests/example.spec.ts b/packages/e2e-tests/tests/example.spec.ts
@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+    await page.goto('/');
+    // Expect a title "to contain" a substring.
+    await expect(page).toHaveTitle(/IFRC GO/);
+});
+
+test('surge catalogue overview title', async ({ page }) => {
+    await page.goto('/surge/catalogue/overview');
+    // Expects page to have a heading with the name of Surge.
+    await expect(page.getByRole('heading', { level: 1 })).toHaveText('Surge');
+});
diff --git a/packages/tests-e2e/package.json b/packages/tests-e2e/package.json
diff --git a/packages/tests-e2e/tests-examples/demo-todo-app.spec.ts b/packages/tests-e2e/tests-examples/demo-todo-app.spec.ts
diff --git a/packages/tests-e2e/tests/example.spec.ts b/packages/tests-e2e/tests/example.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+#Playwright Base URL`
	`2`	`+APP_BASE_URL=`
Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,11 @@`
`9`	`9`	`"recommended": true`
`10`	`10`	`}`
`11`	`11`	`},`
`12`		`- "formatter": {`
`13`		`- "indentStyle": "space",`
`14`		`- "indentWidth": 4`
	`12`	`+ "javascript": {`
	`13`	`+ "formatter": {`
	`14`	`+ "indentStyle": "space",`
	`15`	`+ "quoteStyle": "single",`
	`16`	`+ "indentWidth": 4`
	`17`	`+ }`
`15`	`18`	`}`
`16`	`19`	`}`