賽普拉斯 12864

In my previous post, I covered how to add screenshot testing in Cypress to ensure components don't unintentionally change over time.

在上一篇文章中 ，我介紹了如何在賽普拉斯中添加屏幕截圖測(cè)試，以確保組件不會(huì)隨時(shí)間變化。

Now, I will share how to automate accessibility tests with Cypress.

現(xiàn)在，我將分享如何與賽普拉斯自動(dòng)執(zhí)行輔助功能測(cè)試。

我們?yōu)槭裁匆P(guān)心可訪問(wèn)性？ (Why should we care about accessibility?)

Short answer: because it is the right thing to do.

簡(jiǎn)短答案：因?yàn)檫@是正確的做法。

Long answer: an accessible web can help people with disabilities improve their lives.

長(zhǎng)答案：可訪問(wèn)的網(wǎng)絡(luò)可以幫助殘疾人改善生活。

There are different kinds of disabilities, including auditory, cognitive, neurological, physical, speech and visual. And our goal as product creators, engineers, and designers is to create experiences that include all people.

有多種類型的殘疾，包括聽(tīng)覺(jué)，認(rèn)知，神經(jīng)，身體，語(yǔ)言和視覺(jué)。 我們作為產(chǎn)品創(chuàng)造者，工程師和設(shè)計(jì)師的目標(biāo)是創(chuàng)造包括所有人的體驗(yàn)。

It is also important to mention that web accessibility also benefits people without disabilities.

同樣重要的是要提的是網(wǎng)頁(yè)易讀也有利于非殘疾人。

For example, accessible sites help people with changing abilities due to ageing or people with slow Internet connections or those using devices with small screens.

例如，可訪問(wèn)的站點(diǎn)可以幫助因年齡增長(zhǎng)或互聯(lián)網(wǎng)連接速度緩慢或使用小屏幕設(shè)備的人而改變能力。

And a disability can also be temporary. For example, someone with a broken arm can't type and use a mouse at the same time.

殘疾也可以是暫時(shí)的。 例如，手臂骨折的人不能同時(shí)鍵入和使用鼠標(biāo)。

If you want to educate yourself about the topic, I can recommend the W3C Web Accessibility Initiative (W3C WAI) and The A11Y Project.

如果您想對(duì)這個(gè)主題進(jìn)行自我教育，我可以推薦W3C Web Accessibility Initiative(W3C WAI)和A11Y Project 。

輔助功能測(cè)試技術(shù) (Accessibility testing techniques)

There are different ways to test if your website/app is accessible. The W3C WAI has a list of 140+ tools to help you determine if your website/app meets accessibility guidelines.

有多種測(cè)試網(wǎng)站/應(yīng)用程序是否可訪問(wèn)的方法。 W3C WAI 列出了140多種工具 ，可幫助您確定您的網(wǎng)站/應(yīng)用是否符合輔助功能準(zhǔn)則。

You can also add in your strategy:

您還可以添加策略：

• Real user testing: companies like Fable connect you and people with disabilities so that your research and user testing can help you meet your compliance goals.

  真實(shí)的用戶測(cè)試：像Fable這樣的公司將您與殘疾人聯(lián)系起來(lái)，以便您的研究和用戶測(cè)試可以幫助您實(shí)現(xiàn)合規(guī)性目標(biāo)。

• Browser extensions: axe is a recommended extension for Chrome, Firefox, and Edge that helps identify and resolve common accessibility issues.

  瀏覽器擴(kuò)展： ax是Chrome，Firefox和Edge的推薦擴(kuò)展，可幫助識(shí)別和解決常見(jiàn)的輔助功能問(wèn)題。

The accessibility engine of axe is open-source and it can be used in different ways, as this post will show.

正如本文將顯示的那樣，ax的可訪問(wèn)性引擎是開(kāi)源的 ，可以以不同的方式使用它。

開(kāi)始之前 (Before we start)

I created a sample website to mimic a Component Library. It is a very simple website created with Tailwind CSS and hosted in Vercel and it documents 2 components: badge and button.

我創(chuàng)建了一個(gè)示例網(wǎng)站來(lái)模仿組件庫(kù)。 這是一個(gè)使用Tailwind CSS創(chuàng)建的非常簡(jiǎn)單的網(wǎng)站，并托管在Vercel中，它記錄了2個(gè)組件： badge和button 。

You can check out the source code on GitHub. The website is static and it is inside the public folder. You can see the website locally by running npm run serve and checking in the browser http://localhost:8000.

您可以在GitHub上查看源代碼 。 該網(wǎng)站是靜態(tài)的，并且位于public文件夾中。 您可以通過(guò)運(yùn)行npm run serve并在瀏覽器中查看http：// localhost：8000來(lái)在本地查看該網(wǎng)站。

添加柏樹(shù)和柏樹(shù)軸 (Adding Cypress and cypress-axe)

Start by cloning the example repository. Next, create a new branch and install cypress-axe, the package responsible for tying the axe engine to Cypress.

首先克隆示例存儲(chǔ)庫(kù) 。 接下來(lái)，創(chuàng)建一個(gè)新分支，并安裝cypress-axe ，該軟件包負(fù)責(zé)將斧頭引擎綁定到Cypress。

git checkout -b add-cypress npm install -D cypress cypress-axe

Next, create a cypress/support/index.js file containing:

接下來(lái)，創(chuàng)建一個(gè)包含以下內(nèi)容的cypress/support/index.js文件：

import 'cypress-axe'

This import will inject all the functions we need for our tests.

此導(dǎo)入將注入我們測(cè)試所需的所有功能。

創(chuàng)建可訪問(wèn)性測(cè)試 (Creating the accessibility test)

Time to create the accessibility test. Here is the plan:

是時(shí)候創(chuàng)建可訪問(wèn)性測(cè)試了。 這是計(jì)劃：

Cypress will visit each page (badge and button) of the project.

賽普拉斯將訪問(wèn)該項(xiàng)目的每個(gè)頁(yè)面(徽章和按鈕)。

Cypress will test each example in the page. The Badge page has 2 examples (Default and Pill), while the Button page has 3 examples (Default, Pill and Outline).

賽普拉斯將測(cè)試頁(yè)面中的每個(gè)示例。 徽章頁(yè)面有2個(gè)示例(默認(rèn)和藥丸)，而按鈕頁(yè)面有3個(gè)示例(默認(rèn)，藥丸和輪廓)。

All these examples are inside an <div> element with a cypress-wrapper. This class was added with the only intention to identify what needs to be tested.

所有這些示例都在帶有cypress-wrapper的<div>元素內(nèi)。 添加該類的唯一目的是確定需要測(cè)試的內(nèi)容。

The first step is creating the Cypress configuration file (cypress.json):

第一步是創(chuàng)建賽普拉斯配置文件( cypress.json )：

{"baseUrl": "http://localhost:8000/","video": false }

The baseUrl is the website running locally. As I mentioned before, npm run serve will serve the content of the public folder. The second option, video disables Cypress video recording, which won't be used in the project.

baseUrl是在本地運(yùn)行的網(wǎng)站。 正如我前面提到的， npm run serve將服務(wù)內(nèi)容public文件夾。 第二個(gè)選項(xiàng)， video禁用賽普拉斯的視頻記錄，該記錄將不會(huì)在項(xiàng)目中使用。

Time to create the test. In cypress/integration/accessibility.spec.js, add:

是時(shí)候創(chuàng)建測(cè)試了。 在cypress/integration/accessibility.spec.js ，添加：

const routes = ['badge.html', 'button.html'];describe('Component accessibility test', () => {routes.forEach((route) => {const componentName = route.replace('.html', '');const testName = `${componentName} has no detectable accessibility violations on load`;it(testName, () => {cy.visit(route);cy.injectAxe();cy.get('.cypress-wrapper').each((element, index) => {cy.checkA11y('.cypress-wrapper',{runOnly: {type: 'tag',values: ['wcag2a'],},});});});}); });

In the code above, I am creating dynamic tests based in the routes array. The test will check each .cypress-wrapper element against WCAG 2.0 Level A rules.

在上面的代碼中，我正在基于routes數(shù)組創(chuàng)建動(dòng)態(tài)測(cè)試。 該測(cè)試將對(duì)照WCAG 2.0 A級(jí)規(guī)則檢查每個(gè).cypress-wrapper元素。

There are different standards / purposes, as the table below shows:

下表顯示了不同的標(biāo)準(zhǔn)/目的：

Tag NameAccessibility Standard / Purpose

wcag2a	WCAG 2.0 Level A
wcag2aa	WCAG 2.0 Level AA
wcag21a	WCAG 2.1 Level A
wcag21aa	WCAG 2.1 Level AA
best-practice	Common accessibility best practices
wcag***	WCAG success criterion e.g. wcag111 maps to SC 1.1.1
ACT	W3C approved Accessibility Conformance Testing rules
section508	Old Section 508 rules
section508.*.*	Requirement in old Section 508

標(biāo)簽名 無(wú)障礙標(biāo)準(zhǔn)/目的

wcag2a	WCAG 2.0 A級(jí)
wcag2aa	WCAG 2.0 AA級(jí)
wcag21a	WCAG 2.1 A級(jí)
wcag21aa	WCAG 2.1 AA級(jí)
best-practice	通用無(wú)障礙最佳做法
wcag***	WCAG成功標(biāo)準(zhǔn)，例如wcag111映射到SC 1.1.1
ACT	W3C批準(zhǔn)的可訪問(wèn)性一致性測(cè)試規(guī)則
section508	舊版508條規(guī)定
section508.*.*	舊版508節(jié)的要求

You can find more information about it in the axe-core docs.

您可以在axe-core docs中找到有關(guān)它的更多信息。

Last, let's create inside the package.json command to trigger the tests:

最后，讓我們?cè)趐ackage.json命令內(nèi)部創(chuàng)建以觸發(fā)測(cè)試：

{"test": "cypress" }

From here, there are 2 options: run Cypress in headless mode with npm run cypress run or use the Cypress Test Runner with npm run cypress open.

從這里開(kāi)始，有2個(gè)選項(xiàng)：使用npm run cypress run在無(wú)頭模式下運(yùn)行Cypress或在npm run cypress open使用Cypress Test Runner。

無(wú)頭選項(xiàng) (Headless option)

Using npm run test run, the output should be similar to the next image:

使用npm run test run ，輸出應(yīng)該類似于下一個(gè)圖像：

The tests will pass since the components have no accessibility issues.

由于組件沒(méi)有可訪問(wèn)性問(wèn)題，因此測(cè)試將通過(guò)。

測(cè)試運(yùn)行器選項(xiàng) (Test Runner option)

Using npm run test open, Cypress Test Runner will be opened and you can follow step by step the tests.

使用npm run test open ，賽普拉斯Test Runner將被打開(kāi)，您可以逐步進(jìn)行測(cè)試。

Our first milestone is done. Let's merge this branch to master. If you want to see the work done so far, jump in my Pull Request.

我們的第一個(gè)里程碑已經(jīng)完成。 讓我們將該分支合并到master。 如果您想查看到目前為止已完成的工作，請(qǐng)進(jìn)入我的請(qǐng)求請(qǐng)求 。

現(xiàn)實(shí)生活中的測(cè)試 (Testing in real life)

Imagine we are updating the website and we want to identify the buttons with ids. The id property must be unique in the document, as we can't have 2 elements with the same one. But we forgot about that and 3 buttons have the same id.

想象一下，我們正在更新網(wǎng)站，并且想要標(biāo)識(shí)具有ID的按鈕。 id屬性在文檔中必須是唯一的，因?yàn)槲覀儾荒苡?個(gè)元素具有相同的元素。 但是我們忘記了這一點(diǎn)，并且3個(gè)按鈕具有相同的ID。

Cypress will fail and the output will look something like this:

賽普拉斯將失敗，并且輸出將類似于以下內(nèi)容：

Let's improve the output of our tests by showing a table of found issues. First, let's create a new branch:

通過(guò)顯示已發(fā)現(xiàn)問(wèn)題的表格，讓我們改善測(cè)試的輸出。 首先，讓我們創(chuàng)建一個(gè)新分支：

git checkout -b improve-cypress-tests

Next, create the cypress/plugins/index.js file with the following content:

接下來(lái)，使用以下內(nèi)容創(chuàng)建cypress/plugins/index.js文件：

module.exports = (on, config) => {on('task', {log(message) {console.log(message)return null},table(message) {console.table(message)return null}}) }

This will execute code in Node via the task plugin event of Cypress. Next, let's go back to the accessibility.spec.js file and add the following function in the top of the file:

這將通過(guò)賽普拉斯的task插件事件在Node中執(zhí)行代碼。 接下來(lái)，讓我們回到accessibility.spec.js文件，并在文件頂部添加以下功能：

const terminalLog = (violations) => {cy.task('log',`${violations.length} accessibility violation${violations.length === 1 ? '' : 's'} ${violations.length === 1 ? 'was' : 'were'} detected`)// pluck specific keys to keep the table readableconst violationData = violations.map(({ id, impact, description, nodes }) => ({id,impact,description,nodes: nodes.length}))cy.task('table', violationData) }

The violations array contains all information about the failing elements. You can tweak this code to include, for instance, the element source code in the test output.

violations數(shù)組包含有關(guān)失敗元素的所有信息。 您可以調(diào)整此代碼以在測(cè)試輸出中包括例如元素源代碼。

Last, let's call the function inside the tests. Modify the checkA11y function to:

最后，讓我們?cè)跍y(cè)試中調(diào)用該函數(shù)。 將checkA11y函數(shù)修改為：

cy.checkA11y('.cypress-wrapper',{runOnly: {type: 'tag',values: ['wcag2a'],},},terminalLog, );

When you run the test again, you'll get a table containing the issues reported by axe:

再次運(yùn)行測(cè)試時(shí)，您將獲得一個(gè)包含斧頭報(bào)告的問(wèn)題的表：

If you have any questions, please check the Pull request in Github.

如有任何疑問(wèn)，請(qǐng)檢查Github中的Pull請(qǐng)求 。

下一步 (Next steps)

From here, you can continue your journey toward making products more accessible. As some next steps, I would recommend:

從這里開(kāi)始，您可以繼續(xù)努力，使產(chǎn)品更易于使用。 作為下一步，我建議：

• Adding these tests in your CI solution - I wrote about integrating Cypress inside Semaphore

  在您的CI解決方案中添加這些測(cè)試-我寫(xiě)過(guò)有關(guān)將Cypress集成到Semaphore中的信息

• Finding the best way to customize the output of tests to improve troubleshooting issues
  尋找自定義測(cè)試輸出以改善故障排除問(wèn)題的最佳方法
• Learning more about how axe works.
  了解有關(guān)斧頭工作原理的更多信息。

I hope that you have learned that accessibility testing is not difficult and it doesn't require much to start. Automation powered by axe can definitely help us to create better user experiences for all people.

我希望您了解到可訪問(wèn)性測(cè)試并不困難，并且不需要太多的開(kāi)始。 由斧頭驅(qū)動(dòng)的自動(dòng)化絕對(duì)可以幫助我們?yōu)樗腥藙?chuàng)造更好的用戶體驗(yàn)。

--

-

Questions? Comments? This post is also in my blog. If you like this content, follow me on Twitter and GitHub.

有什么問(wèn)題嗎 注釋？ 這篇文章也在我的博客中 。 如果您喜歡此內(nèi)容，請(qǐng)?jiān)赥witter和GitHub上關(guān)注我。

翻譯自: https://www.freecodecamp.org/news/automating-accessibility-tests-with-cypress/

賽普拉斯 12864

總結(jié)

以上是生活随笔為你收集整理的赛普拉斯 12864_如何使用赛普拉斯自动化辅助功能测试的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。