Saltar al contenido principal

Biblioteca de Pruebas WebdriverIO

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

webdriverio-testing-library permite utilizar consultas de dom-testing-library en WebdriverIO para pruebas web de extremo a extremo.

Instalación​

Asegúrate de seguir primero las instrucciones de instalación y configuración de WebdriverIO

y luego simplemente

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

API​

setupBrowser​

Acepta un objeto browser de WebdriverIO y devuelve consultas de dom-testing-library modificadas para devolver elementos de WebdriverIO como selectores normales. Todas las consultas son asíncronas y están vinculadas a document.body por defecto.

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 también añade las consultas como comandos al navegador y a todos los elementos de WebdriverIO. Los comandos del navegador están delimitados a document.body. Los comandos del elemento están delimitados al elemento de la misma manera que si se pasaran a 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')
})

Cuando se usa el modo síncrono estos comandos también son 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')
})

Al usar WebdriverIO v7.19 o superior, también puedes utilizar consultas encadenables. Las consultas encadenables se añaden al navegador y elemento como comandos con el 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​

Acepta un elemento de WebdriverIO y devuelve consultas delimitadas a ese 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​

Te permite configurar 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 incluye definiciones completas de TypeScript. Para usar los comandos añadidos por setupBrowser, las interfaces Browser y Element en el espacio de nombres global WebdriverIO deben extenderse. Añade lo siguiente a un módulo de TypeScript:

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

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

Si usas el paquete @wdio/sync, necesitarás usar el tipo WebdriverIOQueriesSync para extender las interfaces:

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

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

Para añadir tipos de consultas encadenables, necesitas extender las interfaces anteriores así como ChainablePromiseElement con 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> {}
}

Si encuentras un error similar a este:

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

necesitas incluir "DOM" en la opción lib de tu tsconfig. Consulta aquí para más información.

Puedes encontrar información adicional sobre el uso de TypeScript con WebdriverIO aquí