Create a11y report

rancher · Dec 18, 2024 · fa4d97c · fa4d97c
1 parent e41e370
commit fa4d97c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -193,17 +193,11 @@ jobs:
           TEST_USERNAME: admin
           TEST_A11Y: true
 
-      - name: Upload html report
+      - name: Upload report
         uses: actions/upload-artifact@v4
         with:
           name: accessibility-report
-          path: cypress/accessibility/accessibility.html
-
-      - name: Upload screenshots
-        uses: actions/upload-artifact@v4
-        with:
-          name: ${{github.run_number}}-${{github.run_attempt}}-a11y-screenshots
-          path: cypress/screenshots
+          path: cypress/accessibility
 
   unit-test:
     runs-on: ubuntu-latest

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -112,7 +112,10 @@ export default defineConfig({
       require('@cypress/grep/src/plugin')(config);
       // For more info: https://www.npmjs.com/package/cypress-delete-downloads-folder
 
-      require('./cypress/support/plugins/accessibility').default(on, config);
+      // Load Accessibility plugin if configured
+      if (process.env.TEST_A11Y) {
+        require('./cypress/support/plugins/accessibility').default(on, config);
+      }
 
       on('task', { removeDirectory });
 

diff --git a/cypress/support/commands/accessiblity.ts b/cypress/support/commands/accessiblity.ts
@@ -98,17 +98,10 @@ function getAccessibilityViolationsCallback(description?: string) {
 
     cy.screenshot(`a11y_${ Cypress.currentTest.title }_${ index }`);
 
-    // cy.screenshot(`a11y_${ Cypress.currentTest.title }_${ index }`, {
-    //     onAfterScreenshot($el, props) {
-    //       a11yScreenshot({
-    //         titlePath: testPath,
-    //         props,
-    //       });
-    //   },
-    // });
-
+    // Record the screenshot against the test and move it into the a11y folder
     cy.task('a11yScreenshot', {
       titlePath: testPath,
+      test:      Cypress.currentTest,
       name:      `a11y_${ Cypress.currentTest.title }_${ index }`
     });
 

diff --git a/cypress/support/plugins/accessibility/index.ts b/cypress/support/plugins/accessibility/index.ts
@@ -47,6 +47,12 @@ export type Options = {
   titlePath: string[];
 };
 
+type Screenshot = {
+  name: string;
+  specName: string;
+  path: string;
+};
+
 // Root chain
 const chain: TestViolation[] = [{
   name:       'Root',
@@ -56,6 +62,7 @@ const chain: TestViolation[] = [{
 }];
 
 const allViolations = [] as any[];
+const screenshots = [] as Screenshot[];
 let folder;
 
 // Tidy up the chain
@@ -136,7 +143,19 @@ function registerHooks(on, config) {
       const { titlePath, name } = options;
       const found = createPath(titlePath);
 
-      found.screenshot = name;
+      // Move the screenshot to the accessibility folder
+      const details = screenshots.find((s) => s.name === name);
+
+      if (details) {
+        found.screenshot = path.join(details.specName, `${ name }.png`);
+        const screenFolder = path.join(folder, found.screenshot);
+        const destFile = path.join(screenFolder, `${ name }.png`);
+
+        if (!fs.existsSync(screenFolder)) {
+          fs.mkdirSync(screenFolder);
+        }
+        fs.renameSync(details.path, destFile);
+      }
 
       return null;
     }
@@ -169,11 +188,21 @@ function registerHooks(on, config) {
     chain.push(newSpec);
   });
 
-  on('after:spec', (spec) => {
+  on('after:spec', () => {
     // Pop the spec off of the chain
     chain.pop();
   });
 
+  on('after:screenshot', (details) => {
+    const { name, specName, path } = details;
+
+    screenshots.push({
+      name,
+      specName,
+      path
+    });
+  });
+
   on('after:run', () => {
     const root = chain[0];
 
@@ -191,8 +220,6 @@ function registerHooks(on, config) {
 
     fs.writeFileSync(path.join(folder, 'accessibility.html'), reportHTML);
 
-    // Write the validation data to disk and transform to HTML
-
     return null;
   });