Add e2e folder

e2e/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+*.png*

e2e/app/playwright.config.js

@@ -0,0 +1,12 @@
+import baseConfig from '../playwright.config';
+import { deepMerge } from '../util';
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig(deepMerge(
+    baseConfig,
+    {
+      use: {
+        baseUrl: baseConfig.use.baseUrl || "localhost:3000"
+      },
+    }
+  ));

e2e/app/tests/index.spec.js

@@ -0,0 +1,31 @@
+const { test, expect } = require('@playwright/test');
+
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('Generic Webpage Tests', () => {
+  test('should load the webpage successfully', async ({ page }) => {
+    const response = await page.goto('/');
+    const title = await page.title();
+    await expect(response.status()).toBe(200);
+  });
+
+  test('should take a screenshot of the webpage', async ({ page }) => {
+    await page.goto('/');
+    await page.screenshot({ path: 'example-screenshot.png', fullPage: true });
+  });
+
+  // https://playwright.dev/docs/accessibility-testing
+  test('should not have any automatically detectable accessibility issues', async ({ page }) => {
+    await page.goto('/');
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  // Example test of finding a an html element on the index/home page
+  // test('should check for an element to be visible', async ({ page }) => {
+  //   await page.goto('/');
+  //   const element = page.locator('h1');
+  //   await expect(element).toBeVisible();
+  // });
+
+});

e2e/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "e2e",
+  "version": "1.0.0",
+  "scripts": {
+    "e2e-setup": "npx playwright install",
+    "e2e-test": "./run-e2e-test",
+    "e2e-test:ui": "npx playwright test --ui"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.1",
+    "@types/node": "^20.14.10"
+  },
+  "dependencies": {
+    "@axe-core/playwright": "^4.9.1",
+    "dotenv": "^16.4.5"
+  }
+}

e2e/playwright.config.js

@@ -0,0 +1,51 @@
+// Load environment variables from .env file if it exists
+import * as dotenv from 'dotenv';
+
+import { defineConfig, devices } from "@playwright/test";
+
+dotenv.config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  // Timeout for each test in milliseconds
+  timeout: 20000,
+  testDir: "./tests", // Ensure this points to the correct test directory
+  // Run tests in files in parallel
+  fullyParallel: true,
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !!process.env.CI,
+  // Retry on CI only
+  retries: process.env.CI ? 2 : 0,
+  // 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",
+  // 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.BASE_URL,
+
+    // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
+    trace: "on-first-retry",
+    screenshot: "on",
+    video: "on-first-retry",
+  },
+
+  // Configure projects for major browsers
+  // Supported browsers: https://playwright.dev/docs/browsers#:~:text=Configure%20Browsers%E2%80%8B,Google%20Chrome%20and%20Microsoft%20Edge.
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // Test against mobile viewports.
+    {
+      name: "Mobile Chrome",
+      use: { ...devices["Pixel 7"] },
+    },
+  ],
+
+});

e2e/run-e2e-test

@@ -0,0 +1,13 @@
+#!/bin/bash
+#
+# Script to run Playwright tests with a specified app name.
+# Requires the APP_NAME environment variable to be set.
+
+# Ensure APP_NAME is provided
+if [[ -z "${APP_NAME}" ]]; then
+  echo "You must pass in a specific APP_NAME. IE: APP_NAME=app npm run e2e-test" >&2
+  exit 1
+fi
+
+# Run Playwright tests with the specified app name.
+npx playwright test --config "${APP_NAME}/playwright.config.js"

e2e/util.js

@@ -0,0 +1,16 @@
+// Merge a base and derived config
+export function deepMerge(obj1, obj2) {
+    const result = { ...obj1 };
+
+    for (let key in obj2) {
+      if (obj2.hasOwnProperty(key)) {
+        if (obj2[key] instanceof Object && obj1[key] instanceof Object) {
+          result[key] = deepMerge(obj1[key], obj2[key]);
+        } else {
+          result[key] = obj2[key];
+        }
+      }
+    }
+
+    return result;
+  }