Testcafe 测试库

简介

testcafe-testing-library 允许在 Testcafe 中使用 dom 测试库查询，用于跨浏览器端到端 Web 测试。

如果您不熟悉用于编写测试的 testing-library 方法，请查看 关于使用哪个查询的指南 以及 速查表。

安装

npm

npm install --save-dev testcafe @testing-library/testcafe

Yarn

yarn add --dev testcafe @testing-library/testcafe

• GitHub 上的 testcafe-testing-library

使用

testcafe-testing-library 提供自定义选择器，允许您查询 dom。

将以下内容添加到您的 .testcaferc.json 文件中

  "clientScripts": [
    { "module": "@testing-library/dom/dist/@testing-library/dom.umd.js" }
  ],

您现在可以导入 screen，其中包含所有 get[All]By、query[All]By、find[All]By*选择器，您可以在测试中使用这些选择器。

import {screen} from '@testing-library/testcafe'

有关参考，请参阅 Queries

关于 testcafe 中查询的说明。Testcafe 有 内置等待，因此在 testcafe 测试库中，queryBy 和 findBy 查询之间没有区别。getBy 查询将抛出异常（按设计），因此它们将立即失败并且不适用于 Testcafe 提供的内置等待。

示例

为了展示一些简单的示例（来自 https://github.com/testing-library/testcafe-testing-library/blob/master/tests/testcafe/selectors.ts）

import {screen} from '@testing-library/testcafe'

test('getByPlaceHolderText', async t => {
  await t.typeText(
    screen.getByPlaceholderText('Placeholder Text'),
    'Hello Placeholder',
  )
})
test('getByText', async t => {
  await t.click(screen.getByText('getByText'))
})

test('getByLabelText', async t => {
  await t.typeText(
    screen.getByLabelText('Label For Input Labelled By Id'),
    'Hello Input Labelled By Id',
  )
})

test('queryAllByText', async t => {
  await t.expect(screen.queryAllByText('Button Text').exists).ok()
  await t
    .expect(screen.queryAllByText('Non-existing Button Text').exists)
    .notOk()
})

配置

您可以使用 DOM 测试库的配置函数 以多种不同的方式自定义 testIdAttribute

一次在单个页面加载中：

import {configureOnce, getByTestId} from '@testing-library/testcafe'

test('can be configured once in a single page load', async t => {
  await configureOnce({testIdAttribute: 'data-other-test-id'})
  await t.click(screen.getByTestId('other-id'))
})

对于夹具中每次测试和页面加载：

import {configure, screen} from '@testing-library/testcafe'

fixture`configure`.clientScripts(
  configure({testIdAttribute: 'data-automation-id'}),
).page`https://127.0.0.1:13370`

test('supports alternative testIdAttribute', async t => {
  await t.click(screen.getByTestId('image-with-random-alt-tag'))
})

test('still works after browser page load and reload', async t => {
  await t.click(screen.getByText('Go to Page 2'))

  await t.eval(() => location.reload(true))

  await t
    .click(screen.getByTestId('page2-thing'))
    .expect(screen.getByText('second page').exists)
    .ok()
})

通过 注入 clientScripts，对所有夹具、测试和页面加载全局生效：

注意：dom-testing-library umd 必须位于您的配置脚本之前

.testcaferc.json

  "clientScripts": [
    "./node_modules/@testing-library/dom/dist/@testing-library/dom.umd.js",
    "./path/to/my-app-testcafe.config.js"
  ]

./path/to/my-app-testcafe.config.js

window.TestingLibraryDom.configure({testIdAttribute: 'data-automation-id'})

容器

默认情况下，选择器预先绑定到 document.body，因此无需提供容器。但是，如果您想使用容器来限制查询，您可以使用 within，它可以接受字符串或查询（get[All]By、query[All]By、find[All]By*).

使用 within 的示例

import {within, screen} from '@testing-library/testcafe'

fixture`within`.page`https://127.0.0.1:13370`

test('works with getBy* selectors', async t => {
  await t
    .expect(
      within(screen.getByTestId('nested')).getByText('Button Text').exists,
    )
    .ok()
})

test('works with CSS selector strings', async t => {
  const {getByText} = await within('#nested')
  await t.click(getByText('Button Text')).ok()
})

test('works on any testcafe selector', async t => {
  const nested = Selector('#nested')

  await t.expect(within(nested).getByText('Button Text').exists).ok()
})

test('works with results from "byAll" query with index - regex', async t => {
  const nestedDivs = screen.getAllByTestId(/nested/)
  await t.expect(nestedDivs.count).eql(2)

  await t
    .expect(within(nestedDivs.nth(0)).getByText('Button Text').exists)
    .ok()
    .expect(
      within(nestedDivs.nth(1)).getByText('text only in 2nd nested').exists,
    )
    .ok()
})