赛普拉斯 12864_如何使用赛普拉斯自动化辅助功能测试

赛普拉斯 12864

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

在上一篇文章中，我介绍了如何在赛普拉斯中添加屏幕截图测试，以确保组件不会随时间变化。

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

现在，我将分享如何与赛普拉斯自动执行辅助功能测试。

我们为什么要关心可访问性？ (Why should we care about accessibility?)

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

简短答案：因为这是正确的做法。

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

长答案：可访问的网络可以帮助残疾人改善生活。

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.

有多种类型的残疾，包括听觉，认知，神经，身体，语言和视觉。我们作为产品创造者，工程师和设计师的目标是创造包括所有人的体验。

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

同样重要的是要提的是网页易读也有利于非残疾人。

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.

例如，可访问的站点可以帮助因年龄增长或互联网连接速度缓慢或使用小屏幕设备的人而改变能力。

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.

残疾也可以是暂时的。例如，手臂骨折的人不能同时键入和使用鼠标。

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

如果您想对这个主题进行自我教育，我可以推荐W3C Web Accessibility Initiative(W3C WAI)和A11Y Project 。

辅助功能测试技术 (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.

有多种测试网站/应用程序是否可访问的方法。 W3C WAI 列出了140多种工具，可帮助您确定您的网站/应用是否符合辅助功能准则。

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.
真实的用户测试：像Fable这样的公司将您与残疾人联系起来，以便您的研究和用户测试可以帮助您实现合规性目标。
Browser extensions: axe is a recommended extension for Chrome, Firefox, and Edge that helps identify and resolve common accessibility issues.
浏览器扩展： ax是Chrome，Firefox和Edge的推荐扩展，可帮助识别和解决常见的辅助功能问题。

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

正如本文将显示的那样，ax的可访问性引擎是开源的，可以以不同的方式使用它。

开始之前 (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.

我创建了一个示例网站来模仿组件库。这是一个使用Tailwind CSS创建的非常简单的网站，并托管在Vercel中，它记录了2个组件： 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上查看源代码。该网站是静态的，并且位于public文件夹中。您可以通过运行npm run serve并在浏览器中查看http：// localhost：8000来在本地查看该网站。

添加柏树和柏树轴 (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.

首先克隆示例存储库。接下来，创建一个新分支，并安装cypress-axe ，该软件包负责将斧头引擎绑定到Cypress。

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

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

接下来，创建一个包含以下内容的cypress/support/index.js文件：

import 'cypress-axe'

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

此导入将注入我们测试所需的所有功能。

创建可访问性测试 (Creating the accessibility test)

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

是时候创建可访问性测试了。这是计划：

Cypress will visit each page (badge and button) of the project.
赛普拉斯将访问该项目的每个页面(徽章和按钮)。
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).
赛普拉斯将测试页面中的每个示例。徽章页面有2个示例(默认和药丸)，而按钮页面有3个示例(默认，药丸和轮廓)。

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>元素内。添加该类的唯一目的是确定需要测试的内容。

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

第一步是创建赛普拉斯配置文件( 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是在本地运行的网站。正如我前面提到的， npm run serve将服务内容public文件夹。第二个选项， video禁用赛普拉斯的视频记录，该记录将不会在项目中使用。

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

是时候创建测试了。在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数组创建动态测试。该测试将对照WCAG 2.0 A级规则检查每个.cypress-wrapper元素。

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

下表显示了不同的标准/目的：

Tag Name	Accessibility 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

标签名	无障碍标准/目的
`wcag2a`	WCAG 2.0 A级
`wcag2aa`	WCAG 2.0 AA级
`wcag21a`	WCAG 2.1 A级
`wcag21aa`	WCAG 2.1 AA级
`best-practice`	通用无障碍最佳做法
`wcag***`	WCAG成功标准，例如wcag111映射到SC 1.1.1
`ACT`	W3C批准的可访问性一致性测试规则
`section508`	旧版508条规定
`section508..`	旧版508节的要求

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

您可以在axe-core docs中找到有关它的更多信息。

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

最后，让我们在package.json命令内部创建以触发测试：

{"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.

从这里开始，有2个选项：使用npm run cypress run在无头模式下运行Cypress或在npm run cypress open使用Cypress Test Runner。

无头选项 (Headless option)

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

使用npm run test run ，输出应该类似于下一个图像：

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

由于组件没有可访问性问题，因此测试将通过。

测试运行器选项 (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将被打开，您可以逐步进行测试。

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.

我们的第一个里程碑已经完成。让我们将该分支合并到master。如果您想查看到目前为止已完成的工作，请进入我的请求请求。

现实生活中的测试 (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.

想象一下，我们正在更新网站，并且想要标识具有ID的按钮。 id属性在文档中必须是唯一的，因为我们不能有2个元素具有相同的元素。但是我们忘记了这一点，并且3个按钮具有相同的ID。

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

赛普拉斯将失败，并且输出将类似于以下内容：

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

通过显示已发现问题的表格，让我们改善测试的输出。首先，让我们创建一个新分支：

git checkout -b improve-cypress-tests

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

接下来，使用以下内容创建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:

这将通过赛普拉斯的task插件事件在Node中执行代码。接下来，让我们回到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数组包含有关失败元素的所有信息。您可以调整此代码以在测试输出中包括例如元素源代码。

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

最后，让我们在测试中调用该函数。将checkA11y函数修改为：

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:

再次运行测试时，您将获得一个包含斧头报告的问题的表：

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

如有任何疑问，请检查Github中的Pull请求。

下一步 (Next steps)

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

从这里开始，您可以继续努力，使产品更易于使用。作为下一步，我建议：

Adding these tests in your CI solution - I wrote about integrating Cypress inside Semaphore
在您的CI解决方案中添加这些测试-我写过有关将Cypress集成到Semaphore中的信息
Finding the best way to customize the output of tests to improve troubleshooting issues
寻找自定义测试输出以改善故障排除问题的最佳方法
Learning more about how axe works.
了解有关斧头工作原理的更多信息。

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.

我希望您了解到可访问性测试并不困难，并且不需要太多的开始。由斧头驱动的自动化绝对可以帮助我们为所有人创造更好的用户体验。

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

有什么问题吗注释？这篇文章也在我的博客中。如果您喜欢此内容，请在Twitter和GitHub上关注我。