@wordpress/jest-puppeteer-axe

查看官方原文 ↗

💡 云策文档标注

概述

本文档介绍了 @wordpress/jest-puppeteer-axe 包，它集成了 Axe 可访问性引擎与 Jest 和 Puppeteer，为 WordPress 开发者提供自动化可访问性测试工具。核心功能是定义一个 Jest 异步匹配器，用于检查 Puppeteer 页面实例是否通过 Axe 可访问性测试。

关键要点

安装：通过 npm install @wordpress/jest-puppeteer-axe --save-dev 安装，要求 Node.js 版本为长期支持版（Active LTS 或 Maintenance LTS）。
设置：使用 Jest 的 setupFilesAfterEnv 配置选项，将 @wordpress/jest-puppeteer-axe 添加到配置中。
使用：在 Jest 测试中，使用 await expect(page).toPassAxeTests() 来运行 Axe 测试，并可传递可选参数进行自定义检查。
可选参数：包括 include（包含元素）、exclude（排除元素）、disabledRules（禁用规则）、options（Axe 运行配置）和 config（Axe 配置对象）。
贡献：此包是 Gutenberg 项目的一部分，采用 monorepo 结构，欢迎贡献，详情请参考项目的主要贡献者指南。

代码示例

test( 'checks the test page with Axe', async () => {
    // First, run some code which loads the content of the page.
    loadTestPage();

    await expect( page ).toPassAxeTests();
} );

test( 'checks the test component with Axe excluding some button', async () => {
    // First, run some code which loads the content of the page.
    loadPageWithTestComponent();

    await expect( page ).toPassAxeTests( {
        include: '.test-component',
        exclude: '.some-button',
        disabledRules: [ 'aria-allowed-role' ],
        options: { iframes: false },
        config: { reporter: 'raw' },
    } );
} );

📄 原文内容

Axe (the Accessibility Engine) API integration with Jest and Puppeteer.

Defines Jest async matcher to check whether a given Puppeteer’s page instance passes Axe accessibility tests.

Installation

Install the module

npm install @wordpress/jest-puppeteer-axe --save-dev

Note: This package requires Node.js version with long-term support status (check Active LTS or Maintenance LTS releases). It is not compatible with older versions.

Setup

The simplest setup is to use Jest’s setupFilesAfterEnv config option:

"jest": {
  "setupFilesAfterEnv": [
    "@wordpress/jest-puppeteer-axe"
  ]
},

Usage

In your Jest test suite add the following code to the test’s body:

test( 'checks the test page with Axe', async () => {
    // First, run some code which loads the content of the page.
    loadTestPage();

    await expect( page ).toPassAxeTests();
} );

It is also possible to pass optional params which allow Axe API to perform customized checks:

include – CSS selector(s) to add the list of elements to include in analysis.
exclude – CSS selector(s) to add the list of elements to exclude from analysis.
disabledRules – the list of Axe rules to skip from verification.
options – a flexible way to configure how Axe run operates. See axe-core API documentation for information on the object structure.
config – Axe configuration object. See axe-core API documentation for documentation on the object structure.

test( 'checks the test component with Axe excluding some button', async () => {
    // First, run some code which loads the content of the page.
    loadPageWithTestComponent();

    await expect( page ).toPassAxeTests( {
        include: '.test-component',
        exclude: '.some-button',
        disabledRules: [ 'aria-allowed-role' ],
        options: { iframes: false },
        config: { reporter: 'raw' },
    } );
} );

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.

云策 WordPress 开发者社区

块编辑器开发文档