@chanzuckerberg/xe-故事书测试

运行的命令行接口 轴核 您的无障碍测试 故事书故事。 。 。 .

如有违规情况,会将相关信息打印出,命令会以非零出站代码退出. 这样,你就可以在CI上用这个作为自动化的无障碍测试.

目录

• 行为守则
• 最低要求
• 安装
• 使用量
• 选项
• 故事参数
  • 禁用规则
  • 模式
  • 运行选项
  • 上下文
  • 配置
  • 跳过
  • 超时
  • 等待选择器 (折旧)
• 类型脚本
• 发展中国家
• 警卫
• 灵感

行为守则

本项目遵循 《公约》的行为守则. 通过参与,你应该维护这个守则。 请报告不可接受的行为 开源代码@ chanzuckerberg.com。 。 。 .

最低要求

• 节点 18
• 故事集 10
  • 用于"故事本"9,使用轴-故事本测试 v9
  • 对于"故事集"7或8,使用轴-故事集-测试v8.2.3
  • 出自"史记" 第6卷 使用轴-史记-测试 v6.3.1
• 轴-核心 4.0

安装

# via npm
npm install --save-dev @chanzuckerberg/axe-storybook-testing

# or with Yarn
yarn add --dev @chanzuckerberg/axe-storybook-testing

使用量

用于:

1. 添加创建故事本的脚本, 然后执行轴- 故事本命令

   // In package.json
   "scripts": {
     "test:axe": "storybook build && axe-storybook"
   },
   

2. 通过调用前一步的脚本来运行测试

   npm run test:axe
   

3. (可选)安装更多浏览器. 默认安装了铬. 如果你想同时使用Firefox和/或Safari,请安装它们:

   npx playwright install
   

您也可以配置您的脚本以运行 storybook build --test 相反,和 配置故事书 以禁用用于测试的无关附加件/特性.

选项

命令行界面有以下选项:

比如说,在Firefox中无头跑,你会跑

# If using npm
npm run storybook:axe -- --headless false --browser firefox

# or, if using Yarn
yarn storybook:axe --headless false --browser firefox

故事参数

故事可以使用参数来配置轴-故事本测试如何处理它们.

你可以在故事书所接受的地方提供这些 参数 (故事、组件或全球).

禁用规则

防止轴-故事本测试通过使用 disabledRules 参数.

// SomeComponent.stories.jsx

export const SomeStory = {
  parameters: {
    axe: {
      disabledRules: ['select-name'],
    },
  }.
};

规则也可以在全球范围内通过 设置此参数 所有的故事 在.故事本/评论.js中。 。 。 .

// .storybook/preview.js

export const parameters = {
  axe: {
    disabledRules: ['select-name'],
  },
};

模式

设定一个故事的错误是否会失败测试套件 .

有效的选项有:

• off - 故事会被跳过 斧头不会运行它。 这和设定一样 skip: true。 。 。 .
• warn - 轴出错会被打印,但不会失败测试套房。 与此设定有关的故事将显示为未决.
• error (默认) - 轴出错会让一个故事的测试套件失效 .

// .storybook/preview.js

export const parameters = {
  axe: {
    mode: 'warn',
  },
};

运行选项

允许使用任何可用的 axe.run 选项。 详见链接. 使用时 runOptions.rules 结合 disabledRules, (中文(简体) ), disabledRules 永远是先例.

export const SomeStory = {
  parameters: {
    axe: {
      runOptions: {
        preload: true,
        selectors: true,
        ...
      }
    }
  }
}

上下文

轴上下文,然后转至 axe.run用于将元素纳入或排除于试验之外.

export const SomeStory = {
  parameters: {
    axe: {
      context: {
        exclude: '.foo',
      },
    }
  }
}

配置

轴配置, 将传递到 轴. 配置。 。 。 .

export const SomeStory = {
  parameters: {
    axe: {
      config: {
        checks: [...],
        ...
      }
    }
  }
}

跳过

通过使用 skip 参数。 这是设置的缩写 mode: 'off'。 。 。 .

// SomeComponent.stories.jsx

export const SomeStory = {
  parameters: {
    axe: {
      skip: true,
    },
  },
};

超时

覆盖全球 --timeout 用于此特定测试

// SomeComponent.stories.jsx

export const SomeStory = {
  parameters: {
    axe: {
      timeout: 5000,
    },
  },
};

等待选择器

堕落了!

在运行Axe之前等待选手的遗产方式.

现在我们建议用一本故事书 播放函数 做同样的事情.

// SomeComponent.stories.jsx

// Old, deprecated way.
export const SomeStory = {
  parameters: {
    axe: {
      waitForSelector: '#some-component-selector',
    },
  },
};

// New, better way using a play function - https://storybook.js.org/docs/react/writing-stories/play-function
SomeStory.play = async () => {
  await screen.findByText('some string');
};

类型脚本

轴-故事本-测试为上述故事参数提供了TypeScript类型. 通过扩充"故事本"可以检查故事参数 Parameter 类型 :

// overrides.d.ts

import type { AxeParams } from '@chanzuckerberg/axe-storybook-testing';

declare module '@storybook/react' {
  // Augment Storybook's definition of Parameters so it contains valid options for axe-storybook-testing
  interface Parameters {
    axe?: AxeParams;
  }
}

记下你的故事 StoryObj 类型,您的参数将被选中 !

// SomeComponent.stories.ts

export const SomeStory: StoryObj<Args> = {
  parameters: {
    axe: {
      timeout: 5000,
    },
  },
};

发展中国家

如果你想在这个项目上工作 或为此作出贡献,请看我们 维基百科中的相关条目: 开发设置。 。 。 .

警卫

要报告安全问题,请看 /安全.md。 。 。 .

灵感

这个项目最初的基础是: @percy/故事书。 。 。 .