Implement snapshots in Playwright

This could be used for visual regression testing

Author: mleray

.gitignore

@@ -12,4 +12,5 @@ assets/build/*
 /e2e-report/
 /playwright/.cache/
 /playwright/.auth/
+tests/e2e/*.spec.js-snapshots/
 .env

playwright.config.js

@@ -4,7 +4,7 @@ const dotenv = require('dotenv');
 const testDir = './tests/e2e';
 const envFile = process.env.CI ? `${testDir}/env/.env.ci` : `${testDir}/env/.env.default`;
 dotenv.config({path: envFile});
-dotenv.config({override: true});// prioritize .env file if exists
+dotenv.config({override: true}); // prioritize .env file if exists
 
 /**
  * @see https://playwright.dev/docs/test-configuration
@@ -113,6 +113,7 @@ const config = {
   //   command: 'npm run start',
   //   port: 3000,
   // },
+  globalSetup: require.resolve('./tests/e2e/tools/setup/global-setup'),
 };
 
 module.exports = config;

tests/e2e/snapshots.spec.js

@@ -0,0 +1,10 @@
+import {test, expect} from  './tools/lib/test-utils.js';
+import {readSiteMap} from './tools/setup/sitemap.js';
+
+test('Snapshots', async ({page}) => {
+  const urls = await readSiteMap();
+  for (const url of urls) {
+    await page.goto(url);
+    await expect(page).toHaveScreenshot();
+  }
+});

tests/e2e/tools/setup/global-setup.js

@@ -0,0 +1,18 @@
+const playwright = require('@playwright/test');
+
+import {createSiteMap, readSiteMap} from './sitemap';
+
+export default async () => {
+  // only create site map if it doesn't already exist
+  const sitemap = await readSiteMap();
+  if (sitemap) {
+    return;
+  }
+
+  // launch browser and initiate crawler
+  let browser = playwright.devices['Desktop Chrome'].defaultBrowserType;
+  browser = await playwright[browser].launch();
+  const page = await browser.newPage();
+  await createSiteMap(process.env.WP_BASE_URL, page);
+  await browser.close();
+};

tests/e2e/tools/setup/sitemap.js

@@ -0,0 +1,47 @@
+import {readFileSync, writeFileSync} from 'node:fs';
+import {join} from 'node:path';
+
+const extractLocalLinks = baseURL => {
+  const urls = new Set();
+  const offset = baseURL.length;
+  for (const {href} of document.links) {
+    if (href.startsWith(baseURL)) {
+      const path = href.slice(offset);
+      urls.add(path);
+    }
+  }
+  return Array.from(urls);
+};
+
+const ENTRY_POINT = '/topics';
+const SITEMAP = join(__dirname, './sitemap.json');
+
+/**
+ * Determines URLs and writes them to disk.
+ *
+ * @param {string} baseURL - The site's base URL.
+ * @param {Object} page    - The current page object.
+ */
+const createSiteMap = async (baseURL, page) => {
+  await page.goto(baseURL + ENTRY_POINT);
+  const urls = await page.evaluate(extractLocalLinks, baseURL);
+  const data = JSON.stringify(urls, null, 4);
+  writeFileSync(SITEMAP, data, {encoding: 'utf-8'});
+};
+
+/**
+ * Reads any previously created site map from disk.
+ *
+ * @return {Object} Sitemap data.
+ */
+const readSiteMap = async () => {
+  let data = null;
+  try {
+    data = readFileSync(SITEMAP, {encoding: 'utf-8'});
+  } catch (err) {
+    return null;
+  }
+  return JSON.parse(data);
+};
+
+export {createSiteMap, readSiteMap};

tests/e2e/tools/setup/sitemap.json

@@ -0,0 +1,21 @@
+[
+    "/topics#header",
+    "/topics#content",
+    "/topics#footer",
+    "/",
+    "/take-action/",
+    "/petitions/consectetur-adipiscing/",
+    "/petitions/vestibulum-placerat/",
+    "/petitions/consectetur-adipiscing-elit/",
+    "/get-informed/",
+    "/get-informed/energy/",
+    "/get-informed/nature/",
+    "/get-informed/people/",
+    "/about-us-2/",
+    "/press-center/",
+    "/sitemap/",
+    "/privacy-and-cookies/",
+    "/community-policy/",
+    "/terms/",
+    "/copyright/"
+]