本文へスキップ

WebdriverIO Testing Library

webdriverio-testing-library を使用すると、エンドツーエンドのWebテストで WebdriverIO にdom-testing-libraryクエリを使用できます。

インストール​

WebdriverIOのインストールと設定手順を最初に必ず実行してください

その後、次のように実行します。

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

API​

setupBrowser​

WebdriverIOのブラウザオブジェクトを受け取り、通常のセレクタのようにWebdriverIO要素を返すように修正されたdom-testing-libraryのクエリを返します。**すべてのクエリは非同期**であり、デフォルトで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 {}
  }
}

チェーン可能なクエリ型を追加するには、上記のインターフェースと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」を含める必要があります。詳細については、こちらを参照してください。

WebdriverIOでのTypeScriptの使用に関する追加情報はこちらにあります。