Howweoptimisedaccessibilityandperformancetestingindevelopment

As good developers, we always pay attention to how to optimise development processes; that's why we created a library that allows you to generate the basic structure of a front-end project, allowing you to choose a development framework.

We then integrated a series of tools common to all our projects, and it is with Cypress that we have managed to optimise this process of automated testing for accessibility and performance.

Cypress

For those unfamiliar with it, Cypress is an automated end-to-end testing framework based on JavaScript and can therefore be integrated with any modern language framework.

Easy to configure and highly programmable in its functionality, Cypress also allows you to easily integrate and use external libraries that offer testing services for performance, SEO and accessibility.

Among these, we have identified two that are particularly important for our objective:

• Lighthouse
• A11y

A11y

Lighthouse is an open source tool from Google that offers checks on performance, accessibility, SEO, Core Web Vitals, and more.

The @cypress-audit/lighthouse library integrates this tool into Cypress. Simply install it in your project.

1//npm
2npm i -D cypress @cypress-audit/lighthouse
3
4//yarn
5yarn add -D cypress @cypress-audit/lighthouse

Add the basic lighthouse configuration found in the documentation to the Cypress configuration file cypress/plugins/index.js (Cypress v.10+).

1const { lighthouse, prepareAudit } = require("@cypress-audit/lighthouse");
2
3module.exports = {
4  e2e: {
5    baseUrl: "", // Replace with your app's URL
6    setupNodeEvents(on, config) {
7      on("before:browser:launch", (browser = {}, launchOptions) => {
8        prepareAudit(launchOptions);
9      });
10
11      on("task", {
12        lighthouse: lighthouse(),
13      });
14    },
15  },
16};

Add the import of the commands to the Cypress structure folder file cypress/support/commands.js, so that you can use the cy.lighthouse command within Cypress tests.

1import "@cypress-audit/lighthouse/commands"

Finally, add the lighthouse test to the main cypress test cypress/e2e/index.cy.js or to the desired one.

1describe('Page testing', () => {
2  it('LightHouse test', () => {
3    cy.visit('/')
4    cy.lighthouse()
5  })
6})

You can also specify Lighthouse test options, such as score goals or viewport options, for example:

1cy.lighthouse(
2  {
3    performance: 90,
4    accessibility: 100,
5    'best-practices': 90,
6    seo: 100,
7  },
8  {
9    formFactor: 'desktop',
10    screenEmulation: {
11      mobile: false,
12      disable: false,
13      width: Cypress.config('viewportWidth'),
14      height: Cypress.config('viewportHeight'),
15      deviceScaleRatio: 1,
16     },
17   },
18)

Once Cypress is launched, the Lighthouse test will run, analysing the loading site, taking into account the mobile aspect and providing a score for the main cores, generating an error if the specified goals are not met. A time metric is also provided for the main Core Web Vitals with relative diagnostics containing possible critical issues, with an explanation and possible solution attached.

A11y

Accessibility is a fundamental issue for us. For this reason, we have integrated a specific accessibility test into Cypress based on Axe, one of the most automated accessibility testing tools in the world, trusted by major companies such as Google and Microsoft.

The cypress-axe library integrates Axe into Cypress:

1//npm
2npm i -D cypress-axe
3
4//yarn
5yarn add -D cypress-axe

After installation, simply import the package into the cypress command file, as seen previously in cypress/support/commands.js.

1import 'cypress-axe'

and finally, add the lighthouse test:

1describe('Page testing', () => {
2  beforeEach(() => {
3    cy.visit('/')
4  })
5
6  it('Axe test', () => {
7    cy.injectAxe()
8    cy.checkA11y()
9  })
10})

The integration of this additional test in Cypress will thoroughly analyse aspects related to the accessibility of the site, providing a list of errors: you can obtain more information about the error — such as a more detailed description or which element is affected — by inspecting the Cypress output in DevTools. By clicking on the error, the library will print a series of useful information in the console to help you understand and resolve the issue.

To conclude

These are two tools we use to optimise processes during development. With regard to accessibility, we conduct user tests, which are also a way of evaluating user behaviour in relation to the design.