Ir para o conteúdo principal

WebdriverIO Testing Library

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

webdriverio-testing-library permite o uso de consultas dom-testing-library no WebdriverIO para testes end-to-end na web.

Instalação​

Certifique-se de seguir primeiro as instruções de instalação e configuração do WebdriverIO

depois basta

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

API​

setupBrowser​

Aceita um objeto browser do WebdriverIO e retorna consultas do dom-testing-library modificadas para retornar elementos WebdriverIO como seletores normais. Todas as consultas são assíncronas e vinculadas a document.body por padrão.

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')
})

O setupBrowser também adiciona consultas como comandos ao browser e a todos os elementos WebdriverIO. Os comandos do browser têm escopo em document.body. Os comandos de elemento têm escopo no elemento da mesma forma que se fosse passado para 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')
})

Ao usar o modo síncrono esses comandos também se tornam síncronos:

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')
})

Ao usar a versão 7.19 ou superior do WebdriverIO, você também pode usar consultas encadeáveis. Consultas encadeáveis são adicionadas ao browser e elemento como comandos no formato {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​

Aceita um elemento WebdriverIO e retorna consultas com escopo nesse elemento

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​

Permite configurar o 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​

Esta biblioteca inclui definições TypeScript completas. Para usar os comandos adicionados por setupBrowser, as interfaces Browser e Element no namespace global WebdriverIO precisam ser estendidas. Adicione o seguinte a um módulo TypeScript:

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

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

Se você estiver usando o pacote @wdio/sync, precisará usar o tipo WebdriverIOQueriesSync para estender as interfaces:

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

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

Para adicionar tipos de consulta encadeáveis, você precisa estender as interfaces acima e também ChainablePromiseElement com 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> {}
}

Se você encontrar um erro similar a este:

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

você precisa incluir "DOM" na opção lib do seu tsconfig. Consulte aqui para mais informações.

Informações adicionais sobre o uso de TypeScript com WebdriverIO podem ser encontradas aqui