Aller au contenu principal

Testcafe Testing Library

[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 →

Introduction​

testcafe-testing-library permet d'utiliser les requêtes de la DOM Testing Library dans Testcafe pour réaliser des tests web de bout en bout multi-navigateurs.

Si vous débutez avec l'approche testing-library pour écrire des tests, consultez le guide sur le choix des requêtes ainsi que l' aide-mémoire.

Installation​

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

Utilisation​

testcafe-testing-library fournit des sélecteurs personnalisés qui vous permettent d'interroger le DOM.

Ajoutez ce qui suit à votre fichier .testcaferc.json :

  "clientScripts": [
    { "module": "@testing-library/dom/dist/@testing-library/dom.umd.js" }
  ],

Vous pouvez désormais importer screen qui contient tous les sélecteurs get[All]By, query[All]By, find[All]By* utilisables dans vos tests.

import {screen} from '@testing-library/testcafe'

Voir Queries pour référence

Note sur les requêtes dans Testcafe : Testcafe dispose d'un mécanisme d'attente intégré. Pour cette raison, il n'y a pas de différence entre les requêtes queryBy et findBy dans testcafe testing library. Les requêtes getBy lèvent une exception (comme prévu) et échouent donc immédiatement, sans tirer parti du mécanisme d'attente intégré de Testcafe.

Exemples​

Quelques exemples simples (tirés de https://github.com/testing-library/testcafe-testing-library/blob/master/tests/testcafe/selectors.ts) :

import {screen} from '@testing-library/testcafe'

test('getByPlaceHolderText', async t => {
  await t.typeText(
    screen.getByPlaceholderText('Placeholder Text'),
    'Hello Placeholder',
  )
})
test('getByText', async t => {
  await t.click(screen.getByText('getByText'))
})

test('getByLabelText', async t => {
  await t.typeText(
    screen.getByLabelText('Label For Input Labelled By Id'),
    'Hello Input Labelled By Id',
  )
})

test('queryAllByText', async t => {
  await t.expect(screen.queryAllByText('Button Text').exists).ok()
  await t
    .expect(screen.queryAllByText('Non-existing Button Text').exists)
    .notOk()
})

Configuration​

Vous pouvez personnaliser le testIdAttribute via la fonction configure de DOM Testing Library de plusieurs manières :

Pour une seule page chargée :​

import {configureOnce, getByTestId} from '@testing-library/testcafe'

test('can be configured once in a single page load', async t => {
  await configureOnce({testIdAttribute: 'data-other-test-id'})
  await t.click(screen.getByTestId('other-id'))
})

Pour chaque test et chargement de page dans un fixture :​

import {configure, screen} from '@testing-library/testcafe'

fixture`configure`.clientScripts(
  configure({testIdAttribute: 'data-automation-id'}),
).page`http://localhost:13370`

test('supports alternative testIdAttribute', async t => {
  await t.click(screen.getByTestId('image-with-random-alt-tag'))
})

test('still works after browser page load and reload', async t => {
  await t.click(screen.getByText('Go to Page 2'))

  await t.eval(() => location.reload(true))

  await t
    .click(screen.getByTestId('page2-thing'))
    .expect(screen.getByText('second page').exists)
    .ok()
})

Globalement pour tous les fixtures, tests et chargements de page en injectant des clientScripts​

Note : le UMD dom-testing-library doit être chargé avant votre script de configuration

.testcaferc.json
  "clientScripts": [
    "./node_modules/@testing-library/dom/dist/@testing-library/dom.umd.js",
    "./path/to/my-app-testcafe.config.js"
  ]
./path/to/my-app-testcafe.config.js
window.TestingLibraryDom.configure({testIdAttribute: 'data-automation-id'})

Conteneurs​

Par défaut, les sélecteurs sont pré-liés à document.body, donc aucun conteneur n'est requis. Cependant, pour limiter votre requête à un conteneur spécifique, utilisez within qui accepte soit une chaîne de caractères soit une requête (get[All]By, query[All]By, find[All]By*).

Exemples d'utilisation de within​

import {within, screen} from '@testing-library/testcafe'

fixture`within`.page`http://localhost:13370`

test('works with getBy* selectors', async t => {
  await t
    .expect(
      within(screen.getByTestId('nested')).getByText('Button Text').exists,
    )
    .ok()
})

test('works with CSS selector strings', async t => {
  const {getByText} = await within('#nested')
  await t.click(getByText('Button Text')).ok()
})

test('works on any testcafe selector', async t => {
  const nested = Selector('#nested')

  await t.expect(within(nested).getByText('Button Text').exists).ok()
})

test('works with results from "byAll" query with index - regex', async t => {
  const nestedDivs = screen.getAllByTestId(/nested/)
  await t.expect(nestedDivs.count).eql(2)

  await t
    .expect(within(nestedDivs.nth(0)).getByText('Button Text').exists)
    .ok()
    .expect(
      within(nestedDivs.nth(1)).getByText('text only in 2nd nested').exists,
    )
    .ok()
})