|
| 1 | +--- |
| 2 | +id: playwright-accessibility-test |
| 3 | +title: Automation Tests with Accessibility Tool using Playwright |
| 4 | +sidebar_label: Playwright |
| 5 | +description: Use LambdaTest Accessibility DevTools with Playwright to detect and report accessibility issues with automation, following WCAG guidelines. |
| 6 | +keywords: |
| 7 | + - LambdaTest |
| 8 | + - Accessibility |
| 9 | + - Testing |
| 10 | + - Automation |
| 11 | + - Accessibility Testing Settings |
| 12 | +url: https://www.lambdatest.com/support/docs/playwright-accessibility-test/ |
| 13 | +site_name: LambdaTest |
| 14 | +slug: playwright-accessibility-test/ |
| 15 | +--- |
| 16 | + |
| 17 | +import CodeBlock from '@theme/CodeBlock'; |
| 18 | +import {YOUR_LAMBDATEST_USERNAME, YOUR_LAMBDATEST_ACCESS_KEY} from "@site/src/component/keys"; |
| 19 | +import Tabs from '@theme/Tabs'; |
| 20 | +import TabItem from '@theme/TabItem'; |
| 21 | + |
| 22 | +<script type="application/ld+json" |
| 23 | + dangerouslySetInnerHTML={{ __html: JSON.stringify({ |
| 24 | + "@context": "https://schema.org", |
| 25 | + "@type": "BreadcrumbList", |
| 26 | + "itemListElement": [{ |
| 27 | + "@type": "ListItem", |
| 28 | + "position": 1, |
| 29 | + "name": "Home", |
| 30 | + "item": "https://www.lambdatest.com" |
| 31 | + },{ |
| 32 | + "@type": "ListItem", |
| 33 | + "position": 2, |
| 34 | + "name": "Support", |
| 35 | + "item": "https://www.lambdatest.com/support/docs/" |
| 36 | + },{ |
| 37 | + "@type": "ListItem", |
| 38 | + "position": 3, |
| 39 | + "name": "Accessibility Testing Test", |
| 40 | + "item": "https://www.lambdatest.com/support/docs/playwright-accessibility-test/" |
| 41 | + }] |
| 42 | + }) |
| 43 | + }} |
| 44 | +></script> |
| 45 | +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. |
| 46 | + |
| 47 | +<!-- > Compatible only with Chrome and Edge browser versions >= 90. --> |
| 48 | + |
| 49 | +## Prerequisites |
| 50 | + |
| 51 | +- Your [LambdaTest Username and Access key](/support/docs/using-environment-variables-for-authentication-credentials/) |
| 52 | +- Setup your local machine as per your testing framework. |
| 53 | + |
| 54 | +## Step-by-Step Guide to Trigger Your Test |
| 55 | + |
| 56 | +### Step 1: Setup Your Test Suite |
| 57 | +You can use your own project to configure and test it. For demo purposes, we are using the sample repository. |
| 58 | + |
| 59 | +:::tip sample repo |
| 60 | +Download or Clone the code sample from the LambdaTest GitHub repository to run your tests. |
| 61 | + |
| 62 | +< a href= "https://github.com/LambdaTest/lambdatest-accessibility-playwright" className= "github__anchor"><img loading="lazy" src={require('../assets/images/icons/github.png').default} alt="Image" className="doc_img"/> View on GitHub</ a> |
| 63 | +::: |
| 64 | + |
| 65 | +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. |
| 66 | + |
| 67 | +Configure the desired capabilities based on your test requirements. For example: |
| 68 | + |
| 69 | +```javascript |
| 70 | + const capabilities = { |
| 71 | + 'browserName': 'Chrome', |
| 72 | + 'browserVersion': 'latest', |
| 73 | + 'LT:Options': { |
| 74 | + 'platform': 'Windows 10', |
| 75 | + 'build': 'Playwright Accessibility', |
| 76 | + 'name': 'Playwright Accessibility', |
| 77 | + 'user': process.env.LT_USERNAME, |
| 78 | + 'accessKey': process.env.LT_ACCESS_KEY, |
| 79 | + ..// |
| 80 | + } |
| 81 | + } |
| 82 | +``` |
| 83 | + |
| 84 | +> You can generate capabilities for your test requirements with the help of our inbuilt 🔗 [Capabilities Generator Tool](https://www.lambdatest.com/capabilities-generator/). |
| 85 | +
|
| 86 | +### Step 2: Establish User Authentication |
| 87 | + |
| 88 | +Now, you need to export your environment variables *LT_USERNAME* and *LT_ACCESS_KEY* that are available in the [LambdaTest Profile page](https://accounts.lambdatest.com/detail/profile). |
| 89 | + |
| 90 | +Run the below mentioned commands in your terminal to setup the CLI and the environment variables. |
| 91 | + |
| 92 | +<Tabs className="docs__val"> |
| 93 | + |
| 94 | +<TabItem value="bash" label="Linux / MacOS" default> |
| 95 | + |
| 96 | + <div className="lambdatest__codeblock"> |
| 97 | + <CodeBlock className="language-bash"> |
| 98 | + {`export LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}" |
| 99 | +export LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`} |
| 100 | + </CodeBlock> |
| 101 | +</div> |
| 102 | + |
| 103 | +</TabItem> |
| 104 | + |
| 105 | +<TabItem value="powershell" label="Windows" default> |
| 106 | + |
| 107 | + <div className="lambdatest__codeblock"> |
| 108 | + <CodeBlock className="language-powershell"> |
| 109 | + {`set LT_USERNAME="${ YOUR_LAMBDATEST_USERNAME()}" |
| 110 | +set LT_ACCESS_KEY="${ YOUR_LAMBDATEST_ACCESS_KEY()}"`} |
| 111 | + </CodeBlock> |
| 112 | +</div> |
| 113 | + |
| 114 | +</TabItem> |
| 115 | +</Tabs> |
| 116 | + |
| 117 | +### Step 3: Configure the Necessary Capabilities |
| 118 | +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. |
| 119 | + |
| 120 | +```javascript |
| 121 | + const capabilities = { |
| 122 | + 'LT:Options': { |
| 123 | + ..// |
| 124 | + "accessibility":true, |
| 125 | + "accessibility.wcagVersion":"wcag21a", |
| 126 | + "accessibility.bestPractice":true, |
| 127 | + "accessibility.needsReview":true |
| 128 | + } |
| 129 | + } |
| 130 | +``` |
| 131 | + |
| 132 | +### Step 4: Add the following add-on Script |
| 133 | +In your `lambdatest-setup.js` file add these three lines after your page creation command as shown below: |
| 134 | + |
| 135 | +```javascript |
| 136 | +await ltPage.goto("chrome://extensions/?id=johgkfjmgfeapgnbkmfkfkaholjbcnah"); |
| 137 | +const secondToggleButton = ltPage.locator('#crToggle').nth(0); |
| 138 | +await secondToggleButton.click(); |
| 139 | +``` |
| 140 | + |
| 141 | +### Step 5: Execute and Monitor your Test |
| 142 | + |
| 143 | +Now execute your tests and visit the [Automation Dashboard](https://accounts.lambdatest.com/dashboard). Click on the Accessibility tab and check the report generated. |
| 144 | + |
| 145 | +```bash |
| 146 | +node test |
| 147 | +``` |
| 148 | + |
| 149 | +<img loading="lazy" src={require('../assets/images/accessibility-testing/playwright/playwright-accessibility.png').default} alt="automation-dashboard" className="doc_img"/> |
0 commit comments