Experimental PR: Research spike - Cypress + Accessibility testing

.github/workflows/tests-cypress.yml

@@ -23,9 +23,11 @@ jobs:
         env:
           CYPRESS_baseUrl: http://localhost:8000
         with:
-          command: npm test
+          browser: chrome
+          headed: true
           working-directory: tests/cypress
           wait-on: http://localhost:8000/healthcheck
+          spec: specs/accessibility.cy.js
 
       - uses: actions/upload-artifact@v3
         if: failure()

benefits/static/css/styles.css

@@ -280,6 +280,7 @@ main {
 }
 
 #skip-to-content {
+  color: #005681;
   left: unset !important;
   transform: none;
   overflow: hidden;

tests/cypress/cypress.config.js

@@ -1,4 +1,6 @@
 const { defineConfig } = require("cypress");
+const { pa11y, prepareAudit } = require("@cypress-audit/pa11y");
+const { lighthouse } = require("@cypress-audit/lighthouse");
 
 module.exports = defineConfig({
   downloadsFolder: "downloads",
@@ -8,12 +10,28 @@ module.exports = defineConfig({
   viewportHeight: 960,
   videosFolder: "videos",
   e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
+    // Adding custom task logging, for better a11y output
+    // ref: https://docs.cypress.io/api/commands/task#Usage
+    // https://github.com/component-driven/cypress-axe#using-the-violationcallback-argument
     setupNodeEvents(on, config) {
-      return require("./plugins/index.js")(on, config);
+      on("before:browser:launch", (browser = {}, launchOptions) => {
+        prepareAudit(launchOptions);
+      });
+      on("task", {
+        lighthouse: lighthouse(),
+        pa11y: pa11y(),
+        log(message) {
+          console.log(message);
+          return null;
+        },
+        table(message) {
+          console.table(message);
+
+          return null;
+        },
+      });
     },
     specPattern: "specs/**/*.cy.{js,jsx,ts,tsx}",
-    supportFile: false,
+    supportFile: "support/e2e.js",
   },
 });