Skip to content

Files

Latest commit

 

History

History
171 lines (127 loc) · 5.87 KB

cypress-v10-accessibility-test.md

File metadata and controls

171 lines (127 loc) · 5.87 KB
id title hide_title sidebar_label description keywords url site_name slug
cypress-v10-accessibility-test
Automation Tests with Accessibility Tool using Cypress v10
false
Cypress v10
Use LambdaTest Accessibility DevTools to detect and report accessibility issues with automation, following WCAG guidelines, in your cypress tests for version 10 and above
LambdaTest
Accessibility
Testing
Cypress
Cypress version 10
Automation
Accessibility Testing Settings
LambdaTest
cypress-v10-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": "Cypress Accessibility Testing", "item": "https://www.lambdatest.com/support/docs/cypress-v10-accessibility-test/" }] }) }} ></script>

This guide takes you step-by-step through the process of using LambdaTest's Accessibility Tool with Cypress v10 and above to run automated tests for your website.

NOTE: This documentation is applicable for Cypress v10 and later versions.

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 :::

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

https://github.com/LambdaTest/lambdatest-accessibility-cypress-v10/blob/main/lambdatest-config.json

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: Update the Necessary Capabilities and Configurations in your project

1. Install the Cypress CLI

  • If you are passing npm dependencies through package.json, then add the below mentioned line there:
https://github.com/LambdaTest/lambdatest-accessibility-cypress-v10/blob/main/package.json
  • If you are using lambdatest-config.json to pass the dependency, then pass the given line there:
"run_settings": {
  //...
  "npm_dependencies": {
     "cypress": "10.0.0",
     "lambdatest-cypress-cli": "^3.0.30"
  },
  //...
}
  • if you are not passing npm dependency in lambdatest-config.json you can run
npm i lambdatest-cypress-cli

2. In the e2e.js file

Add this import statement in your e2e.js file to import the acceessibility scanner dependency

import 'lambdatest-cypress-cli/accessibility/scanner'

3. In the cypress.config.js file

Add this template in your config file.

https://github.com/LambdaTest/lambdatest-accessibility-cypress-v10/blob/main/cypress.config.js

4. Add the capabilities in the lambdatest-config.json file

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.

"accessibility" : true,                 // Enable accessibility testing
"accessibility.wcagVersion": "wcag21a", // Specify WCAG version (e.g., WCAG 2.1 Level A)
"accessibility.bestPractice": false,    // Exclude best practice issues from results
"accessibility.needsReview": true       // Include issues that need review

Step 4: Execute and Monitor your Test

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

lambdatest-cypress-cli run

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