Created a sample test to check accessibility issues on the login page

rancher · Aug 1, 2023 · 6b20e44 · 6b20e44
1 parent ec4762e
commit 6b20e44
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 3 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -18,7 +18,7 @@ const getSpecPattern = (): string[] => {
   const activePaths = optionalPaths.filter(({ active }) => Boolean(active)).map(({ path }) => path);
 
   // List the test directories to be included
-  const testDirs = ['pages', 'navigation', 'global-ui'].map((dir) => `cypress/e2e/tests/${ dir }/**/*.spec.ts`);
+  const testDirs = ['accessibility', 'pages', 'navigation', 'global-ui'].map((dir) => `cypress/e2e/tests/${ dir }/**/*.spec.ts`);
 
   return [
     ...activePaths,

diff --git a/cypress/e2e/tests/accessibility/login.spec.ts b/cypress/e2e/tests/accessibility/login.spec.ts
@@ -0,0 +1,10 @@
+import { LoginPagePo } from '@/cypress/e2e/po/pages/login-page.po';
+
+describe('Local authentication', { tags: ['@adminUser', '@standardUser'] }, () => {
+  it('Log in with valid credentials', () => {
+    LoginPagePo.goTo();
+    cy.injectAxe();
+    cy.wait(600);
+    cy.checkPageAccessibility();
+  });
+});
diff --git a/cypress/support/commands/commands.ts b/cypress/support/commands/commands.ts
@@ -1,5 +1,34 @@
 import { Matcher } from '@/cypress/support/types';
 
+// Custom violation callback function that prints a list of violations
+const severityIndicators = {
+  minor:    '⚪',
+  moderate: '🟡',
+  serious:  '🟠',
+  critical: '🔴',
+};
+
+function printAccessibilityViolations(violations) {
+  violations.forEach((violation) => {
+    const nodes = Cypress.$(violation.nodes.map((item) => item.target).join(','));
+
+    Cypress.log({
+      name:         `${ severityIndicators[violation.impact] } A11y`,
+      consoleProps: () => violation,
+      $el:          nodes,
+      message:      `[${ violation.help }][${ violation.helpUrl }]`
+    });
+
+    violation.nodes.forEach(({ target }) => {
+      Cypress.log({
+        name:         `🔨`,
+        consoleProps: () => violation,
+        $el:          Cypress.$(target.join(',')),
+        message:      target
+      });
+    });
+  });
+}
 /**
  * Get input field for given label
  */
@@ -50,3 +79,11 @@ Cypress.Commands.add('iFrame', () => {
     .should('not.be.empty')
     .then((body) => cy.wrap(body));
 });
+
+Cypress.Commands.add(
+  'checkPageAccessibility',
+  { prevSubject: 'optional' },
+  (subject, { skipFailures = false } = {}) => {
+    cy.checkA11y(subject, null, printAccessibilityViolations, skipFailures);
+  },
+);
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -2,7 +2,7 @@ import '@cypress/code-coverage/support';
 import './commands/commands';
 import './commands/rancher-api-commands.ts';
 import registerCypressGrep from '@cypress/grep/src/support';
-
+import 'cypress-axe';
 registerCypressGrep();
 
 // TODO handle redirection errors better?

diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -4,7 +4,8 @@
     "noEmit": true,
     "types": [
       "cypress",
-      "@cypress/grep"
+      "@cypress/grep",
+      "cypress-axe"
     ]
   },
   "include": [

diff --git a/package.json b/package.json
@@ -63,13 +63,15 @@
     "@nuxtjs/webpack-profile": "0.1.0",
     "@popperjs/core": "2.4.4",
     "ansi_up": "5.0.0",
+    "axe-core": "^4.7.2",
     "babel-plugin-module-resolver": "4.0.0",
     "browser-env": "3.3.0",
     "cookie": "0.5.0",
     "cookie-universal-nuxt": "2.1.4",
     "cron-validator": "1.2.0",
     "cronstrue": "1.95.0",
     "cross-env": "6.0.3",
+    "cypress-axe": "^1.4.0",
     "d3": "7.3.0",
     "d3-selection": "1.4.1",
     "dagre-d3": "0.6.4",

diff --git a/yarn.lock b/yarn.lock
@@ -4243,6 +4243,11 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
   integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==
 
+axe-core@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0"
+  integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==
+
 axios-retry@^3.1.8:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.4.0.tgz#f464dbe9408e5aa78fa319afd38bb69b533d8854"
@@ -5995,6 +6000,11 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A==
 
+cypress-axe@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/cypress-axe/-/cypress-axe-1.4.0.tgz#e67482bfe9e740796bf77c7823f19781a8a2faff"
+  integrity sha512-Ut7NKfzjyKm0BEbt2WxuKtLkIXmx6FD2j0RwdvO/Ykl7GmB/qRQkwbKLk3VP35+83hiIr8GKD04PDdrTK5BnyA==
+
 [email protected]:
   version "10.11.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.11.0.tgz#e9fbdd7638bae3d8fb7619fd75a6330d11ebb4e8"