​​​🧪​ Performance and Accessibility Testing
​​Example for performance and accessibility testing via cypress-audit​ package that relies on Lighthouse and pa11y.
​​
​​​📆​ Date: 01.11.2021
​​​🔗​ Repository: cypress-audit-nextJS
​​​⌛​ Time to review: 15-30 minutes
​​

​​TLDR

  • ​​Clone the repo and scaffold the app
  • ​​yarn start​
  • ​​Create production build yarn build​
  • ​​Run Cypress against production environment yarn e2e:prod-audit​
  • ​​Each test will generate a report in the cypress/reports​ folder
  • ​​​❌​ Failing assertions are exposed in the Cypress console
  • ​​​⏱️​ The average time for test execution is 12s (it might vary for more complex use cases)
  • ​​It is possible to customize the Lighthouse and pa11y testing rules (globally, or per test)
  • ​​Test results can be exposed either in Cypress console, or reporting tool/HTML file.
​​
​​
 
Dropbox file iconcypress-audit
​​Demonstration
​​

​​​1️⃣​ Setup

​​1.1. Install required packages
​​"cypress": "^8.7.0",
​​"cypress-audit": "^1.1.0",
​​"lighthouse": "^8.6.0"
​​
​​1.2 Configuration
  • ​​Import command to cypress/support/commands.js​
  • ​​Define plugin configuration in cypress/plugins/index.js​
  • ​​Bare example
​​on('task', {
​​ lighthouse: lighthouse(),
​​ pa11y: pa11y(console.log.bind(console)),
​​});
  • ​​Report → HTML
​​const reportT = {
​​  lh: 'lh',
​​  pa11y: 'pa11y',
​​};
​​
​​const createReport = ({ report, pageUrl, reportType }) => {
​​  const dateFormat = format(Date.now(), 'dd.MM.yyyy_HH:mm');
​​  const [_, fPath] = pageUrl.split('http://localhost:3000/');
​​  const folderPath = fPath || 'home';
​​  const ext = reportType === reportT.lh ? 'html' : 'json';
​​  const reportName = `${dateFormat}_${reportType}_report.${ext}`;
​​  // Organize reports
​​  fs.mkdir(`cypress/reports/${folderPath}`, { recursive: true }, (err) => {
​​    if (err) throw err;
​​    if (reportType === reportT.lh) {