Accessibility Testing in Playwright JavaScript

In the previous article, we discussed accessibility testing in Playwright C#. In this article, I would like to share the implementation of accessibility testing in Playwright using the JavaScript programming language.

The following are the prerequisites:

• Install Visual Studio Code (https://code.visualstudio.com/download).
• Create a new project.
• Add the following packages to the package.json:
  • @playwright/test
  • exceljs
  • @axe-core/playwright

Step-by-step approach:

Step 1: Create a .js file accessibility-handler.js to keep the logic to track violations. Implement the following method:

/**
   * Method for accessibility testing for entire page
   * @author Sanoj Swaminathan
   * @since 07-04-2024
   * @param {*} URL 
   * @param pageName
   */
  async trackViolations(pageName, URL = null) {
    const accessibilityScanResults = await new AxeBuilder({ page: this.page }).analyze();
    const violations = accessibilityScanResults.violations;

    if (violations.length > 0) {
      console.log('Accessibility violations found:');
      console.log(`violations count: ${violations.length}`);
      for (const violation of violations) {
        console.log('****************************************************************')
        console.log(`Violation ID : ${violation.id}`);
        console.log(`Violation description : ${violation.description}`);
        console.log(`Violation impact : ${violation.impact}`);
        console.log(`Violation solution : ${violation.help}`);
        console.log(`Violation solution URL : ${violation.helpUrl}`);
        console.log(`Violation tags : ${violation.tags}`);
        console.log('****************************************************************')
        
      }
    } else {
      console.log('No accessibility violations found.');
    }
    await this.#violationInExcel(accessibilityScanResults, pageName)
  }

/**
   * The method is to write the list of Accessibility to an excel.
   * @author Sanoj Swaminathan
   * @since 07-04-2024
   * @param {*} accessibilityScanResults 
   * @param {*} pagename 
   */
  async #violationInExcel(accessibilityScanResults, pagename = 'AccessibilityResults') {
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet(pagename);
    worksheet.columns = [
      { header: 'Violation ID', key: 'rule', width: 20 },
      { header: 'Violation Description', key: 'description', width: 40 },
      { header: 'Violation Impact', key: 'impact', width: 15 },
      { header: 'Violation solution', key: 'solution', width: 35 },
      { header: 'Violation solution URL', key: 'solutionURL', width: 20 },
      { header: 'Tags', key: 'tagDetails', width: 20 },

    ];

    accessibilityScanResults.violations.forEach(violation => {
      worksheet.addRow({
        rule: violation.id,
        description: violation.description,
        impact: violation.impact,
        solution: violation.help,
        solutionURL: violation.helpUrl,
        tagDetails: violation.tags
      });
    });
    const reportDir = './test-results/accessibility-audit/summary/'
    const excelFileName = reportDir + `${pagename}__${new Date().toISOString().replace(/[-:.T]/g, '').slice(0, -4)}.xlsx`;
    await fs.mkdirSync(reportDir, { recursive: true });
    await workbook.xlsx.writeFile(excelFileName);

    console.log(`Accessibility results saved to ${excelFileName}`);
  }

• trackViolations – this is a public method that can be used in your test classes to track violations. In this method, we used the analyze() method of the AxeBuilder class to identify the violations, after that create an Excel file with a timestamp, and write the violation details (violation id, description, impact, help, help URL, and WCAG tags) into the file. The #violationInExcel method helps to write the violations into the Excel report.

Step 2: In the test script, we can call the method as below:

const accessibility = await new AccessibilityHandler(this.page);
await accessibility.trackViolations('HomePage', 'https://journeyofquality.com/');

Step 3: Execute the above logic and see the reports in the format of Excel. The Excel report will be generated in /test-results/accessibility-audit/summary/ of the project structure. Based on the above trackViolations method, a sheet called HomePage will be created in the Excel report that tracks all the violations. If you are using trackViolations method for different pages of your web application, it will create new sheets to track the violations of your different pages.

   Accessibility Testing is one of the important types of testing that adds value to your business and delivers user-friendly applications. I hope you enjoyed reading about the implementation of accessibility testing in Playwright JavaScript. Please try to utilize this opportunity in your test automation world. 

make it perfect!