Add playwright

.github/workflows/build.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
 
 jobs:
-  build_job:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Check out

.github/workflows/e2e.yml

@@ -0,0 +1,20 @@
+name: End-to-end tests
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Run tests
+        run: script/test --ci-environment

.gitignore

@@ -1,2 +1,8 @@
 /node_modules
-/_site
+/_site
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

Brewfile.lock.json

@@ -65,12 +65,12 @@
   "system": {
     "macos": {
       "sonoma": {
-        "HOMEBREW_VERSION": "4.1.25",
+        "HOMEBREW_VERSION": "4.3.0",
         "HOMEBREW_PREFIX": "/opt/homebrew",
         "Homebrew/homebrew-core": "api",
-        "CLT": "15.0.0.0.1.1694021235",
-        "Xcode": "15.0",
-        "macOS": "14.1.1"
+        "CLT": "15.1.0.0.1.1700200546",
+        "Xcode": "15.1",
+        "macOS": "14.5"
       }
     }
   }

e2e/website.spec.js

@@ -0,0 +1,39 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('index page renders correctly', async ({ page }) => {
+  await page.goto('/');
+
+  await expect(page).toHaveTitle("Ynda Jas");
+  await expect(page.locator("h1")).toHaveText("Hello, world!");
+  await expect(page.locator("h2")).toHaveText([
+    "Current things",
+    "Things that I'd like to be more current",
+    "Sometimes things",
+    "Things that once were",
+    "Things that are trival"
+  ]);
+  await expect(page.locator("img")).toHaveCount(5);
+  await expect(page.locator("footer p")).toHaveCount(3);
+});
+
+test('Nihongo page renders correctly', async ({ page }) => {
+  await page.goto('/nihongo');
+
+  await expect(page).toHaveTitle("Ynda Jas");
+  await expect(page.locator("h1")).toHaveText("My Japanese language learning resources");
+  await expect(page.locator("main p")).toHaveText("List to follow");
+  await expect(page.locator("footer p")).toHaveCount(3);
+});
+
+test('writing page renders correctly', async ({ page }) => {
+  await page.goto('/writing');
+
+  await expect(page).toHaveTitle("Ynda Jas");
+  await expect(page.locator("h1")).toHaveText("Things I've written");
+  await expect(page.locator("main p")).toHaveText([
+    "Links to writings elsewhere",
+    "Blog posts"
+  ]);
+  await expect(page.locator("footer p")).toHaveCount(3);
+});

package.json

@@ -1,5 +1,7 @@
 {
   "devDependencies": {
+    "@playwright/test": "^1.44.0",
+    "@types/node": "^20.12.12",
     "http-server": "^14.1.1",
     "prettier": "^3.0.0",
     "stylelint": "^16.0.2",

playwright.config.js

@@ -0,0 +1,47 @@
+// @ts-check
+const { defineConfig, devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  testDir: 'e2e',
+  /* 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: 'http://127.0.0.1:8080',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    }
+  ],
+
+  webServer: {
+    command: `script/server${process.env.CI ? ' --ci-environment' : ''}`,
+    url: 'http://127.0.0.1:8080',
+    reuseExistingServer: !process.env.CI,
+  },
+});

script/bootstrap

@@ -19,10 +19,17 @@ done
 
 echo "==> Installing dependencies"
 
-if [ "$CI" = false ]; then
+if [ "$CI" = true ]; then
+  echo "==> Installing Node dependencies..."
+
+  npm ci
+else
   echo "==> Installing Node and fswatch if needed..."
+
   nodenv install --skip-existing
   brew bundle install
-fi
 
-npm install
+  echo "==> Installing Node dependencies..."
+
+  npm install
+fi

script/server

@@ -5,8 +5,31 @@
 
 set -e
 
-script/build
+CI=false
 
-echo "==> Starting server and watching for file changes in assets and views"
+for ARG in "$@"
+do
+  case $ARG in
+    --ci-environment)
+      CI=true
+      ;;
+  esac
+  shift
+done
 
-(trap 'kill 0' SIGINT; npx http-server _site & (fswatch -or assets views | xargs -n1 -I{} script/build --skip-update))
+if [ "$CI" = true ]; then
+  script/build --ci-environment
+else
+  script/build
+fi
+
+
+if [ "$CI" = true ]; then
+  echo "==> Starting server"
+
+  npx http-server _site
+else
+  echo "==> Starting server and watching for file changes in assets and views"
+
+  (trap 'kill 0' SIGINT; npx http-server _site & (fswatch -or assets views | xargs -n1 -I{} script/build --skip-update))
+fi

script/test

@@ -0,0 +1,32 @@
+#!/bin/sh
+set -e
+
+# script/test: Run the test suite for the application.
+
+set -e
+
+CI=false
+
+for ARG in "$@"
+do
+  case $ARG in
+    --ci-environment)
+      CI=true
+      ;;
+  esac
+  shift
+done
+
+if [ "$CI" = true ]; then
+  script/build --ci-environment
+else
+  script/build
+fi
+
+echo "==> Installing browsers for the end-to-end tests"
+
+npx playwright install chromium
+
+echo "==> Running the end-to-end tests"
+
+npx playwright test