Merge pull request #80 from RasaHQ/feature/cypress-accessibility-testing

test(accessibilityTesting):Proof of concept to check accessibility in…
RasaHQ · Aug 26, 2024 · 98a760c · 98a760c
2 parents 41bdb75 + b77c455
commit 98a760c
Show file tree

Hide file tree

Showing 7 changed files with 399 additions and 5 deletions.
diff --git a/e2e/cypress/support/commands.ts b/e2e/cypress/support/commands.ts
@@ -3,6 +3,7 @@
 import { chatbotWidgetPage } from '@rasa-cypress-POM/chatbotWidgetPOM';
 import { addCommands } from 'cypress/plugins/mockSocketIO/commands';
 import { rasaChatbotPropertySettings } from './types';
+import 'cypress-axe';
 // ***********************************************
 // This example commands.ts shows you how to
 // create various custom commands and overwrite
@@ -55,8 +56,6 @@ Cypress.Commands.add(
               document
                 .getElementsByTagName('rasa-chatbot-widget')[0]
                 .setAttribute(rasaProp.key, rasaProp.value);
-              console.log(rasaProp.key);
-              console.log(rasaProp.value);
             }
           });
         },
@@ -65,6 +64,51 @@ Cypress.Commands.add(
   }
 );
 
+/**
+ * Check accessibility and generate report
+ */
+Cypress.Commands.add('checkA11yAndReport', (context, options?) => {
+  cy.checkA11y(context, options, (violations) => {
+    cy.writeFile(
+      `cypress/accessibilityReports/${context.selector}.html`,
+      formatViolations(violations)
+    );
+  });
+});
+
+function formatViolations(violations) {
+  const violationsHtml = violations
+    .map((violation) => {
+      const nodesHtml = violation.nodes
+        .map((node) => {
+          const target = node.target.join(', ');
+          const html = node.html;
+          const summary = node.failureSummary;
+          return `<li><strong>${target}</strong>: ${html}<br><em>${summary}</em></li>`;
+        })
+        .join('');
+
+      return `
+      <h2>${violation.id}: ${violation.impact}</h2>
+      <p>${violation.description}</p>
+      <ul>${nodesHtml}</ul>
+    `;
+    })
+    .join('');
+
+  return `
+    <html>
+    <head>
+      <title>Accessibility Report</title>
+    </head>
+    <body>
+      <h1>Accessibility Violations</h1>
+      ${violationsHtml}
+    </body>
+    </html>
+  `;
+}
+
 addCommands();
 
 //

diff --git a/e2e/cypress/support/e2e.ts b/e2e/cypress/support/e2e.ts
@@ -26,3 +26,6 @@ import './commands';
 
 // Cypress visual regression plugin
 import '@frsource/cypress-plugin-visual-regression-diff';
+
+// Cypress-axe plugin
+import 'cypress-axe';
diff --git a/e2e/cypress/support/index.ts b/e2e/cypress/support/index.ts
@@ -20,6 +20,7 @@ declare global {
         expected: Object,
         options: Object
       ): Chainable<Object>;
+      checkA11yAndReport(context, options?): Chainable<void>;
     }
   }
 }