无障碍测试的重要性以及如何在云网格上进行Cypess无障碍测试

迪鲁宾
125 阅读9分钟

无障碍性是指设计产品、设备、服务、车辆或环境，使其对特殊能力者无障碍。这个概念的很大一部分是通过辅助技术（屏幕阅读器、键盘检测和其他辅助技术）使残疾人能够使用。

创造无障碍的东西意味着创造出所有人都能使用的东西（无论他们是否有残疾）。用户可以有效地、高效地、方便地使用一个应用程序来实现既定的目标，而不能与无障碍性混为一谈，无障碍性是指用户可以在特定的环境下使用一个应用程序。

法律上的争论可以作为关心无障碍性的主要原因。在许多国家，缺乏无障碍性已被视为对那些无法使用应用程序的人的歧视。因此，必须认真对待法律方面的问题，使应用程序对所有用户无障碍。这就是为什么无障碍性测试很重要。

测试人员可以利用无障碍测试工具来测试各种网站和网络应用。无障碍测试的自动化使测试人员能够节省时间和精力，并以高质量和信心来运送产品。在所有可用的自动化测试框架中，Cypress自动化框架通过提供一个包罗万象的测试平台（前端、后端、可及性、性能测试）来降低复杂性，而不是要求你为端到端测试选择和拼凑单个库。

在这个无障碍测试教程中，我们将学习无障碍测试的重要性以及如何在云网格上进行Cypess无障碍测试。

那么，让我们开始吧!

可访问性测试的重要性

一个应用程序的成功取决于每个人是否能通过他们所选择的技术实现他们的目标。

如果我们想被考虑进行无障碍测试，就必须根据一套准则来测试界面。WCAG没有涵盖的常见问题也可以被考虑。如果你有一个无障碍政策，根据其标准测试你的网站是很好的。WCAG 2.1标准中涵盖了很多广泛的使用案例。

无障碍性测试应该以应用程序的实际使用为重点。一个产品可能无法被访问的原因有很多。它可能是软件本身的问题，也可能是它的设计方式。无障碍性测试是关于用户和他们想做的事情。如果你创造了一个不能帮助用户完成任务的功能，你需要问自己："为什么不能？"。可及性测试是为了确保产品对每个人都有效。

有可能实现无障碍测试的自动化吗？

无障碍测试是质量保证的一个重要部分，有许多不同的方法来进行测试。不幸的是，对有缺陷的人进行探索性测试只是众多选择之一，有时需要使用其他无障碍测试工具。

根据标准对网站进行测试；许多现代测试工具可以帮助像我们这样的公司。例如，你可以使用残障人士常用的键盘或屏幕阅读器。Axe或GoogleLighthouse是可以运行无障碍性检查的浏览器扩展。

Axe-Core是你软件开发过程中最常见的自动可及性测试工具。众多项目都建立在Axe-Core之上；如果你使用Selenium、WebdriverIO、Cypress或其他自动化测试框架，你可以在测试中实现Axe。

在这篇关于Cypress无障碍测试的文章中，我们想尝试新的东西，所以我想分享我的新发现，pa11y，一个强大的无障碍测试的工具。

帕利和Cypress可及性测试

首先，我们来谈谈Pally，这是一个命令行界面，可以加载网页并突出显示它所发现的任何可访问性问题。其次，Pa11y是一个自动可及性测试工具。它通过命令行在你的网页上运行可及性测试，这样你就可以将你的测试过程自动化（Pa11y是在Lesser General Public License（LGPL-3.0-only）下许可的。

现在，让我们专注于Cypress和Pally，并按照下面提到的步骤进行Cypress无障碍性测试。

使用下面的命令在我们的本地项目中安装该依赖项。

npm install --save-dev @cypress-audit/pa11y

下面的配置允许Lighthouse和Cypress在同一个浏览器内（由Cypress控制）进行验证，而不是创建一个新的浏览器。在cypress/plugins/index.js文件中，让我们添加以下内容。

文件名 -cypress/support/commands.js

const { pa11y, prepareAudit } = require("@cypress-audit/pa11y");

module.exports = (on, config) => {
  on("before:browser:launch", (browser = {}, launchOptions) => {
    prepareAudit(launchOptions)
  })

  on("task", {
    pa11y: pa11y(), // calling the function must be important
  })
}

一旦我们在cypress/support/commands.js文件中加入以下一行，你将能够在你的Cypress测试中使用cy.pa11y。

import "@cypress-audit/pa11y/commands"

现在，我们准备评估一些网页的可访问性；让我们使用下面的例子。

describe('Accessibility Testing Cypress', () => {
   before(function(){
       cy.visit(`${config.URL2}`)
   })
 
   it('verify full Home Page is displayed correctly', () =>{
   
       cy.pa11y()   
   })

然后，让我们用npx cypress open.运行它。

![run it using npx cypress open ](https://www.lambdatest.com/blog/wp-content/uploads/2022/06/run-it-using-npx-cypress-open-1-1-1-1-1-1-1-1-1.png)

正如我们从上面的图片中发现的，它显示了一些错误；更具体地说，发现了36个可访问性违规。

![it displays some errors ](https://www.lambdatest.com/blog/wp-content/uploads/2022/06/it-displays-some-errors-1.png)

正如我们从上面的图片中发现的，它显示了一些错误/违规；更具体地说，发现了33个无障碍性违规。我们可以[在这里](https://dequeuniversity.com/rules/axe/4.2/)看到与所有规则有关的更多细节。

唯一违反的是颜色对比；文本元素必须与背景有足够的颜色对比；我们可以看到，有33个元素没有遵循这一规则。

代码演练

Test-accessibility-cypress.cy.js

import config from './config.json'
import MainPage from '../../page-objects/components/MainPage'

describe('Accessibility Testing Cypress', () => {
   before(function(){
       cy.visit(`${config.URL2}`)
   })
 
   it('verify full Home Page is displayed correctly', () =>{
       
       //Using Pally as our tool for Accessibility Testing
       cy.pa11y()
   })


   it('Verify a search in Google', () => {

       cy.origin(`${config.URL3}`, () => {
           cy.visit('/')
       })   
       MainPage.searchGoogle('Accessibility Testing')
       cy.pa11y()

   })

})

让我们开始定义我们的config.json文件；在这里，我们可以包括一些数据和URLs。

config.json

{
   "URL1": "https://www.lambdatest.com/blog/",
   "URL2": "https://www.scope.org.uk",
   "URL3": "http://www.google.com"
}

之后，我们需要定义我们的结构；正如我们在下面这行代码中看到的-> *从'.../.../page-objects/components/MainPage'导入 MainPage，*我们想把我们的Cypress定位器与我们的测试分开，说这是页面对象模型结构。我们可以在 "page-objects "文件夹下找到它。

page-objects folder

MainPage.js

export default class MainPage {

   static searchGoogle(text){
       cy.get(`input[role='combobox']`).type(`${text} {enter}`)
   }
}

正如我们上面提到的，我们的方法和定位器可以在这里找到；在我们的例子中，我们试图在谷歌上做一个简单的搜索。

describe('Accessibility Testing Cypress', () => {
   before(function(){
       cy.visit(`${config.URL2}`)
   })

在这种情况下，我们使用一个before()钩子，它将在我们所有的测试之前打开我们的页面，之后，我们可以注意到两个测试，一个与全页面首页验证有关，另一个是谷歌搜索验证。

it('verify full Home Page is displayed correctly', () =>{
       
       //Using Pally as our tool for Accessibility Testing
       cy.pa11y()
   })


   it('Verify a search in Google', () => {

       cy.origin(`${config.URL3}`, () => {
           cy.visit('/')
       })   
       MainPage.searchGoogle('Accessibility Testing')
       cy.pa11y()

   })

你可以订阅该频道，获得围绕Cypress测试、自动化浏览器测试、CI/CD等方面的最新教程!

而这里是测试执行情况，表明我们的Cypress无障碍测试方法正在发挥作用。

Cypress accessibility testing approach is working

GitHub

在我们使用 "cy.origin "进行测试时，有一件事我忘了说，要使用这个实验性的命令，我们必须从我们的Cypress配置文件中启用它；我们的文件必须如下所示。

"e2e": {
    "experimentalSessionAndOrigin": true
  },

如果我们不启用它，Cypress将抛出一个错误。

Cypress will throw an error

我们必须升级到Cypress 9.6.0，然后我们可以通过将新的experimentalSessionAndOrigin 配置选项设置为 "true "来尝试新的功能。

在线执行和分析Cypress测试脚本。现在就试试LambdaTest吧!

在本教程关于Cypress无障碍测试的下一节，我们将学习如何在Cypress云网格上执行无障碍测试。

如何在云网格上进行Cypress可及性测试？

我们可以使用像LambdaTest这样的Cypress云网格，它在40多种浏览器和操作系统上提供自动化的跨浏览器测试，以及Cypress并行测试，以加快测试的执行，帮助大规模地执行Cypress测试。此外，这将有助于提高我们的整体测试覆盖率，因为我们可以使用相同的测试脚本覆盖不同的组合，从而获得更好的产品质量。

要开始使用Cypress e2e测试，请遵循以下步骤。

在你的机器上安装LambdaTest Cypress CLI。触发以下命令进行安装。

npm install -g lambdatest-cypress-cli

安装完成后，使用下面的命令设置配置。

lambdatest-cypress init

一旦命令完成，在项目文件夹中就会创建lambdatest-config.json。接下来，从LambdaTest配置文件部分输入LambdaTest凭证。

"lambdatest_auth": {
      "username": "<Your LambdaTest username>",
      "access_key": "<Your LambdaTest access key>"

下面是你如何在lambdatest-config.json中配置所需的浏览器和操作系统组合的方法。

{
  "lambdatest_auth": {
     "username": "",
     "access_key": ""
  },
  "browsers": [
     {
        "browser": "MicrosoftEdge",
        "platform": "Windows 10",
        "versions": [
           "latest"
        ]
     },
     {
        "browser": "Chrome",
        "platform": "Windows 10",
        "versions": [
           "latest"
        ]
     },
     {
        "browser": "Firefox",
        "platform": "Windows 10",
        "versions": [
           "latest"
        ]
     }
  ],

JSON文件中的run_settings部分包含所需的Cypress测试套件能力，包括Cypress_version、build_name、并行会话的数量等。

"run_settings": {
     "cypress_config_file": "cypress.json",
     "build_name": "build-Cypress-test",
     "parallels": 5,
     "specs": "./cypress/integration/e2e_tests/*.spec.js",
     "pluginsFile": true,
     "ignore_files": "",
     "npm_dependencies": {
        "cypress": "9.0.0",
        "@cypress-audit/pa11y": "^1.3.0",
        "cypress-plugin-snapshots": "^1.4.4",
        "cypress-visual-regression": "^1.6.2"
     },
     "feature_file_suppport": true
  },

JSON文件中的Tunnel_settings可以让你通过一个基于SSH的集成隧道将你的本地系统与LambdaTest服务器相连。一旦这个隧道建立起来，你就可以在LambdaTest上测试Cypress目前支持的所有浏览器上的本地托管页面。

"tunnel_settings": {
    "tunnel": false,
    "tunnelName": null
}

现在，设置已经准备就绪，是时候运行测试了；请记住，一旦我们在没有任何额外参数的情况下触发我们的并行执行，我们的run_settings文件显示parallels字段为5。我们必须考虑到，当我们使用云网格时，先前测试中使用的代码保持不变。

lambdatest-cypress run

下面显示的是LambdaTest自动化仪表板上的测试执行状态。

LambdaTest Automation Dashboard

要查看测试性能指标，请导航到LambdaTest分析仪表板。测试概览将提供一个与稳定行为一致的测试快照。同时，"测试摘要 "将显示通过或失败的测试总数以及任何已完成和待完成的测试。

Test Summary

如果你是一名开发人员或测试人员，对Cypress有基本的了解，并希望将你的知识提高到一个新的水平，那么这个Cypress 101认证课程就是为你准备的。

下面是LambdaTest公司对Cypress 101认证的简短介绍。

最后的想法

确保你的网站对所有访问者都是无障碍的，包括那些有残疾的人，这一点很重要。在这个Cypress测试教程中，我们了解了无障碍测试的重要性，以及如何在云网格上进行Cypress无障碍测试。

让我们把无障碍测试纳入我们的项目中；一旦你开始关心它，无障碍性就很容易考虑。这里的重要性是将无障碍性作为我们自动化测试的一部分。让我们保持应用程序对尽可能多的人无障碍。

"我们必须保证我们提供的东西对每个人都有用。" - Enrique A Decoss

我对所有测试人员的建议是，在你的自动化测试项目中考虑无障碍性；我们应该一起努力，让所有人都能使用应用程序。可访问性可以帮助我们产生真正的影响。

猎虫快乐!

常见问题(FAQ)

Cypress是端到端测试吗？

Cypress是一个很好的e2e测试工具，特别是对于那些想用很少的努力来创建有用的测试的人来说。实时预览使你很容易看到你在屏幕截图和快照中的改变。这使你能够轻松地调试问题，所以你可以比以前更快地修复错误。

什么是无障碍测试？

无障碍测试是一种使网站和移动应用程序对尽可能多的人可用的做法，包括那些有视力或听力障碍的人。它对你的受众中任何有身体或认知状况的人特别有用，否则他们将无法使用典型的界面。

我们可以自动进行无障碍性测试吗？

自动可及性测试工具可以识别常见的可及性错误供你纠正，但它并不保证你的网站是可及的。始终将自动化测试与正在进行的人工测试相结合。

avatar
文章
阅读
粉丝