ci: improve Test Performance (EddieHubCommunity#3492)

* improve CI test performance

* add comment to force tests to run on PR

* fix tests directory typo

* test sharding

* fix matrix & remove deps

* remove push & install only chromium

* test playwright container

* try matrix build / lint

* update to node 18

* switch back to node 16 as no perf improvement

* remove commented out lines

* fix flaky test

* fix flaky test

* fix flaky test

* remove unnecessary comment

.github/workflows/build.yml

@@ -1,20 +1,17 @@
 name: Build
 on:
-  push:
-    paths:
-      - pages/**
-      - test/**
   pull_request:
     paths:
       - pages/**
-      - test/**
-
-env:
-  NODE_ENV: dev
+      - tests/**
+      - components/**
 
 jobs:
   build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        step: [lint, build]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -23,10 +20,8 @@ jobs:
           cache: "npm"
       - name: install dependencies
         run: npm ci
-      - name: run linter
-        run: npm run lint
-      - name: run build
-        run: npm run build
+      - name: run ${{ matrix.step }}
+        run: npm run ${{ matrix.step }}
 
   tests:
     needs: build
@@ -36,6 +31,11 @@ jobs:
         image: mongo
         ports:
           - 27017:27017
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -45,6 +45,9 @@ jobs:
       - name: install dependencies
         run: npm ci
       - name: Install Playwright's dependencies
-        run: npx playwright install --with-deps
+        run: npx playwright install chromium
       - name: run tests
-        run: npm run test
+        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+      - uses: test-summary/action@v2
+        with:
+          paths: "results.xml"

playwright.config.js

@@ -38,7 +38,7 @@ const config = {
   //workers: process.env.CI || process.env.GITPOD_MEMORY ? 1 : undefined,
   workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
+  reporter: process.env.CI ? [ ['junit', { outputFile: 'results.xml' }], ['list'] ] : 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */

tests/home.spec.js

@@ -10,8 +10,8 @@ test("homepage has title", async ({ page }) => {
 test("homepage has example link", async ({ page }) => {
   await page.goto("/");
   const getStarted = page.getByText("Example");
-
   await getStarted.click();
+  await page.waitForLoadState("networkidle");
 
   await expect(page).toHaveURL(/eddiejaoude/);
 });