NPM 包 @wordpress/jest-puppeteer-axe 使用教程

前言

在前端开发中，无法避开的一个问题就是网站的无障碍性（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， 也就是轻松获取网页的可访问性问题反馈。
--- ------- ---------- -----------------------------
---- --- ----- -----------------------------

如何使用@wordpress/jest-puppeteer-axe

获取网页可访问性问题

使用@wordpress/jest-puppeteer-axe获取可访问性问题的步骤如下：

  1. 首先，我们需要在测试用例中引用 @wordpress/jest-puppeteer-axe包，并且实例化一个jestPuppeteer.setupPuppeteerWithAxe对象。
----- ------------- - --------------------------
----- - --------------------- - - -----------------------------------------

-------------- ------ -- -- -
  -- ---

  -----------------------
  --- --------
  --- -----

  --------------- -- -- -
    ------- - ----- -------------------------
    ---- - ----- ------------------
    ----- ----------------------------
  ---

  ---------- ---- -- ---- ------------ ----- -- -- -
    ----- -----------------------------------
    ----- ------------------------------
  ---

  -- ---

  -------------- -- -- -
    ----- -------------
    ----- ----------------
  ---
---

注释：

  1. beforeAll中通过调用setupPuppeteerWithAxe方法进行axe-core的配置，避免重复调用。
  2. 使用expect(page).toPassAxeTests()预期测试结果中搜不出任何可访问性问题。

示例代码

----- ------------- - --------------------------
----- - ------------ - - -------------------------------
----- - --------------------- - - -----------------------------------------

-------------- ------ -- -- -

  -----------------------
  --- --------
  --- -----

  --------------- -- -- -
    ------- - ----- -------------------------
    ---- - ----- ------------------
    ----- ----------------------------
  ---

  -------- ---- ------ ---- -- ---- ------------ ----- -- -- -
    ----- -----------------------------------
    ----- --- - --- -------------------
    ----- ------- - ----- --------------
    ------------------------------------------
  ---

  --------- ---- ------ ---- -- ---- ------------ ----- -- -- -
    ----- -------------------------------------------
    ----- --- - --- -------------------
    ----- ------- - ----- --------------
    ------------------------------------------
  ---


  -------------- -- -- -
    ----- -------------
    ----- ----------------
  ---
---

结尾

总体而言，使用@wordpress/jest-puppeteer-axe这一npm包来完成可访问性测试相对简单，代码精炼，可方便地集成至CI/CD中。如果你经常需要进行可访问性测试工作，不妨试试这个npm包，为你的工作带来便利！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedad4eb5cbfe1ea0610c3a

阅读全文

猜你喜欢

  • npm包@truffle/compile-solidity使用教程

    前言 本文介绍了如何使用 @truffle/compile-solidity 这个 npm 包来编译 Solidity 合约。对于想要使用 Solidity 开发以太坊智能合约的前端开发者来说，这是一...

    4 年前
  • Umi-Plugin-Dll：提高前端开发效率的利器

    在前端开发中，有大量的第三方库或工具需要使用，例如 UI 组件库、数据可视化库、语言转换器等，这些库可能会涉及到多个页面或组件的调用。然而，由于每次打包时都需要将它们一起打包对应的文件一起打包，这就会...

    4 年前
  • npm 包 dva-immer 使用教程

    前言 在前端应用开发中，状态管理和数据流管理是非常重要的，而React+Redux一直是前端开发中比较优秀的技术方案。但是，Redux在使用上存在一定的限制，如难以支持异步操作，使用繁琐等，这就需要更...

    4 年前
  • npm 包 dva-loading 使用教程

    npm 包 dva-loading 使用教程 前言 在 React + dva 项目中，数据的异步加载是一个很重要的部分。当用户点击某个按钮或链接时，要在界面上展示正在加载数据的效果，以此给用户反馈。

    4 年前
  • npm 包 path-is-root 使用教程

    在前端开发中，路径操作是非常重要的基础操作，npm 包 path-is-root 就是一款用于判断给定路径是否为根目录的工具。本文将介绍如何使用该工具包，其用途，以及具体的代码实现。

    4 年前
  • npm 包 umi-plugin-dva 使用教程

    前言 随着前端开发技术的发展，前端技术栈也逐渐变得复杂多样。其中，前端应用架构层面的开发变得越来越重要，因此前端框架的选择尤为关键。 在众多前端框架中，umi 是一个基于 React 的企业级开发框架...

    4 年前
  • npm 包 @umijs/ast 使用教程

    在前端开发中，我们经常需要对代码进行分析、解析和修改。而 @umijs/ast 正是一个非常好用的 npm 包，可以帮助开发者轻松地对 JS、TS 和 Vue 代码进行 AST 解析，实现高效便捷的代...

    4 年前
  • npm 包 @umijs/error-code-map 使用教程

    前言 在开发过程中，我们经常需要处理多种可能出现的错误情况，这时候错误码就成了我们的好帮手。@umijs/error-code-map 是一个基于错误码管理的npm包，提供了一套完善的错误码映射表和相...

    4 年前
  • npm 包 @umijs/core 使用教程

    在前端开发中，使用框架和工具可以提高开发效率和代码可维护性。@umijs/core 是一款基于 React 和 TypeScript 的企业级前端应用框架，它可以帮助开发者更快速地搭建前端应用。

    4 年前
  • npm 包 co-defer 使用教程

    简介 co-defer 是基于 co.js 封装的一个 npm 包，它提供了一种在 Node.js 中实现异步函数按照定义的顺序执行的能力。co-defer 会在迭代所有给定的异步函数时，将每个异步函...

    4 年前
  • npm 包 postcss-plugin-px2rem 使用教程

    在前端开发中，不同设备的屏幕尺寸与像素密度差异很大，如何实现自适应的 UI 布局成为了一个必须面对的问题。rem 单位是一个很好的解决方案，而 postcss-plugin-px2rem 是一个让我们...

    4 年前
  • npm 包 algorithmjs 使用教程

    在前端编程中，算法是一个非常核心的概念和技能。不仅在许多面试过程中被广泛使用，而且在项目经验和编写高效的代码方面也显得至关重要。在这样的背景下，算法库成为了前端开发者不可或缺的一部分，而 algori...

    4 年前
  • npm 包 auto-correct 使用教程

    简介 在前端开发中，我们经常需要进行文本处理，例如进行单词纠错。auto-correct 是一个 npm 包，它可以自动纠正英语单词拼写错误，提高我们的文本处理效率。

    4 年前
  • npm 包 npm-request 使用教程

    前言 在前端开发中，经常需要与后端进行数据交互。而与后端交互最常用的方式之一是通过发送网络请求来获取数据。而 npm-request 就是一个非常常用的异步网络请求库，它可以让我们方便地发送 HTTP...

    4 年前
  • npm 包 cnpm 使用教程

    简介 npm 是 Node.js 的包管理工具，它提供了一个大量的开源的 JavaScript 模块，使得开发更加轻松和高效。但是，由于 npm 使用时需要从境外的服务器下载模块，对于国内用户来说，下...

    4 年前
  • npm 包 eslint-config-xadillax-style 使用教程

    随着前端技术的不断发展，代码的规范性也成为了前端开发中必要的一部分。 eslint 是目前较为流行的 JavaScript 代码规范工具。在很多公司中，为了代码的易读性和可维护性，都会将 eslin...

    4 年前
  • npm 包 shameimaru 使用教程

    在前端开发中，使用 npm 包已经成为一种常见的方式。其中，shameimaru 这个 npm 包是一个非常好用的工具，可以帮助我们在开发中快速生成占位图片。在本文中，我们将详细介绍如何使用 sham...

    4 年前
  • npm 包 bigbrother-webpack-plugin 使用教程

    在前端开发中，我们经常需要通过 webpack 对项目进行打包、优化和管理，其中插件（plugin）是一个非常重要的部分。今天，我要向大家介绍的是一款非常实用的 webpack 插件——bigbrot...

    4 年前
  • npm 包 build-statistics-webpack-plugin 使用教程

    前言 在前端开发中，我们经常需要使用 webpack 对项目进行打包。但是，在打包过程中可能会想要获取到一些更加详细的信息，比如打包出的文件大小、打包时间等等。那么，如何在 webpack 打包过程中...

    4 年前
  • npm 包 map-json-webpack-plugin 使用教程

    在前端开发中，Webpack 是一个非常重要的工具。而在 Webpack 的配置文件中，通常需要用到各种插件。在这些插件中，map-json-webpack-plugin 这个 npm 包是一个非常好...

    4 年前

相关推荐

    暂无文章