test: add playwright mobile config (#452)

- Added mobile WebKit steps to `playwright-local` config 
- Updated `main.yml` with playwright-mobile task.
- Pinned the mobile job to `ubuntu-22.04` and kept Node 16 with
Playwright 1.38.1, as newer combinations were failing due to WebKit
dependency and OpenSSL issues.

Note: Playwright-staging uses 1.56.1 version as it has its own
package.json and so won't be affected by Node 16 but for
playwright-local we need to update the project node version ">=18" so
it's compatible with playwright 1.56.1

Mobile tests are now running successfully on GitHub actions

Author: KrupaPammi

.github/workflows/main.yml

@@ -3,8 +3,8 @@ name: Commit checks
 on: [push]
 
 jobs:
-  playwright:
-    name: Playwright test
+  playwright-chromium:
+    name: Playwright Chrome test
     timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
@@ -34,8 +34,59 @@ jobs:
       - name: Install playwright browsers
         run: yarn playwright install chromium
 
-      - name: Run end-to-end tests
-        run: yarn test:playwright-local:ci
+      - name: Run Playwright Chrome Tests
+        run: yarn test:playwright-local:ci:chromium
+        continue-on-error: false
+        env:
+          NODE_ENV: development
+          REACT_APP_ENDPOINT_URL: ${{ secrets.REACT_APP_ENDPOINT_URL }}
+          FORCE_COLOR: 1
+
+      # Test run video was always captured, so this action uses "always()" condition
+      - name: Upload videos
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 3
+
+  playwright-mobile:
+    name: Playwright Mobile test
+    timeout-minutes: 30
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Restore packages cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: |
+          echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
+          yarn install --frozen-lockfile --ignore-scripts
+          npm rebuild node-sass
+          rm .npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Install WebKit system dependencies
+        run: yarn playwright install-deps webkit
+
+      - name: Install playwright browsers (WebKit)
+        run: yarn playwright install webkit
+
+      - name: Run Mobile WebKit Tests
+        run: yarn test:playwright-local:ci:mobile
         continue-on-error: false
         env:
           NODE_ENV: development

package.json

@@ -37,10 +37,15 @@
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
     "lint": "eslint --color src",
-    "test:playwright-local": "playwright test --config=./playwright-local/playwright-local.config.js --project=chromium",
-    "test:playwright-local--h": "playwright test --config=./playwright-local/playwright-local.config.js --project=chromium --headed",
+    "test:playwright-local:local": "playwright test --config=./playwright-local/playwright-local.config.js",
+    "test:playwright-local:local:chromium": "playwright test --config=./playwright-local/playwright-local.config.js --project=chromium",
+    "test:playwright-local:local:chromium--h": "playwright test --config=./playwright-local/playwright-local.config.js --project=chromium --headed",
+    "test:playwright-local:local:mobile": "playwright test --config=./playwright-local/playwright-local.config.js --project=mobile-safari",
+    "test:playwright-local:local:mobile--h": "playwright test --config=./playwright-local/playwright-local.config.js --project=mobile-safari --headed",
     "test:playwright-local:ci": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:playwright-local",
-    "test:playwright-local:local": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:playwright-local",
+    "test:playwright-local:ci:chromium": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:playwright-local:local:chromium",
+    "test:playwright-local:ci:mobile": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:playwright-local:local:mobile",
+    "test:playwright-local:local:chrome:mobile": "export NODE_ENV=development; start-server-and-test start http://localhost:3000 test:playwright-local:local",
     "snyk-protect": "snyk-protect",
     "prepublish": "yarn snyk-protect"
   },
@@ -54,7 +59,7 @@
     "@babel/runtime": "^7.11.2",
     "@comicrelief/data-models": "^1.15.4",
     "@comicrelief/test-utils": "^1.5.13",
-    "@playwright/test": "1.33.0",
+    "@playwright/test": "1.38.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "babel-preset-react-app": "^9.1.2",

playwright-local/playwright-local.config.js

@@ -34,14 +34,26 @@ module.exports = defineConfig({
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: {
+          width: 1300,
+          height: 1000
+        }
+      }
     },
+    {
+      name: 'mobile-safari',
+      use: { ...devices['iPhone 12'] },
+      timeout: 360_000,
+      expect: { timeout: 20_000 }
+    }
   ],
 
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'yarn start',
-    port: '3000',
+    port: 3000,
     timeout: 120000,
     reuseExistingServer: true,
   },

yarn.lock

@@ -1687,15 +1687,12 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
-"@playwright/test@1.33.0":
-  version "1.33.0"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.33.0.tgz#669ef859efb81b143dfc624eef99d1dd92a81b67"
-  integrity sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==
+"@playwright/test@1.38.1":
+  version "1.38.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.38.1.tgz#8ef4263e355cd1d8ad7905d471d268e8acb82ed6"
+  integrity sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==
   dependencies:
-    "@types/node" "*"
-    playwright-core "1.33.0"
-  optionalDependencies:
-    fsevents "2.3.2"
+    playwright "1.38.1"
 
 "@reach/router@^1.2.1":
   version "1.3.4"
@@ -12263,10 +12260,19 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
-playwright-core@1.33.0:
-  version "1.33.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.33.0.tgz#269efe29a927cd6d144d05f3c2d2f72bd72447a1"
-  integrity sha512-aizyPE1Cj62vAECdph1iaMILpT0WUDCq3E6rW6I+dleSbBoGbktvJtzS6VHkZ4DKNEOG9qJpiom/ZxO+S15LAw==
+playwright-core@1.38.1:
+  version "1.38.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.38.1.tgz#75a3c470aa9576b7d7c4e274de3d79977448ba08"
+  integrity sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==
+
+playwright@1.38.1:
+  version "1.38.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.38.1.tgz#82ecd9bc4f4f64dbeee8a11c31793748e2528130"
+  integrity sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==
+  dependencies:
+    playwright-core "1.38.1"
+  optionalDependencies:
+    fsevents "2.3.2"
 
 pngquant-bin@^5.0.0:
   version "5.0.2"