Skip to content

Files

Latest commit

 

History

History
149 lines (118 loc) · 5.38 KB

playwright-accessibility-test.md

File metadata and controls

149 lines (118 loc) · 5.38 KB
id title sidebar_label description keywords url site_name slug
playwright-accessibility-test
Automation Tests with Accessibility Tool using Playwright
Playwright
Use LambdaTest Accessibility DevTools with Playwright to detect and report accessibility issues with automation, following WCAG guidelines.
LambdaTest
Accessibility
Testing
Automation
Accessibility Testing Settings
LambdaTest
playwright-accessibility-test/

import CodeBlock from '@theme/CodeBlock'; import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys"; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.lambdatest.com" },{ "@type": "ListItem", "position": 2, "name": "Support", "item": "https://www.lambdatest.com/support/docs/" },{ "@type": "ListItem", "position": 3, "name": "Accessibility Testing Test", "item": "https://www.lambdatest.com/support/docs/playwright-accessibility-test/" }] }) }} ></script>

This document walks you through the process of evaluating the accessibility of your website through the execution of automated tests using LambdaTest's Accessibility Tool.

Prerequisites

Step-by-Step Guide to Trigger Your Test

Step 1: Setup Your Test Suite

You can use your own project to configure and test it. For demo purposes, we are using the sample repository.

:::tip sample repo Download or Clone the code sample from the LambdaTest GitHub repository to run your tests.

<img loading="lazy" src={require('../assets/images/icons/github.png').default} alt="Image" className="doc_img"/> View on GitHub :::

If you are using your own project, make sure you update the Hub endpoint in your tests file. By setting up the Hub endpoint, you establish the communication channel between your tests and the browser nodes, enabling effective test distribution and execution.

Configure the desired capabilities based on your test requirements. For example:

  const capabilities = {
    'browserName': 'Chrome',
    'browserVersion': 'latest',
    'LT:Options': {
      'platform': 'Windows 10',
      'build': 'Playwright Accessibility',
      'name': 'Playwright Accessibility',
      'user': process.env.LT_USERNAME,
      'accessKey': process.env.LT_ACCESS_KEY,
      ..//
    }
  }

You can generate capabilities for your test requirements with the help of our inbuilt 🔗 Capabilities Generator Tool.

Step 2: Establish User Authentication

Now, you need to export your environment variables LT_USERNAME and LT_ACCESS_KEY that are available in the LambdaTest Profile page.

Run the below mentioned commands in your terminal to setup the CLI and the environment variables.

{`export LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}" export LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`}
{`set LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}" set LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`}

Step 3: Configure the Necessary Capabilities

To enable the accessibility testing within your automated test suite, set the accessibility: true in your configuration file. You can also define other settings capabilities as described below.

  const capabilities = {
    'LT:Options': {
      ..//
      "accessibility":true,
      "accessibility.wcagVersion":"wcag21a",
      "accessibility.bestPractice":true,
      "accessibility.needsReview":true
    }
  }

Step 4: Add the following add-on Script

In your lambdatest-setup.js file add these three lines after your page creation command as shown below:

await ltPage.goto("chrome://extensions/?id=johgkfjmgfeapgnbkmfkfkaholjbcnah");
const secondToggleButton = ltPage.locator('#crToggle').nth(0); 
await secondToggleButton.click();

Step 5: Execute and Monitor your Test

Now execute your tests and visit the Automation Dashboard. Click on the Accessibility tab and check the report generated.

node test

<img loading="lazy" src={require('../assets/images/accessibility-testing/playwright/playwright-accessibility.png').default} alt="automation-dashboard" className="doc_img"/>