Aller au contenu principal

Bibliothèque de Test WebdriverIO

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

webdriverio-testing-library permet d'utiliser les requêtes de la dom-testing-library dans WebdriverIO pour les tests web de bout en bout.

Installation​

Assurez-vous d'abord de suivre les instructions d'installation et configuration de WebdriverIO

ensuite

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

API​

setupBrowser​

Accepte un objet navigateur WebdriverIO et renvoie les requêtes de la dom-testing-library modifiées pour retourner des éléments WebdriverIO comme des sélecteurs normaux. Toutes les requêtes sont asynchrones et liées à document.body par défaut.

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 ajoute également les requêtes comme commandes au navigateur et à tous les éléments WebdriverIO. Les commandes du navigateur sont limitées à document.body. Les commandes des éléments sont limitées à l'élément comme s'il était passé à 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')
})

En utilisant le mode synchrone, ces commandes deviennent également synchrones :

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

Avec WebdriverIO v7.19 ou supérieur, vous pouvez utiliser des requêtes chaînables. Ces requêtes sont ajoutées au navigateur et aux éléments comme commandes au format {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​

Accepte un élément WebdriverIO et renvoie des requêtes limitées à cet élément.

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​

Permet de configurer la 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​

Cette bibliothèque inclut des définitions TypeScript complètes. Pour utiliser les commandes ajoutées par setupBrowser, les interfaces Browser et Element dans l'espace de noms global WebdriverIO doivent être étendues. Ajoutez ce qui suit dans un module TypeScript :

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

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

Si vous utilisez le package @wdio/sync, vous devrez utiliser le type WebdriverIOQueriesSync pour étendre les interfaces :

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

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

Pour ajouter les types de requêtes chaînables, étendez les interfaces ci-dessus ainsi que ChainablePromiseElement avec 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 vous rencontrez une erreur similaire à celle-ci :

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

vous devez inclure "DOM" dans l'option lib de votre tsconfig. Consultez ici pour plus d'informations.

Des informations supplémentaires sur l'utilisation de TypeScript avec WebdriverIO sont disponibles ici