chore: Add Access Continuum to e2e tests

.github/workflows/ci-merge-checks.yml

@@ -12,6 +12,8 @@ env:
   CYPRESS_KEY: ${{ secrets.CYPRESS_KEY }}
   GH_TOKEN: ${{ github.token }}
   NODE_VERSION: '20'
+  AMP_API_TOKEN: ${{ secrets.AMP_API_TOKEN }}
+  CONTINUUM_REGISTRY_TOKEN: ${{ secrets.CONTINUUM_REGISTRY_TOKEN }}
 
 concurrency: 
   group: ci-merge-checks-${{ github.head_ref || github.run_id }}

projects/storefrontapp-e2e-cypress/.npmrc

@@ -0,0 +1,2 @@
+@continuum:registry=https://npm.levelaccess.net/continuum/
+          //npm.levelaccess.net/continuum/:_authToken=${CONTINUUM_REGISTRY_TOKEN}

projects/storefrontapp-e2e-cypress/cypress.config.ci.ts

@@ -31,6 +31,8 @@ export default defineConfig({
     OCC_PREFIX_ORDER_ENDPOINT: 'orders',
     MAIL_CCV2_URL: 'http://mail-ccv2.westeurope.azurecontainer.io:8025',
     MAIL_CCV2_PREFIX: '/api/v2',
+    AMP_ASSET_ID: '38821',
+    AMP_ORG_ID: '10038',
   },
   e2e: {
     // We've imported your old cypress plugins here.

projects/storefrontapp-e2e-cypress/cypress/continuum.conf.ts

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+window.LevelAccess_AccessContinuumConfiguration = {
+  accessEngineType: 'professional',
+  ampInstanceUrl: 'https://sap.levelaccess.net',
+  defaultStandardIds: [
+    610 /* WCAG 2.0 Level A */, 611 /* WCAG 2.0 Level AA */,
+    612 /* WCAG 2.0 Level AAA */, 1387 /* WCAG 2.1 Level A */,
+    1388 /* WCAG 2.1 Level AA */, 1389 /* WCAG 2.1 Level AAA */,
+    1140 /* Section 508 and 255 (Revised 2017) */,
+    1471 /* WCAG 2.0 Level A & AA Baseline */, 1001235 /* WCAG SAP Standards */,
+    2127 /* WCAG 2.2 Level A */, 2128 /* WCAG 2.2 Level AA */,
+  ],
+  includePotentialAccessibilityConcerns: false,
+  ampApiToken: Cypress.env('AMP_API_TOKEN'),
+  proxy: {
+    host: null,
+    port: null,
+    username: null,
+    password: null,
+  },
+  accessibilityConcerns: {
+    includePotentialConcerns: false,
+    format: 'amp',
+  },
+  levelAccessPlatform: {
+    orgInstanceUrl: null,
+    apiKey: null,
+    workspaceId: null,
+    digitalPropertyId: null,
+    scanTagId: null,
+  },
+};

projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/continuum.example-e2e.cy.ts

@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * This is an example to show how we can setup and use Access Continuum to test accessibility in e2e tests.
+ */
+context('Access Continuum', () => {
+  before(() => {
+    // Continuum only needs to be set up once per testing context;
+    // the page under test can change without having to set up Continuum again
+    cy.a11yContinuumSetup('cypress/continuum.conf.ts');
+  });
+
+  describe('Homepage', () => {
+    before(() => {
+      cy.visit('/').wait(3_000);
+    });
+
+    checkA11yConcerns();
+  });
+
+  describe('PLP', () => {
+    before(() => {
+      cy.visit('Open-Catalogue/Cameras/Digital-Cameras/c/575').wait(3_000);
+    });
+
+    checkA11yConcerns();
+  });
+});
+
+function checkA11yConcerns() {
+  it('should NOT have any accessibility concerns', () => {
+    cy.a11yContinuumRunAllTests()
+      .a11YContinuumPrintResults()
+      .a11yContinuumSubmitConcernsToAmp()
+      .a11YContinuumFailIfConcerns();
+  });
+}

projects/storefrontapp-e2e-cypress/cypress/plugins/cy-ts-preprocessor.js

@@ -3,6 +3,23 @@ const wp = require('@cypress/webpack-preprocessor');
 const webpackOptions = {
   resolve: {
     extensions: ['.ts', '.js'],
+    fallback: {
+      fs: false,
+      tls: false,
+      net: false,
+      path: false,
+      zlib: false,
+      http: false,
+      https: false,
+      stream: false,
+      crypto: false,
+      util: false,
+      url: false,
+      assert: false,
+      domain: false,
+      os: false,
+      child_process: false,
+    },
   },
   module: {
     rules: [
@@ -20,6 +37,7 @@ const webpackOptions = {
       },
     ],
   },
+  target: 'node',
 };
 
 const options = {

projects/storefrontapp-e2e-cypress/cypress/support/commands.ts

@@ -11,6 +11,7 @@ import '@testing-library/cypress/add-commands';
 import 'cypress-file-upload';
 import './a11y-tab.commands';
 import './cart.commands';
+import './continuum.commands';
 import './cx-config.commands';
 import './login.commands';
 import './ng-select.commands';

projects/storefrontapp-e2e-cypress/cypress/support/continuum.commands.ts

@@ -0,0 +1,185 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// This is a basic custom support file for using Continuum's JavaScript SDK with Cypress
+// Lots of functionality is already available to you here out of the box, but we encourage you to add your own custom commands!
+
+import {
+  Continuum,
+  ReportManagementStrategy,
+  ModuleManagementStrategy,
+} from '@continuum/continuum-javascript-professional';
+
+const accessEngineFilePath =
+  `node_modules/@continuum/continuum-javascript-professional/AccessEngine.professional.js`.replace(
+    /^\//,
+    ''
+  ); // versions of Cypress prior to 5 include a leading forward slash in __dirname
+
+const LEVEL_ACCESS_API = 'https://sap.levelaccess.net/api/cont/organization';
+
+// Using the Continuum JavaScript SDK requires us to load the following files before invoking `Continuum.setUp`:
+// * the Continuum configuration file (continuum.conf.js) specified by `configFilePath`
+// * Access Engine (AccessEngine.professional.js), the underlying accessibility testing engine Continuum uses
+// Normally code outside the Continuum JavaScript SDK is not required to do this, but Cypress' design essentially forces our hand
+const a11yContinuumSetup = (configFilePath) => {
+  /**
+   * Prevent showing xhr calls in logs and exposing api token.
+   */
+  const origLog = Cypress.log.bind(Cypress);
+  Cypress.log = function (opts, ...other) {
+    if (opts.displayName >= LEVEL_ACCESS_API || opts.name >= LEVEL_ACCESS_API) {
+      return;
+    }
+    return origLog(opts, ...other);
+  };
+
+  /**
+   *  Avoid exposing API key in case of error.
+   */
+  Cypress.on('fail', (error) => {
+    if (error.message.includes(LEVEL_ACCESS_API)) {
+      error.message =
+        'There was an issue submitting accessibility concerns to AMP. Please confirm correct credentials and connection.';
+    }
+    throw error;
+  });
+
+  return cy
+    .readFile(configFilePath)
+    .then((configFileContents) => window.eval(configFileContents))
+    .window()
+    .then((windowUnderTest) =>
+      cy
+        .readFile(accessEngineFilePath)
+        .then((accessEngineFileContents) => {
+          Continuum.accessEngineCode =
+            Continuum.createInjectableAccessEngineCode(
+              accessEngineFileContents
+            );
+          windowUnderTest.eval(Continuum.accessEngineCode);
+        })
+        .then(() => Continuum.setUp(null, configFilePath, windowUnderTest))
+    );
+};
+
+// We verify Access Engine is loaded, loading it again only if necessary, before running our accessibility tests using `Continuum.runAllTests`
+const a11yContinuumRunAllTests = (includeiframe = false) =>
+  cy
+    .window()
+    .then((windowUnderTest) =>
+      cy.then(() => {
+        if (!windowUnderTest.LevelAccess_Continuum_AccessEngine) {
+          return cy
+            .readFile(accessEngineFilePath)
+            .then((accessEngineFileContents) =>
+              windowUnderTest.eval(
+                Continuum.createInjectableAccessEngineCode(
+                  accessEngineFileContents
+                )
+              )
+            );
+        }
+      })
+    )
+    .then(() => Continuum.runAllTests(includeiframe));
+
+const a11YContinuumPrintResults = () => {
+  const accessibilityConcerns = Continuum.getAccessibilityConcerns();
+
+  if (accessibilityConcerns.length > 0) {
+    // print out some information about each accessibility concern,
+    // highlighting offending elements along the way
+    accessibilityConcerns.forEach((accessibilityConcern) => {
+      // if the element to highlight is in shadow DOM, highlight its shadow root nearest the light DOM;
+      // there's an outstanding defect preventing us from directly highlighting elements in shadow DOM: https://github.com/cypress-io/cypress/issues/8843
+      const modifiedAccessibilityConcernPath =
+        accessibilityConcern.path?.split('|:host>')[0]; // "|:host>" in the path indicates the element is in shadow DOM
+
+      if (modifiedAccessibilityConcernPath) {
+        let originalNodeBorder;
+        cy.get(modifiedAccessibilityConcernPath)
+          .then((node) => {
+            originalNodeBorder = node.css('border');
+            node.css('border', '2px solid magenta');
+          })
+          .log(
+            `Accessibility Concern: ${accessibilityConcern.attribute} [${accessibilityConcern.bestPracticeDetailsUrl}](${accessibilityConcern.bestPracticeDetailsUrl})`
+          )
+          .get(modifiedAccessibilityConcernPath, { log: false })
+          .then((node) => {
+            node.css('border', originalNodeBorder);
+          });
+      }
+    });
+  } else {
+    cy.log('No accessibility concerns found');
+  }
+};
+
+const a11YContinuumFailIfConcerns = () => {
+  expect(
+    Continuum.getAccessibilityConcerns(),
+    'no accessibility concerns'
+  ).to.have.lengthOf(0);
+};
+
+const a11yContinuumSubmitConcernsToAmp = (reportName = 'AMP Report') => {
+  const accessibilityConcerns = Continuum.getAccessibilityConcerns();
+  if (accessibilityConcerns.length <= 0) {
+    return;
+  }
+
+  if (
+    Cypress.env('AMP_API_TOKEN') &&
+    (Cypress.env('AMP_API_TOKEN') !== '' ||
+      Cypress.env('AMP_API_TOKEN') !== 'undefined')
+  ) {
+    cy.log('Submitting accessibility concerns to AMP...');
+
+    cy.title({ log: false }).then((pageTitle) => {
+      cy.url({ log: false }).then({ timeout: 30000 }, async (pageUrl) => {
+        const ampReportingService = Continuum.AMPReportingService;
+
+        await ampReportingService.setActiveOrganization(
+          Cypress.env('AMP_ORG_ID')
+        ); // ID of AMP organization to submit test results to
+        await ampReportingService.setActiveAsset(Cypress.env('AMP_ASSET_ID')); // ID of AMP asset to submit test results to
+        await ampReportingService.setActiveReportByName(reportName);
+        await ampReportingService.setActiveModuleByName(pageTitle, pageUrl);
+        await ampReportingService.setActiveReportManagementStrategy(
+          ReportManagementStrategy.APPEND
+        );
+        await ampReportingService.setActiveModuleManagementStrategy(
+          ModuleManagementStrategy.OVERWRITE
+        );
+        await ampReportingService.submitAccessibilityConcernsToAMP(
+          accessibilityConcerns
+        );
+
+        cy.log(
+          `Accessibility concerns submitted to AMP: ${ampReportingService.activeModule.getAMPUrl()}`
+        );
+      });
+    });
+  } else {
+    cy.log(
+      'Failed to submit accessibility concerns to AMP. AMP_API_TOKEN not set.'
+    );
+  }
+};
+
+Cypress.Commands.add('a11yContinuumSetup', a11yContinuumSetup);
+Cypress.Commands.add('a11yContinuumRunAllTests', a11yContinuumRunAllTests);
+Cypress.Commands.add('a11YContinuumPrintResults', a11YContinuumPrintResults);
+Cypress.Commands.add(
+  'a11YContinuumFailIfConcerns',
+  a11YContinuumFailIfConcerns
+);
+Cypress.Commands.add(
+  'a11yContinuumSubmitConcernsToAmp',
+  a11yContinuumSubmitConcernsToAmp
+);