前言
在前端开发中，无法避开的一个问题就是网站的无障碍性（a11y），其中包括网站的可访问性。为了进一步提高我们的开发技术，并方便测试人员及时发现问题，我们可以使用一个非常有用的工具Axe-core进行辅助操作。本文将介绍 npm 包 @wordpress/jest-puppeteer-axe 如何使用来对网页进行自动化测试。
前置条件
在使用@wordpress/jest-puppeteer-axe 之前，我们需要确保以下环境和工具已经安装：
- Node.js：需要node 6.4.0以上版本，建议使用LTS版本。
- Yarn 或 NPM：建议使用 yarn。
- Jest：我们需要先安装jest，并且该包需要用到 jest
- Puppeteer：我们需要先安装 Puppeteer，也就是通过 Chrome（或 Chromium）的无头浏览器来驱动页面进行测试。
- Axe-core： 前面提到过，我们需要安装 axe-core， 也就是轻松获取网页的可访问性问题反馈。
npm install --save-dev @wordpress/jest-puppeteer-axe yarn add --dev @wordpress/jest-puppeteer-axe
如何使用@wordpress/jest-puppeteer-axe
获取网页可访问性问题
使用@wordpress/jest-puppeteer-axe获取可访问性问题的步骤如下：
- 首先，我们需要在测试用例中引用
@wordpress/jest-puppeteer-axe包，并且实例化一个jestPuppeteer.setupPuppeteerWithAxe对象。
-- -------------------- ---- -------
----- ------------- - --------------------------
----- - --------------------- - - -----------------------------------------
-------------- ------ -- -- -
-- ---
-----------------------
--- --------
--- -----
--------------- -- -- -
------- - ----- -------------------------
---- - ----- ------------------
----- ----------------------------
---
---------- ---- -- ---- ------------ ----- -- -- -
----- -----------------------------------
----- ------------------------------
---
-- ---
-------------- -- -- -
----- -------------
----- ----------------
---
---注释：
beforeAll中通过调用setupPuppeteerWithAxe方法进行axe-core的配置，避免重复调用。- 使用
expect(page).toPassAxeTests()预期测试结果中搜不出任何可访问性问题。
示例代码
-- -------------------- ---- -------
----- ------------- - --------------------------
----- - ------------ - - -------------------------------
----- - --------------------- - - -----------------------------------------
-------------- ------ -- -- -
-----------------------
--- --------
--- -----
--------------- -- -- -
------- - ----- -------------------------
---- - ----- ------------------
----- ----------------------------
---
-------- ---- ------ ---- -- ---- ------------ ----- -- -- -
----- -----------------------------------
----- --- - --- -------------------
----- ------- - ----- --------------
------------------------------------------
---
--------- ---- ------ ---- -- ---- ------------ ----- -- -- -
----- -------------------------------------------
----- --- - --- -------------------
----- ------- - ----- --------------
------------------------------------------
---
-------------- -- -- -
----- -------------
----- ----------------
---
---结尾
总体而言，使用@wordpress/jest-puppeteer-axe这一npm包来完成可访问性测试相对简单，代码精炼，可方便地集成至CI/CD中。如果你经常需要进行可访问性测试工作，不妨试试这个npm包，为你的工作带来便利！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad4eb5cbfe1ea0610c3a