跳到主要内容

WebdriverIO Testing Library

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

安装​

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

然后

npm install -D @testing-library/webdriverio

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 时，你也可以使用链式查询。链式查询作为命令 添加到 browser 和 element 中，格式为 {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​

让你配置 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​

这个库带有完整的类型脚本定义。为了使用 setupBrowser 添加的命 令，需要扩展全局 WebdriverIO 命名空间中的 Browser 和 Element 接口。在 typecript 模块中添加以下内容:

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 {}
  }
}

要添加链式查询类型，你需要使用 WebdriverIOQueriesChainable 扩展上述接口以及 ChainablePromiseElement ：

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"。更多信息请 看这里。

关于在 WebdriverIO 中使用 typescript 的其他信息可以 在这里找到。