rework playwright config and test workflow cache

monarch-initiative · May 4, 2023 · f94b0b7 · f94b0b7
1 parent 5644042
commit f94b0b7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 34 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/workflows/test-frontend.yaml b/.github/workflows/test-frontend.yaml
@@ -12,7 +12,7 @@ defaults:
     working-directory: ./frontend
 
 jobs:
-  # Build cache of yarn packages for rest of jobs
+  # build cache for rest of jobs
   install-cache:
     runs-on: ubuntu-latest
     steps:
@@ -23,15 +23,16 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "18"
-          cache: yarn
-          cache-dependency-path: frontend/yarn.lock
 
       - name: Install packages
         run: yarn install
 
+      - name: Install Playwright
+        run: npx playwright install
+
       - name: Define cache key
         id: define-key
-        run: echo "key=tests-cache-key-$(date '+%s')" >> $GITHUB_OUTPUT
+        run: echo "key=${{ hashFiles('yarn.lock') }}" >> $GITHUB_OUTPUT
 
       - name: Store cache
         uses: actions/cache@v3
@@ -124,8 +125,5 @@ jobs:
           path: ${{ env.CACHE_PATH }}
           key: ${{ needs.install-cache.outputs.cache-key }}
 
-      - name: Install Playwright
-        run: npx playwright install --with-deps
-
       - name: Run test
         run: yarn test:e2e
diff --git a/frontend/e2e/axe.spec.ts b/frontend/e2e/axe.spec.ts
@@ -38,7 +38,9 @@ type Test = Parameters<typeof test>[1];
 /** generic page axe test */
 const checkPage =
   (path: string, selector?: string): Test =>
-  async ({ page }) => {
+  async ({ page, browserName }) => {
+    test.skip(browserName !== "chromium", "Only test Axe on chromium");
+
     /** navigate to page */
     await page.goto(path);
     await page.waitForSelector("main");
@@ -57,7 +59,7 @@ const checkPage =
     /** axe check */
     const violations = await getViolations(page);
 
-    if (violations.length) throw Error(JSON.stringify(violations, null, 2));
+    if (violations.length) console.error(JSON.stringify(violations, null, 2));
 
     expect(violations.length).toBe(0);
   };

diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
@@ -1,14 +1,40 @@
 import type { PlaywrightTestConfig } from "@playwright/test";
 import { devices } from "@playwright/test";
 
+/** browsers to test when running locally */
+const browsersLocal = [
+  /* major browsers */
+  {
+    name: "chromium",
+    use: { ...devices["Desktop Chrome"] },
+  },
+  {
+    name: "webkit",
+    use: { ...devices["Desktop Safari"] },
+  },
+  {
+    name: "firefox",
+    use: { ...devices["Desktop Firefox"] },
+  },
+];
+
+/** browsers to test on CI */
+const browsersCI = [
+  {
+    name: "chromium",
+    use: { ...devices["Desktop Chrome"] },
+  },
+];
+
 const config: PlaywrightTestConfig = {
   testDir: "./e2e",
   timeout: 30 * 1000,
   expect: {
     timeout: 5000,
   },
-  // https://github.com/microsoft/playwright/issues/19408
   reporter: "html",
+  // https://github.com/microsoft/playwright/issues/19408#issuecomment-1347341819
+  workers: process.env.CI ? 2 : undefined,
 
   /* shared settings for all projects below */
   use: {
@@ -18,33 +44,12 @@ const config: PlaywrightTestConfig = {
     headless: true || !!process.env.CI,
   },
 
-  /* major browsers */
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    },
-    // {
-    //   name: "firefox",
-    //   use: { ...devices["Desktop Firefox"] },
-    //   testMatch: /^((?!axe).)*$/,
-    // },
-    // {
-    //   name: "webkit",
-    //   use: { ...devices["Desktop Safari"] },
-    //   testMatch: /^((?!axe).)*$/,
-    // },
-  ],
+  /* browsers to test on */
+  projects: process.env.CI ? browsersCI : browsersLocal,
 
   /* run local dev server before starting tests */
   webServer: {
-    /**
-     * use the dev server by default for faster feedback loop. Use the preview
-     * server on CI for more realistic testing
-     */
-    command: process.env.CI
-      ? "vite preview --port 5173 --mode test"
-      : "vite dev --mode test",
+    command: "vite dev --mode test",
     port: 5173,
     reuseExistingServer: !process.env.CI,
   },