WebdriverIO Testing Library

webdriverio-testing-library 允許在 WebdriverIO 中使用 dom-testing-library 查詢，以進行端對端網路測試。

安裝

請務必先遵循 WebdriverIO 安裝與設定說明

然後只需

npm

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

Yarn

yarn add --dev @testing-library/webdriverio

• GitHub 上的 webdriverio-testing-library

API

setupBrowser

接受 WebdriverIO browser 物件，並傳回修改過的 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')
})

當使用 WebdriverIO v7.19 或更高版本時，您也可以使用可鏈式查詢。可鏈式查詢會以 {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 {}
  }
}

若要新增可鏈式查詢類型，您需要擴充上述介面以及包含 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 的其他資訊，請參閱此處