diff --git a/assets/images/accessibility-testing/playwright-accessibility.png b/assets/images/accessibility-testing/playwright-accessibility.png new file mode 100644 index 000000000..81a29960b Binary files /dev/null and b/assets/images/accessibility-testing/playwright-accessibility.png differ diff --git a/docs/playwright-accessibility-test.md b/docs/playwright-accessibility-test.md new file mode 100644 index 000000000..cc850be72 --- /dev/null +++ b/docs/playwright-accessibility-test.md @@ -0,0 +1,143 @@ +--- +id: playwright-accessibility-test +title: Automation Tests with Accessibility Tool using Playwright +sidebar_label: Playwright +description: Use LambdaTest Accessibility DevTools with Playwright to detect and report accessibility issues with automation, following WCAG guidelines. +keywords: + - LambdaTest + - Accessibility + - Testing + - Automation + - Accessibility Testing Settings +url: https://www.lambdatest.com/support/docs/playwright-accessibility-test/ +site_name: LambdaTest +slug: 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'; + + + +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 + +- Your [LambdaTest Username and Access key](/support/docs/using-environment-variables-for-authentication-credentials/) +- Setup your local machine as per your testing framework. + +## 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. + +Image 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: + +```javascript + 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](https://www.lambdatest.com/capabilities-generator/). + +### 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](https://accounts.lambdatest.com/detail/profile). + +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. + +```javascript + const capabilities = { + 'LT:Options': { + ..// + "accessibility":true, + "accessibility.wcagVersion":"wcag21a", + "accessibility.bestPractice":true, + "accessibility.needsReview":true + } + } +``` + +### Step 4: Execute and Monitor your Test + +Now execute your tests and visit the [Automation Dashboard](https://accounts.lambdatest.com/dashboard). Click on the Accessibility tab and check the report generated. + +```bash +node test +``` + +automation-dashboard \ No newline at end of file diff --git a/sidebars.js b/sidebars.js index 7210d3e10..05c1296f9 100644 --- a/sidebars.js +++ b/sidebars.js @@ -1569,6 +1569,11 @@ module.exports = { "cypress-v9-accessibility-test", ], }, + { + type: "doc", + label: 'Playwright', + id: "playwright-accessibility-test", + }, ] }, {