Skip to content

Commit a9b20ab

Browse files
sdrozdsapsdrozdsap
authored
test: Add access continuum test for cart page (#20086)
1 parent 84284a0 commit a9b20ab

File tree

6 files changed

+190
-40
lines changed

6 files changed

+190
-40
lines changed

‎projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/cart.a11y-e2e.cy.ts

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
3+
*
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
import { checkA11yConcerns } from '../../support/utils/a11y-continuum.utils';
8+
import * as cart from '../../helpers/cart';
9+
/**
10+
* This test checks accessibility concerns on the cart page using Access Continuum
11+
*/
12+
context('Cart Page Accessibility', () => {
13+
before(() => {
14+
cy.a11yContinuumSetup();
15+
});
16+
17+
describe('Empty Cart', () => {
18+
before(() => {
19+
cy.visit('/cart');
20+
cart.validateEmptyCart();
21+
});
22+
23+
checkA11yConcerns();
24+
});
25+
26+
describe('Cart with Products', () => {
27+
before(() => {
28+
cart.addProducts();
29+
cy.visit('/cart').wait(3000);
30+
cy.get('cx-breadcrumb h1').should('contain', 'Your Shopping Cart');
31+
});
32+
33+
// Run accessibility tests but don't fail the test if concerns are found
34+
checkA11yConcerns(false);
35+
});
36+
});

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ context('Access Continuum', () => {
1111
before(() => {
1212
// Continuum only needs to be set up once per testing context;
1313
// the page under test can change without having to set up Continuum again
14-
cy.a11yContinuumSetup('cypress/continuum.conf.ts');
14+
cy.a11yContinuumSetup();
1515
});
1616

1717
describe('Homepage', () => {

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

+43-38
Original file line numberDiff line numberDiff line change
@@ -43,46 +43,51 @@ const withContinuum = <T extends (...args: any[]) => any>(fn: T): T => {
4343
// * the Continuum configuration file (continuum.conf.js) specified by `configFilePath`
4444
// * Access Engine (AccessEngine.professional.js), the underlying accessibility testing engine Continuum uses
4545
// Normally code outside the Continuum JavaScript SDK is not required to do this, but Cypress' design essentially forces our hand
46-
const a11yContinuumSetup = withContinuum((configFilePath: string) => {
47-
/**
48-
* Prevent showing xhr calls in logs and exposing api token.
49-
*/
50-
const origLog = Cypress.log.bind(Cypress);
51-
Cypress.log = function (opts, ...other) {
52-
if (opts.displayName >= LEVEL_ACCESS_API || opts.name >= LEVEL_ACCESS_API) {
53-
return;
54-
}
55-
return origLog(opts, ...other);
56-
};
46+
const a11yContinuumSetup = withContinuum(
47+
(configFilePath: string = 'cypress/continuum.conf.ts') => {
48+
/**
49+
* Prevent showing xhr calls in logs and exposing api token.
50+
*/
51+
const origLog = Cypress.log.bind(Cypress);
52+
Cypress.log = function (opts, ...other) {
53+
if (
54+
opts.displayName >= LEVEL_ACCESS_API ||
55+
opts.name >= LEVEL_ACCESS_API
56+
) {
57+
return;
58+
}
59+
return origLog(opts, ...other);
60+
};
5761

58-
/**
59-
* Avoid exposing API key in case of error.
60-
*/
61-
Cypress.on('fail', (error) => {
62-
if (error.message.includes(LEVEL_ACCESS_API)) {
63-
error.message =
64-
'There was an issue submitting accessibility concerns to AMP. Please confirm correct credentials and connection.';
65-
}
66-
throw error;
67-
});
62+
/**
63+
* Avoid exposing API key in case of error.
64+
*/
65+
Cypress.on('fail', (error) => {
66+
if (error.message.includes(LEVEL_ACCESS_API)) {
67+
error.message =
68+
'There was an issue submitting accessibility concerns to AMP. Please confirm correct credentials and connection.';
69+
}
70+
throw error;
71+
});
6872

69-
return cy
70-
.readFile(configFilePath)
71-
.then((configFileContents) => window.eval(configFileContents))
72-
.window()
73-
.then((windowUnderTest) =>
74-
cy
75-
.readFile(accessEngineFilePath)
76-
.then((accessEngineFileContents) => {
77-
Continuum.accessEngineCode =
78-
Continuum.createInjectableAccessEngineCode(
79-
accessEngineFileContents
80-
);
81-
windowUnderTest.eval(Continuum.accessEngineCode);
82-
})
83-
.then(() => Continuum.setUp(null, configFilePath, windowUnderTest))
84-
);
85-
});
73+
return cy
74+
.readFile(configFilePath)
75+
.then((configFileContents) => window.eval(configFileContents))
76+
.window()
77+
.then((windowUnderTest) =>
78+
cy
79+
.readFile(accessEngineFilePath)
80+
.then((accessEngineFileContents) => {
81+
Continuum.accessEngineCode =
82+
Continuum.createInjectableAccessEngineCode(
83+
accessEngineFileContents
84+
);
85+
windowUnderTest.eval(Continuum.accessEngineCode);
86+
})
87+
.then(() => Continuum.setUp(null, configFilePath, windowUnderTest))
88+
);
89+
}
90+
);
8691

8792
// We verify Access Engine is loaded, loading it again only if necessary, before running our accessibility tests using `Continuum.runAllTests`
8893
const a11yContinuumRunAllTests = withContinuum((includeiframe = false) => {

‎projects/storefrontapp-e2e-cypress/cypress/support/types/continuum.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ declare global {
1414
*
1515
* @param configPath - Path to the Continuum configuration file
1616
*/
17-
a11yContinuumSetup(configPath: string): Chainable<void>;
17+
a11yContinuumSetup(configPath?: string): Chainable<void>;
1818

1919
/**
2020
* Verifies Access Engine is loaded and runs all accessibility tests.

‎projects/storefrontapp-e2e-cypress/cypress/support/utils/a11y-continuum.utils.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
* SPDX-FileCopyrightText: 2025 SAP Spartacus team <[email protected]>
3+
*
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
/**
8+
* Utility function to check accessibility concerns using Access Continuum
9+
* @param strict If true, the test will fail if any accessibility concerns are found
10+
*/
11+
export function checkA11yConcerns(strict: boolean = true): void {
12+
it('should NOT have any accessibility concerns', () => {
13+
cy.a11yContinuumRunAllTests().a11YContinuumPrintResults();
14+
15+
if (strict) {
16+
cy.a11YContinuumFailIfConcerns();
17+
}
18+
});
19+
}

‎projects/storefrontapp-e2e-cypress/docs/a11y-testing.md

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# Accessibility Testing with Access Continuum
2+
3+
This document describes how to use Access Continuum for automated accessibility testing in Spartacus.
4+
5+
## Overview
6+
7+
Access Continuum is integrated into our Cypress E2E testing framework to automatically check for accessibility issues during test runs. This helps us identify and fix accessibility problems early in the development process.
8+
9+
## Setup
10+
11+
The Access Continuum integration is set up in `cypress/support/continuum.commands.ts`. This file provides custom Cypress commands for running accessibility tests.
12+
13+
## Usage
14+
15+
### Creating Accessibility Tests
16+
17+
1. Create a new test file in `cypress/e2e/accessibility/` with a naming convention that indicates it's an accessibility test (e.g., `*.a11y-e2e.cy.ts`).
18+
19+
2. Import the `checkA11yConcerns` utility function:
20+
21+
```typescript
22+
import { checkA11yConcerns } from '../../support/utils/a11y-continuum.utils';
23+
```
24+
25+
3. Set up the test context and initialize Access Continuum:
26+
27+
```typescript
28+
context('Page Accessibility', () => {
29+
before(() => {
30+
cy.a11yContinuumSetup();
31+
});
32+
33+
// Test scenarios go here
34+
});
35+
```
36+
37+
4. Create test scenarios that cover both static and dynamic elements:
38+
39+
```typescript
40+
// Basic page test
41+
describe('Page Scenario', () => {
42+
before(() => {
43+
cy.visit('/page-url').wait(3000);
44+
});
45+
46+
// Run accessibility tests
47+
checkA11yConcerns();
48+
});
49+
50+
// Test with dynamic elements
51+
describe('Modal Dialog Accessibility', () => {
52+
before(() => {
53+
cy.visit('/page-with-modal');
54+
// Trigger the modal to appear
55+
cy.get('.modal-trigger-button').click().wait(1000);
56+
});
57+
58+
// Test accessibility with the modal open
59+
checkA11yConcerns();
60+
});
61+
```
62+
63+
When creating test scenarios, be sure to cover cases where dynamic elements appear on the page, such as:
64+
- Modal dialogs
65+
- Dropdown menus
66+
- Tooltips
67+
- Accordions
68+
- Notification messages
69+
- Form validation errors
70+
- Loading states
71+
72+
These dynamic elements often introduce accessibility issues that aren't present in the initial page state.
73+
74+
### Strict vs. Non-Strict Mode
75+
76+
The `checkA11yConcerns` function accepts an optional `strict` parameter (default: `true`):
77+
78+
- When `strict` is `true`, the test will fail if any accessibility concerns are found.
79+
- When `strict` is `false`, the test will report accessibility concerns but won't fail the test.
80+
81+
## Available Commands
82+
83+
- `cy.a11yContinuumSetup(configPath)`: Initialize Access Continuum with the specified configuration file.
84+
- `cy.a11yContinuumRunAllTests(includeiframe)`: Run all accessibility tests on the current page.
85+
- `cy.a11YContinuumPrintResults()`: Print accessibility concerns to the Cypress log.
86+
- `cy.a11YContinuumFailIfConcerns()`: Fail the test if any accessibility concerns are found.
87+
88+
## Example
89+
90+
See `cypress/e2e/accessibility/cart.a11y-e2e.cy.ts` for an example of how to use Access Continuum for testing the cart page.

0 commit comments

Comments
 (0)