optimized the e2e suite, separated the yml for cron

.github/workflows/e2e_cron.yml

@@ -0,0 +1,88 @@
+name: Monitor Cron e2e Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+  schedule:
+    - cron: '0 8 * * *'
+  workflow_dispatch:
+    inputs:
+      environment:
+        description: 'Environment to run the e2e against'
+        required: false
+        default: 'dev'
+        type: choice
+        options:
+          - stage
+          - prod
+          - dev
+      type:
+        description: 'What Type of Test do you want to run?'
+        required: false
+        default: 'all'
+        type: choice
+        options:
+            - all
+            - smoke
+            - ui
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20.5.1
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Copy env var
+        run: cp .env-dist .env
+      - name: Store Playwright's Version
+        run: |
+          PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
+          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Playwright Browsers for Playwright's Version
+        id: cache-playwright-browsers
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Setup Playwright Browser
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests - ${{ inputs.environment != null && inputs.environment || 'stage' }}
+        if: github.actor != 'dependabot[bot]'
+        run: npm run e2e:${{ inputs.type != null && inputs.type || '' }}
+        timeout-minutes: 10
+        env:
+          E2E_TEST_ENV: ${{ inputs.environment != null && inputs.environment || 'stage' }}
+          E2E_TEST_BASE_URL: ${{ secrets.E2E_TEST_BASE_URL }}
+          E2E_TEST_ACCOUNT_EMAIL: ${{ secrets.E2E_TEST_ACCOUNT_EMAIL }}
+          E2E_TEST_ACCOUNT_PASSWORD: ${{ secrets.E2E_TEST_ACCOUNT_PASSWORD }}
+          E2E_START_LOCAL_SERVER: 'false'
+          ADMINS: ${{ secrets.ADMINS }}
+          FXA_ENABLED: true
+          OAUTH_CLIENT_SECRET: ${{ secrets.OAUTH_CLIENT_SECRET }}
+          NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.NEXTAUTH_URL }}
+          HIBP_KANON_API_TOKEN: ${{ secrets.HIBP_KANON_API_TOKEN }}
+          HIBP_API_TOKEN: ${{ secrets.HIBP_API_TOKEN }}
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: test-results
+          path: src/e2e/test-results/
+          retention-days: 30

.github/workflows/playwright.yml

@@ -4,19 +4,6 @@ on:
     branches: [ main ]
   pull_request:
     branches: [ main ]
-  schedule:
-    - cron: '0 8 * * *'
-  workflow_dispatch:
-    inputs:
-      environment:
-        description: 'Environment to run the e2e against'
-        required: false
-        default: 'dev'
-        type: choice
-        options:
-          - stage
-          - prod
-          - dev
 jobs:
   test:
     timeout-minutes: 60

.gitignore

@@ -34,6 +34,8 @@ storybook-static/
 
 # testing
 /coverage
+/src/e2e/test-results
+playwright-report
 
 # next.js
 /.next/

playwright.config.js

@@ -114,12 +114,4 @@ export default defineConfig({
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
   outputDir: 'src/e2e/test-results/',
-
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    command: 'npm run build; npm start',
-    port: 6060,
-    // Building the app can take some time:
-    timeout: 1_800_000,
-  }
 })

src/e2e/global-setup.ts

@@ -6,8 +6,12 @@ import { setEnvVariables } from "./utils/helpers";
 import { AuthPage } from "./pages/authPage.js";
 import { LandingPage } from "./pages/landingPage.js";
 import { chromium } from "@playwright/test";
+import { exec } from "child_process";
 
 async function globalSetup() {
+  // start local web server if appropriate env variable supplied
+  await maybeStartWebServer();
+
   // playwright setup
   const browser = await chromium.launch();
   const page = await browser.newPage();
@@ -30,4 +34,35 @@ async function globalSetup() {
   await browser.close();
 }
 
+async function maybeStartWebServer(): Promise<void> {
+  if (process.env.E2E_START_LOCAL_SERVER === "true") {
+    console.log("[e2e] - Starting the local web server...");
+
+    // define port and timeout
+    const timeout = 1_800_000;
+
+    // start the server
+    const localWebServerProcess = exec("npm run build; npm start");
+
+    // wait for the server to start with a timeout
+    await new Promise<void>((resolve, reject) => {
+      localWebServerProcess.stdout?.on("data", (data) => {
+        if (data.includes("server is running")) {
+          resolve();
+        }
+      });
+
+      setTimeout(() => {
+        reject(
+          new Error(
+            "Local Web Server did not start within the specified timeout",
+          ),
+        );
+      }, timeout);
+    });
+  } else {
+    console.log("[e2e] - Skipping local web server start...");
+  }
+}
+
 export default globalSetup;

src/e2e/pages/dataBreachPage.ts

@@ -43,7 +43,7 @@ export class DataBreachPage {
     this.dataBreachesNavbarProfileMenuHeader =
       page.locator(".user-menu-header");
     this.dataBreachesNavbarProfileMenuHeaderSubtitle = page.locator(
-      "a .user-menu-subtitle",
+      ".user-menu-subtitle",
     );
     this.dataBreachesNavbarProfileMenuSettings = page
       .getByLabel("Account menu")

src/e2e/specs/auth.spec.ts

@@ -4,7 +4,7 @@
 
 import { test, expect } from "../fixtures/basePage.js";
 
-test.describe("Authentication flow verification @smoke", () => {
+test.describe(`${process.env.E2E_TEST_ENV} Authentication flow verification @smoke`, () => {
   test.beforeEach(async ({ landingPage }) => {
     await landingPage.open();
   });