Adding accessibility tests (#117)

* 110: add basic homepage accessibility check via cypress-axe

Co-authored-by: Peter Höcherl <peter.hoecherl@deutschebahn.com>
Co-authored-by: Odilo Oehmichen <odilo.oehmichen@deutschebahn.com>

* Add cart and mini-cart accessibility tests (#110)

Co-authored-by: Peter Höcherl <peter.hoecherl@deutschebahn.com>
Co-authored-by: Odilo Oehmichen <odilo.oehmichen@deutschebahn.com>

* Add accessibility tests for the full checkout process (#110)

Co-authored-by: Peter Höcherl <peter.hoecherl@deutschebahn.com>
Co-authored-by: Odilo Oehmichen <odilo.oehmichen@deutschebahn.com>

* Fix the checkAccessibility function to pass on options parameter (#110)

Co-authored-by: Peter Höcherl <peter.hoecherl@deutschebahn.com>
Co-authored-by: Odilo Oehmichen <odilo.oehmichen@deutschebahn.com>

* Add product and category accessibility tests (#110)

Co-authored-by: Peter Höcherl <peter.hoecherl@deutschebahn.com>
Co-authored-by: Odilo Oehmichen <odilo.oehmichen@deutschebahn.com>

* Add search accessibility tests (#110)

Co-authored-by: Peter Höcherl <peter.hoecherl@deutschebahn.com>
Co-authored-by: Odilo Oehmichen <odilo.oehmichen@deutschebahn.com>

* Add account accessibility tests (#110)

Co-authored-by: Peter Höcherl <peter.hoecherl@deutschebahn.com>
Co-authored-by: Odilo Oehmichen <odilo.oehmichen@deutschebahn.com>

* Include install and running steps in the README (#110)

Co-authored-by: Peter Höcherl <peter.hoecherl@deutschebahn.com>
Co-authored-by: Odilo Oehmichen <odilo.oehmichen@deutschebahn.com>

---------

Co-authored-by: Peter Höcherl <peter.hoecherl@deutschebahn.com>
Co-authored-by: Odilo Oehmichen <odilo.oehmichen@deutschebahn.com>

README.md

@@ -209,6 +209,15 @@ cypress/videos
 cypress.env.json
 ```
 
+### Accessibility test installation
+
+The accessibility test specs use cypress-axe and as such need extra items installed via npm.
+
+```bash
+npm install --save-dev cypress-axe
+npm install --save-dev axe-core
+```
+
 ## Setup
 
 Some tests are dependent on making changes in the database. This is done through the Magento 2 REST API. You will need to create an admin token for these tests. This is easily done using [magerun2](https://github.com/netz98/n98-magerun2).
@@ -298,6 +307,19 @@ CYPRESS_MAGENTO2_SPEC_SUITE=vue npx cypress run
 
 If you do not want all tests to be run, regardless of the folder names, set `MAGENTO2_SPEC_SUITE` to an empty string.
 
+### Running accessibility tests
+
+Accessibility spec files will not be found by the default spec pattern.
+This was desired as they should be seen as optional.
+
+To run the accessibility tests locally you can update your cypress.env.json to include the following
+
+```json
+{
+    "MAGENTO2_SPEC_PATTERN": "cypress/integration/luma-accessibility/**/*.spec.js"
+}
+```
+
 ## Videos
 
 https://user-images.githubusercontent.com/431360/193906592-2859ce76-c889-4377-afa0-a5d01ee06919.mp4

cypress.config.js

@@ -57,6 +57,15 @@ module.exports = defineConfig({
 
             on('file:preprocessor', tagify(config))
 
+            on('task', {
+                axetable(message) {
+                    console.table(message, ['impact', 'description', 'nodes'] );
+                    console.log("Details")
+                    console.log(message.map(m => `"${m.id}:" \n ${m.html}`).join('\n\n'));
+                    return null;
+                },
+            });
+
             const applySpecSuiteToSpecPattern = (config) => {
                 // If the specSuite is an empty string, add a trailing / to $SPEC_SUITE to avoid // in the pattern
                 const regex = config.specSuite === '' ? /\$SPEC_SUITE\//g : /\$SPEC_SUITE/g;

cypress/fixtures/account.json

@@ -24,6 +24,7 @@
         "accountAddresses": "/customer/address",
         "accountCreate": "/customer/account/create",
         "accountEdit": "/customer/account/edit",
+        "accountForgottenPassword": "/customer/account/forgotpassword",
         "accountIndex": "/customer/account/index",
         "accountOrderHistory": "/sales/order/history",
         "accountUrl": "/customer/account",

cypress/integration/luma-accessibility/cart/cart.spec.js

@@ -0,0 +1,14 @@
+import { Cart } from '../../../page-objects/luma/cart';
+import cartLuma from '../../../fixtures/luma/selectors/cart';
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Cart accessibility tests', () => {
+    it('Check cart', () => {
+        Cart.addProductToCart(cartLuma.url.product1Url);
+        cy.visit(cartLuma.url.cartUrl);
+        cy.wait(3000);
+
+        cy.injectAxe()
+        checkAccessibility()
+    });
+});

cypress/integration/luma-accessibility/cart/minicart.spec.js

@@ -0,0 +1,18 @@
+import minicart from "../../../fixtures/minicart"
+import selectors from "../../../fixtures/luma/selectors/minicart"
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Mini cart accessibility tests', () => {
+    it('Check mini cart', () => {
+        cy.restoreLocalStorage();
+        cy.clearCookies();
+        cy.visit(minicart.didiSportWatch)
+        cy.get(selectors.addToCartButton).click()
+        cy.wait(5000)
+        cy.get(selectors.miniCartButton).click()
+        cy.wait(2000)
+
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/checkout/guest-checkout.spec.js

@@ -0,0 +1,28 @@
+import {Checkout} from "../../../page-objects/luma/checkout";
+import product from '../../../fixtures/luma/product'
+import checkout from '../../../fixtures/checkout'
+import selectors from '../../../fixtures/luma/selectors/checkout'
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Guest checkout accessibility tests', () => {
+    it('Check Checkout steps as guest', () => {
+        cy.visit(product.simpleProductUrl)
+        cy.get(selectors.addToCartButton).click()
+
+        cy.wait(3000)
+        cy.visit(checkout.checkoutUrl)
+        cy.wait(5000)
+
+        cy.injectAxe()
+        // We need to set skip failures as true here otherwise the tests will not proceed to the next checkout step
+        checkAccessibility(null, null, true)
+
+        Checkout.enterShippingAddress(checkout.shippingAddress)
+        cy.wait(3000)
+        cy.get('.button.action.continue.primary').click()
+        cy.wait(5000)
+
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/checkout/user-checkout.spec.js

@@ -0,0 +1,46 @@
+import product from '../../../fixtures/luma/product'
+import checkout from '../../../fixtures/checkout'
+import selectors from '../../../fixtures/luma/selectors/checkout'
+import {checkAccessibility} from "../../../support/utils"
+import {Magento2RestApi} from "../../../support/magento2-rest-api";
+import account from "../../../fixtures/account.json";
+import {Account} from "../../../page-objects/luma/account";
+
+describe('User checkout accessibility tests', () => {
+    after(() => {
+        // Remove the added address
+        cy.wait(4000)
+        cy.visit(account.routes.accountAddresses)
+        cy.wait(4000)
+        cy.get('.additional-addresses a.delete').eq(0).click({force: true})
+        cy.wait(1000)
+        cy.get('.modal-content').contains('Are you sure you want to delete this address?')
+        cy.get('.action-primary').click()
+        cy.wait(2500)
+    })
+
+    it('Check Checkout steps as user', () => {
+        Magento2RestApi.createCustomerAccount(account.customer)
+        Account.login(account.customer.customer.email, account.customer.password)
+        Account.createAddress(account.customerInfo)
+
+        cy.visit(product.simpleProductUrl)
+        cy.get(selectors.addToCartButton).click()
+
+        cy.wait(3000)
+        cy.visit(checkout.checkoutUrl)
+        cy.wait(5000)
+
+        cy.injectAxe()
+        // We need to set skip failures as true here otherwise the tests will not proceed to the next checkout step
+        checkAccessibility(null, null, true)
+
+        cy.wait(3000)
+        cy.get('.button.action.continue.primary').click()
+        cy.wait(5000)
+
+        cy.injectAxe()
+        // We need to set skip failures as true here so the after gets called
+        checkAccessibility(null, null, true)
+    })
+})

cypress/integration/luma-accessibility/homepage.spec.js

@@ -0,0 +1,13 @@
+import homepage from "../../fixtures/luma/homepage"
+import {checkAccessibility} from "../../support/utils"
+
+describe('Home page accessibility tests', () => {
+    beforeEach(() => {
+        cy.visit(homepage.homePageUrl)
+    })
+
+    it('Check Homepage', () => {
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/products/category.spec.js

@@ -0,0 +1,12 @@
+import product from '../../../fixtures/luma/product'
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Category page accessibility tests', () => {
+    it('Check category page', () => {
+        cy.visit(product.categoryUrl)
+        cy.wait(3000)
+
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/products/product-configurable.spec.js

@@ -0,0 +1,12 @@
+import product from "../../../fixtures/luma/product"
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Configurable products accessibility test suite', () => {
+    it('Check configurable product', () => {
+        cy.visit(product.configurableProductUrl)
+        cy.wait(1000)
+
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/products/product-simple.spec.js

@@ -0,0 +1,12 @@
+import product from "../../../fixtures/luma/product"
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Simple Product accessibility test suite', () => {
+    it('Check simple product', () => {
+        cy.visit(product.simpleProductUrl)
+        cy.wait(2000)
+
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/search/product-search-suggestions.spec.js

@@ -0,0 +1,17 @@
+import searchLuma from "../../../fixtures/luma/search"
+import {checkAccessibility} from "../../../support/utils"
+import selectorsLuma from "../../../fixtures/luma/selectors/search.json";
+
+describe('Product search suggestions accessibility test', () => {
+    it('Check search suggestions', () => {
+        cy.visit('/')
+        cy.get(selectorsLuma.headerSearchIcon).click()
+        cy.get(selectorsLuma.headerSearchField)
+            .should('be.visible')
+            .type(`${searchLuma.getHint}`)
+
+        cy.wait(3000)
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/search/product-search-with-no-results.spec.js

@@ -0,0 +1,12 @@
+import { Search } from "../../../page-objects/luma/search"
+import searchLuma from "../../../fixtures/luma/search"
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Product search with no results accessibility test', () => {
+    it('Check search results with no results', () => {
+        cy.visit('/')
+        Search.search(searchLuma.noResults)
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/search/product-search-with-results.spec.js

@@ -0,0 +1,12 @@
+import { Search } from "../../../page-objects/luma/search"
+import searchLuma from "../../../fixtures/luma/search"
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Product search with results accessibility test', () => {
+    it('Check search results', () => {
+        cy.visit('/')
+        Search.search(searchLuma.productCategory)
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/user/account-add-address.spec.js

@@ -0,0 +1,15 @@
+import account from '../../../fixtures/account'
+import {checkAccessibility} from "../../../support/utils"
+import {Magento2RestApi} from "../../../support/magento2-rest-api";
+import {Account} from "../../../page-objects/luma/account";
+
+describe('Account add address accessibility test', () => {
+    it('Check add address page', () => {
+        Magento2RestApi.createCustomerAccount(account.customer)
+        Account.login(account.customer.customer.email, account.customer.password)
+
+        cy.visit(account.routes.accountAddAddress)
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/user/account-address-book.spec.js

@@ -0,0 +1,37 @@
+import account from '../../../fixtures/account'
+import {checkAccessibility} from "../../../support/utils"
+import {Magento2RestApi} from "../../../support/magento2-rest-api";
+import {Account} from "../../../page-objects/luma/account";
+
+describe('Account address book accessibility test', () => {
+    before(() => {
+        cy.wait(2500)
+        Magento2RestApi.createCustomerAccount(account.customer)
+        Account.login(account.customer.customer.email, account.customer.password)
+        Account.createAddress(account.customerInfo)
+    })
+
+    after(() => {
+        // Remove the added address
+        cy.wait(4000)
+        cy.visit(account.routes.accountAddresses)
+        cy.wait(4000)
+        cy.get('.additional-addresses a.delete').eq(0).click({force: true})
+        cy.wait(1000)
+        cy.get('.modal-content').contains('Are you sure you want to delete this address?')
+        cy.get('.action-primary').click()
+        cy.wait(2500)
+    })
+
+    it('Check address book page', () => {
+        cy.visit(account.routes.accountAddAddress)
+        Account.createAddress(account.customerInfo)
+        cy.wait(2000)
+
+        cy.visit(account.routes.accountAddresses)
+        cy.injectAxe()
+
+        // We need to set skip failures as true here so the after gets called
+        checkAccessibility(null, null, true)
+    })
+})

cypress/integration/luma-accessibility/user/account-create.spec.js

@@ -0,0 +1,10 @@
+import account from '../../../fixtures/account'
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Account test creation', () => {
+    it('Check create an account page', () => {
+        cy.visit(account.routes.accountCreate)
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/user/account-edit.spec.js

@@ -0,0 +1,15 @@
+import account from '../../../fixtures/account'
+import {checkAccessibility} from "../../../support/utils"
+import {Magento2RestApi} from "../../../support/magento2-rest-api";
+import {Account} from "../../../page-objects/luma/account";
+
+describe('Account edit accessibility test', () => {
+    it('Check account edit page', () => {
+        Magento2RestApi.createCustomerAccount(account.customer)
+        Account.login(account.customer.customer.email, account.customer.password)
+
+        cy.visit(account.routes.accountEdit)
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/user/account-forgotten-password.spec.js

@@ -0,0 +1,10 @@
+import account from '../../../fixtures/account'
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Account forgotten password accessibility test', () => {
+    it('Check forgotten password page', () => {
+        cy.visit(account.routes.accountForgottenPassword);
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/user/account-index.spec.js

@@ -0,0 +1,15 @@
+import account from '../../../fixtures/account'
+import {checkAccessibility} from "../../../support/utils"
+import {Magento2RestApi} from "../../../support/magento2-rest-api";
+import {Account} from "../../../page-objects/luma/account";
+
+describe('Account index accessibility test', () => {
+    it('Check account index page', () => {
+        Magento2RestApi.createCustomerAccount(account.customer)
+        Account.login(account.customer.customer.email, account.customer.password)
+
+        cy.visit(account.routes.accountIndex);
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})

cypress/integration/luma-accessibility/user/account-login.spec.js

@@ -0,0 +1,10 @@
+import account from '../../../fixtures/account'
+import {checkAccessibility} from "../../../support/utils"
+
+describe('Account login accessibility test', () => {
+    it('Check login page', () => {
+        cy.visit(account.routes.accountIndex);
+        cy.injectAxe()
+        checkAccessibility()
+    })
+})