WebdriverIO 测试库

webdriverio-testing-library 允许在 WebdriverIO 中使用 dom-testing-library 查询来进行端到端 Web 测试。

安装

请务必先按照 WebdriverIO 安装和配置说明 进行操作。

然后只需

npm

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

Yarn

yarn add --dev @testing-library/webdriverio

• webdriverio-testing-library 在 GitHub 上

API

setupBrowser

接受 WebdriverIO 浏览器对象 并返回修改后的 dom-testing-library 查询，以返回类似于正常 选择器 的 WebdriverIO 元素。所有查询都是异步的，默认情况下绑定到 document.body。

import {setupBrowser} from '@testing-library/webdriverio'

it('can click button', async () => {
  const {getByText} = setupBrowser(browser)

  const button = await getByText('Button Text')
  await button.click()

  expect(await button.getText()).toEqual('Button Clicked')
})

setupBrowser 还将查询作为命令添加到浏览器和所有 WebdriverIO 元素中。浏览器命令的作用域为 document.body。元素命令的作用域与将元素传递给 within 时相同。

it('adds queries as browser commands', async () => {
  setupBrowser(browser)

  expect(await browser.getByText('Page Heading')).toBeDefined()
})

it('adds queries as element commands scoped to element', async () => {
  setupBrowser(browser)

  const nested = await browser.$('*[data-testid="nested"]')
  const button = await nested.getByText('Button Text')
  await button.click()

  expect(await button.getText()).toEqual('Button Clicked')
})

当使用 同步模式 时，这些命令也是同步的。

it('adds queries as browser commands', async () => {
  setupBrowser(browser)

  expect(browser.getByText('Page Heading')).toBeDefined()
})

it('adds queries as element commands scoped to element', async () => {
  setupBrowser(browser)

  const nested = browser.$('*[data-testid="nested"]')
  const button = nested.getByText('Button Text')
  button.click()

  expect(button.getText()).toEqual('Button Clicked')
})

当使用 v7.19 或更高版本的 WebdriverIO 时，您还可以使用可链接查询。可链接查询以 {query}$ 的格式作为命令添加到浏览器和元素中。

it('can chain browser getBy queries', async () => {
  setupBrowser(browser)

  await browser.getByTestId$('nested').getByText$('Button Text').click()

  const buttonText = await browser
    .getByTestId$('nested')
    .getByText$('Button Text')
    .getText()

  expect(buttonText).toEqual('Button Clicked')
})

it('can chain element getBy queries', async () => {
  const {getByTestId} = setupBrowser(browser)

  const nested = await getByTestId('nested')
  await nested.getByText$('Button Text').click()

  const buttonText = await browser.getByText$('Button Clicked').getText()

  expect(buttonText).toEqual('Button Clicked')
})

it('can chain getAllBy queries', async () => {
  setupBrowser(browser)

  await browser.getByTestId$('nested').getAllByText$('Button Text')[0].click()

  expect(await browser.getAllByText('Button Clicked')).toHaveLength(1)
})

within

接受 WebdriverIO 元素并返回作用域为该元素的查询。

import {within} from '@testing-library/webdriverio'

it('within scopes queries to element', async () => {
  const nested = await browser.$('*[data-testid="nested"]')

  const button = await within(nested).getByText('Button Text')
  await button.click()

  expect(await button.getText()).toEqual('Button Clicked')
})

configure

允许您 配置 dom-testing-library

import {configure} from '@testing-library/webdriverio'

beforeEach(() => {
  configure({testIdAttribute: 'data-automation-id'})
})
afterEach(() => {
  configure(null)
})

it('lets you configure queries', async () => {
  const {getByTestId} = setupBrowser(browser)

  expect(await getByTestId('testid-in-data-automation-id-attr')).toBeDefined()
})

TypeScript

此库附带完整的 TypeScript 定义。要使用由 setupBrowser 添加的命令，需要扩展全局 WebdriverIO 命名空间中的 Browser 和 Element 接口。将以下内容添加到 TypeScript 模块中

import {WebdriverIOQueries} from '@testing-library/webdriverio'

declare global {
  namespace WebdriverIO {
    interface Browser extends WebdriverIOQueries {}
    interface Element extends WebdriverIOQueries {}
  }
}

如果您使用的是 @wdio/sync 包，则需要使用 WebdriverIOQueriesSync 类型来扩展接口。

import {WebdriverIOQueriesSync} from '@testing-library/webdriverio'

declare global {
  namespace WebdriverIO {
    interface Browser extends WebdriverIOQueriesSync {}
    interface Element extends WebdriverIOQueriesSync {}
  }
}

要添加可链接查询类型，您需要扩展上述接口以及 ChainablePromiseElement，使用 WebdriverIOQueriesChainable。

import {WebdriverIOQueriesChainable, WebdriverIOQueries} from '../../src'

declare global {
  namespace WebdriverIO {
    interface Browser
      extends WebdriverIOQueries,
        WebdriverIOQueriesChainable<Browser> {}
    interface Element
      extends WebdriverIOQueries,
        WebdriverIOQueriesChainable<Element> {}
  }
}

declare module 'webdriverio' {
  interface ChainablePromiseElement<T extends WebdriverIO.Element | undefined>
    extends WebdriverIOQueriesChainable<T> {}
}

如果您遇到类似于此的错误

browser.getByRole('navigation')
// "Argument of type '"navigation"' is not assignable to parameter of type 'ByRoleOptions | undefined'."

您需要在 tsconfig 的 lib 选项中包含 "DOM"。有关更多信息，请参阅 此处。

有关将 TypeScript 与 WebdriverIO 一起使用的更多信息，请参阅 此处