前言
在当今互联网技术发展迅速的时代，用户对于网站和应用的易用性和访问性要求越来越高。而如何保障网站和应用的访问性，成为前端开发人员急需解决的问题。
本文将介绍如何使用 npm 包 nightwatch-accessibility 对网站和应用进行访问性测试。
什么是 nightwatch-accessibility
nightwatch-accessibility 是一个基于 Node.js 和 Webdriver 端到端测试框架 Nightwatch.js 的插件，用于进行访问性测试。该插件结合了 Google 的无障碍测试工具（aXe）和 Nightwatch.js，能够快速捕获网页中出现的无障碍问题，并生成详细的报告。
安装和配置
安装
在使用 nightwatch-accessibility 之前，需要先安装 Nightwatch.js。
使用如下命令安装 npm 包：
npm install nightwatch-accessibility --save-dev
配置
- 在 Nightwatch.js 的配置文件中引入 nightwatch-accessibility 插件：
... "custom_commands_path": ["./node_modules/nightwatch-accessibility/commands"], "custom_assertions_path": ["./node_modules/nightwatch-accessibility/assertions"], "globals_path": "./globals.js", ...
- 在 globals.js 文件中添加全局配置，包括访问性测试报告的输出路径和插件的配置项：
-- -------------------- ---- -------
----- - ---------- - - ---------------------------
-------------- - -
----------- ------- -- -
-------------------------------------
------------------ -- ----------- -- -----------------------
------------------ -- ------------------------ - ----
------------------ -- ------------------------ - ----
--
---------- ------- -- -
----- ---------- - -----------
----- -------- - ----------------------------------------------------------------------------------------------------------------------
----- -------- - ---------------------------
------------------------------------------- -- -
------------------------------------------------------
-------------------------------------------------------
-- ------------------- -
----- --------- - -
---- ------------------ - ------------------------------------------------------------------------------------------
---------- -----------
------- ---
----------- --
-
---------------------------- -- -
------------------------------------------------
--
-----------------------------------------
------------------------ -- -
---------------------- ------------------------- ----- --- --- -- -
-- ----- -
----------------
-
--
--
----------------------- ------------------ --------- -- ------------- ---------- --- - - ------------------------------------------------------------------------------------------ - -- --- --- - - ----------------- - - --------------
-
--
--
---------- -
----- ------- - -
--------- -
------------ --- ------------
-
-
------------------ - --- --------------------------------------------------------
-------------------------------- - --
------------------- --- -- -
-- ---- -- -------- --- --------- -
------------------
---------------
-
----
--
--
------- -
---------------------------------------- ------------------------------------------------ ----- --- --- -- -
-- ----- -
----------------
-
--
-
-使用
运行 nightwatch
执行如下命令，启动 Nightwatch.js 测试：
nightwatch --config conf.js
编写测试
在测试文件中，可以使用以下语法进行访问性测试：
this.accessibilityTest({
xpath: '//h1',
verbose: true,
runOnly: {
type: 'tag',
values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'],
},
});- xpath：需要进行访问性测试的元素的 XPath 路径。
- verbose：是否输出详细信息。
- runOnly：需要执行的测试规则。
更多的测试语法请参考 nightwatch-accessibility 插件的官方文档。
结语
通过使用 npm 包 nightwatch-accessibility，可以快速捕获网页中出现的无障碍问题，并生成详细的报告，为网站和应用的访问性测试提供了一种简单而有效的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d09270238225e1