feature. Added tests for page metadata, sitemap, and feed.

Author: davidwesst

.github/workflows/ci-cd.yml

@@ -47,6 +47,20 @@ jobs:
           npm install
           npm run build
 
+      - name: Run Playwright Tests
+        id: test
+        run: |
+          npx playwright install
+          npx playwright test --reporter=html
+        env:
+          CI: true
+
+      - name: Upload Playwright Test Report
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-test-report
+          path: playwright-report
+
       - name: Upload Site Files as Artifact
         uses: actions/upload-pages-artifact@v3
         with:

.gitignore

@@ -106,3 +106,9 @@ Cargo.lock
 
 # MSVC Windows builds of rustc generate these, which store debugging information
 *.pdb
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package-lock.json

@@ -11,7 +11,7 @@
     "url": "git+https://github.com/davidwesst/website.git"
   },
   "engines": {
-    "node": "^22"
+    "node": "^23"
   },
   "scripts": {
     "prebuild": "concurrently 'npm run clean' 'npm run generate-tags'",
@@ -24,7 +24,8 @@
     "debug:eleventy": "DEBUG=Eleventy* eleventy",
     "generate-tags": "./tools/tag-helper.js 'content/blog' 'data/content-tags.json'",
     "prestart": "npm run build",
-    "start": "http-server ./dist --port 8081"
+    "start": "http-server ./dist --port 8081",
+    "test": "playwright test --config=playwright.config.js"
   },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
@@ -33,12 +34,15 @@
     "@11ty/eleventy-plugin-rss": "^2.0.2",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@11ty/eleventy-plugin-webc": "^0.11.2",
+    "@playwright/test": "^1.51.1",
+    "@types/node": "^22.14.1",
     "concurrently": "^9.1.0",
     "date-fns": "^4.1.0",
     "gray-matter": "^4.0.3",
     "http-server": "^14.1.1",
     "rimraf": "^6.0.1",
     "simple-git": "^3.27.0",
+    "xml2js": "^0.6.2",
     "yaml": "^2.6.1"
   },
   "type": "module"

package.json

@@ -0,0 +1,80 @@
+// @ts-check
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* 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://localhost: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'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://127.0.0.1:8080',
+    reuseExistingServer: !process.env.CI,
+  },
+});
+

playwright.config.js

@@ -0,0 +1,51 @@
+// @ts-check
+import { test, expect } from '@playwright/test';
+import fetch from 'node-fetch';
+import { parseStringPromise } from 'xml2js';
+
+async function getRoutesFromSitemap(sitemapUrl) {
+  const response = await fetch(sitemapUrl);
+
+  // Check if the response is OK
+  if (!response.ok) {
+    throw new Error(`Failed to fetch sitemap from url ${sitemapUrl}. Status: ${response.status} ${response.statusText}`);
+  }
+
+  const xml = await response.text();
+
+  const parsed = await parseStringPromise(xml);
+
+  const routes = parsed.urlset.url
+    .map(u => new URL(u.loc[0]).pathname)
+    .filter(path => !path.endsWith('.xml'));
+
+  return routes;
+}
+
+test.describe('Page Metadata Checks', () => {
+  test.setTimeout(60000); // Set timeout to 60 seconds
+
+  let routes;
+
+  test.beforeAll(async () => {
+    // Replace with your sitemap URL
+    const sitemapUrl = 'http://localhost:8080/sitemap.xml';
+    routes = await getRoutesFromSitemap(sitemapUrl);
+  });
+
+  test('all pages have meta description', async ({ page }) => {
+    for (const route of routes) {
+      await page.goto(`${route}`);
+      const metaDescription = await page.locator('meta[name="description"]');
+      await expect(metaDescription).toHaveAttribute('content', /.+/); // Ensure 'content' is not empty
+    }
+  });
+
+  test('all pages have a title', async ({ page }) => {
+    for (const route of routes) {
+      await page.goto(`${route}`);
+      const pageTitle = await page.title();
+      expect(pageTitle).not.toBe(''); // Ensure the title is not empty
+    }
+  });
+});