Add support of E2E tests using Playwright

6 files changed, 181 insertions, 3 deletions

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 0000000..d5106f2
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,62 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches:
+      - main
+      - 'feature/**'
+      - 'release/**'
+      - 'fix/**'
+  # The branches below must be a subset of the branches above
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    name: Run Playwright tests
+    runs-on: ubuntu-latest
+
+    # The maximum number of minutes to let a workflow run
+    # before GitHub automatically cancels it. Default: 360
+    timeout-minutes: 30
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Set up Node 20.x
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+
+    - name: Setup npm cache
+      uses: actions/cache@v4
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
+    - name: Install npm dependencies
+      run: npm ci --ignore-scripts
+
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+
+    - name: Setup Hugo
+      uses: peaceiris/actions-hugo@v3
+      with:
+        hugo-version: '0.101.0'
+        extended: true
+
+    - name: Run Playwright tests
+      run: npx playwright test
+
+    - name: Upload tests artifact
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30
diff --git a/.gitignore b/.gitignore
index de33958..6f2e48f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,12 +5,22 @@
 #
 # https://help.github.com/articles/ignoring-files/#create-a-global-gitignore
 
-# Directories to ignore (do not add trailing '/'s, they skip symlinks).
+# Directories to ignore (do not add trailing '/'s, they skip symlinks):
 
 # Generated files from NPM.
 /node_modules
 # Generated files by hugo.
 /public
+# Playwright test results
+/test-results
+# Playwright report.
+/playwright-report
+# Playwright blob report.
+/blob-report
+# Playwright cache.
+/playwright/.cache
+
+# Files to ignore:
 
 # Temporary lock file while building.
 .hugo_build.lock
diff --git a/eslint.config.js b/eslint.config.js
index 8982429..51753f5 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -99,9 +99,18 @@ module.exports = [
     }
   },
   {
-    files: ['eslint.config.js'],
+    files: ['eslint.config.js', 'playwright.config.js'],
     languageOptions: {
       'sourceType': 'commonjs'
     }
+  },
+  {
+    files: ['playwright.config.js'],
+    languageOptions: {
+      globals: {
+        // Browser global variables
+        ...globals.node
+      }
+    }
   }
 ];
diff --git a/package-lock.json b/package-lock.json
index ab1d82f..d2b17dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.6.0",
       "license": "MIT",
       "devDependencies": {
+        "@playwright/test": "^1.43.0",
+        "@types/node": "^20.12.5",
         "editorconfig-checker": "^5.1.5",
         "eslint": "^9.0.0"
       }
@@ -153,6 +155,30 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.0.tgz",
+      "integrity": "sha512-Ebw0+MCqoYflop7wVKj711ccbNlrwTBCtjY5rlbiY9kHL2bCYxq+qltK6uPsVBGGAOb033H2VO0YobcQVxoW7Q==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.43.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.12.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.5.tgz",
+      "integrity": "sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -601,6 +627,20 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -902,6 +942,36 @@
         "node": ">=8"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.0.tgz",
+      "integrity": "sha512-SiOKHbVjTSf6wHuGCbqrEyzlm6qvXcv7mENP+OZon1I07brfZLGdfWV0l/efAzVx7TF3Z45ov1gPEkku9q25YQ==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.43.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.0.tgz",
+      "integrity": "sha512-iWFjyBUH97+pUFiyTqSLd8cDMMOS0r2ZYz2qEsPjH8/bX++sbIJT35MSwKnp1r/OQBAqC5XO99xFbJ9XClhf4w==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -1067,6 +1137,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index e2e1c29..53ae529 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,11 @@
     "server": "HUGO_RESOURCEDIR='../resources' HUGO_ENV=development hugo server --verbose --source=exampleSite --buildDrafts --buildFuture --ignoreCache --disableFastRender",
     "lint": "npm run lint:js && npm run lint:editorconfig",
     "lint:editorconfig": "editorconfig-checker",
-    "lint:js": "eslint static/js/* assets/js/* eslint.config.js"
+    "lint:js": "eslint static/js/* assets/js/* eslint.config.js playwright.config.js"
   },
   "devDependencies": {
+    "@playwright/test": "^1.43.0",
+    "@types/node": "^20.12.5",
     "editorconfig-checker": "^5.1.5",
     "eslint": "^9.0.0"
   }
diff --git a/tests/general.spec.js b/tests/general.spec.js
new file mode 100644
index 0000000..e9d5a45
--- /dev/null
+++ b/tests/general.spec.js
@@ -0,0 +1,19 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('has title', async ({ page }) => {
+  await page.goto('/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Ed./);
+});
+
+// test('get started link', async ({ page }) => {
+//   await page.goto('https://127.0.0.1:1313/');
+
+//   // Click the get started link.
+//   await page.getByRole('link', { name: 'Get started' }).click();
+
+//   // Expects page to have a heading with the name of Installation.
+//   await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+// });