feat: PW Axe test updates

Author: Malcolm-Remple

package-lock.json

@@ -38,7 +38,7 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.13.0",
     "@nabla/vite-plugin-eslint": "^2.0.4",
-    "@playwright/test": "^1.48.2",
+    "@playwright/test": "^1.50.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/body-scroll-lock": "^3.1.2",
@@ -56,13 +56,13 @@
     "axe-html-reporter": "^2.2.11",
     "cypress": "^13.6.2",
     "cypress-axe": "^1.5.0",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.7",
     "dotenv-flow": "^4.1.0",
     "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-vue": "^9.29.1",
-    "html-validate": "^9.1.3",
+    "html-validate": "^9.5.3",
     "kolorist": "^1.8.0",
     "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
@@ -98,4 +98,4 @@
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.21.3"
   }
-}
+}

package.json

@@ -1,70 +1,89 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
 import AxeBuilder from '@axe-core/playwright';
-import dotenv from 'dotenv';
-import { parseStringPromise } from 'xml2js';
 import { createHtmlReport } from 'axe-html-reporter';
-import fs from 'fs';
 import path from 'path';
-
-// Load environment variables from .env file
-dotenv.config();
+import fs from 'fs';
+import { processSitemap } from './utils/process-sitemap';
 
 test.describe('Accessibility tests', () => {
-  let urls = [];
-  const combinedResults = [];
-
-  const baseUrl = process.env.VITE_ASSET_URL;
-
-  test.beforeAll(async () => {
-    const sitemapUrl = baseUrl + '/page-sitemap.xml';
-
-    // Fetch the sitemap content
-    const response = await fetch(sitemapUrl);
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch sitemap: ${response.status}`);
-    }
-
-    // Read the text content of the sitemap
-    const xmlContent = await response.text();
-
-    // Parse the XML content to extract URLs
-    const parsedSitemap = await parseStringPromise(xmlContent);
-    urls = parsedSitemap.urlset.url.map((entry: any) => entry.loc[0]);
-
-    if (!urls.length) {
-      throw new Error('No URLs found in the sitemap.');
+  let urls: string[] = [];
+  let totalPages = 0;
+  const combinedResults: Array<{
+    url: string;
+    violations: any[];
+    screenshot?: string;
+  }> = [];
+
+  test.beforeAll(async ({ baseURL }) => {
+    const sitemapUrl = `${baseURL}/sitemap_index.xml`;
+    // const sitemapUrl = `${baseURL}/page-sitemap.xml`;
+    // const sitemapUrl = `${baseURL}/post-sitemap.xml`;
+    urls = await processSitemap(sitemapUrl);
+    totalPages = urls.length;
+
+    const screenshotsDir = path.resolve('./test-results/screenshots');
+    if (!fs.existsSync(screenshotsDir)) {
+      fs.mkdirSync(screenshotsDir, { recursive: true });
     }
   });
 
   test('Should not have accessibility issues', async ({ page }) => {
-    for (const url of urls) {
-      await page.goto(url);
-
-      const results = await new AxeBuilder({ page })
-        .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
-        .analyze();
-
-      console.log('URL is: ' + url);
-
-      if (results.violations.length > 0) {
-        console.log('I found violations!');
-
-        console.log(results.violations);
-
-        combinedResults.push({
-          url,
-          violations: results.violations,
-        });
-      } else {
-        console.log('Nothing found.');
-      }
+    const viewports = [
+      { name: 'mobile', width: 375, height: 667 },
+      { name: 'tablet', width: 768, height: 1024 },
+      { name: 'desktop', width: 1280, height: 720 },
+    ];
+
+    for (const viewport of viewports) {
+      await test.step(`Viewport: ${viewport.name}`, async () => {
+        await page.setViewportSize({ width: viewport.width, height: viewport.height });
+
+        for (const url of urls) {
+          await test.step(`${viewport.name} - ${url}`, async () => {
+            await page.goto(url, { waitUntil: 'networkidle' });
+
+            const results = await new AxeBuilder({ page })
+              // Level A, and Level AA
+              .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+
+              // Level A only
+              // .withTags(['wcag2a', 'wcag21a'])
+              .analyze();
+
+            console.log('URL is: ' + url);
+
+            if (results.violations.length > 0) {
+              // Capture screenshot
+              const screenshotPath = path.resolve(
+                './test-results/screenshots',
+                `axe-violation-screenshot-${Date.now()}.png`
+              );
+
+              await page.screenshot({ path: screenshotPath, fullPage: true });
+
+              combinedResults.push({
+                url,
+                violations: results.violations,
+                screenshot: screenshotPath,
+              });
+            } else {
+              console.log('Nothing found.');
+            }
+          });
+        }
+      });
     }
   });
 
   // After all tests, generate a single HTML report
   test.afterAll(async () => {
     const reportDir = 'accessibility-reports';
+    const reportDirPath = path.resolve(process.cwd(), reportDir);
+
+    // make sure the output folder exists
+    if (!fs.existsSync(reportDirPath)) {
+      fs.mkdirSync(reportDirPath, { recursive: true });
+    }
 
     if (combinedResults.length > 0) {
       // Combine all results into one object
@@ -73,12 +92,35 @@ test.describe('Accessibility tests', () => {
         violations: combinedResults.flatMap((result) => result.violations),
       };
 
+      let screenshotSummary = '';
+
+      // Add total pages scanned
+      screenshotSummary += `<p>Scanned <strong>${totalPages}</strong> URLs</p>\n`;
+
+      // Open <ul>
+      screenshotSummary += '<ul>\n';
+
+      for (let i = 0; i < combinedResults.length; i++) {
+        const result = combinedResults[i];
+        if (result.screenshot) {
+          const relPath = path.relative(reportDirPath, result.screenshot);
+          const name = path.basename(result.screenshot);
+
+          // Add li
+          screenshotSummary += `<li><a href="${relPath}">${i + 1}. ${name}</a></li>\n`;
+        }
+      }
+
+      // Close </ul>
+      screenshotSummary += '</ul>\n';
+
       // Generate the combined HTML report
       createHtmlReport({
         results: allResults,
         options: {
           outputDir: reportDir,
           reportFileName: 'combined-accessibility-report.html',
+          customSummary: screenshotSummary,
         },
       });