Aller au contenu principal

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

nightwatch-testing-library permet d'utiliser les requêtes de dom-testing-library dans Nightwatch pour les tests end-to-end web.

Installation​

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

ensuite

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

LISEZ CECI EN PREMIER​

Fondamentalement, nightwatch-testing-library traduit les requêtes dom-testing-library en sélecteurs CSS. Cela vient du fait que Nightwatch respecte les standards WebDriver pour les stratégies de localisation. Actuellement, cela signifie que les logs afficheront des chemins CSS très détaillés. Les PR sont les bienvenues pour créer un rapporteur personnalisé afin de résoudre ce problème 🤗.

N'oubliez donc pas : les résultats des requêtes NWTL sont des localisateurs WebDriver, pas des nœuds DOM.

Note : dans NWTL, toutes les requêtes doivent être précédées de await.

Utilisation​

const {getQueriesFrom} = require('@testing-library/nightwatch')

module.exports = {
  beforeEach(browser, done) {
    browser.url('http://localhost:13370')
    done()
  },

  async getByLabelText(browser) {
    const {getByLabelText} = getQueriesFrom(browser)

    const input = await getByLabelText('Label Text')
    browser.setValue(input, '@TL FTW')

    browser.expect.element(input).value.to.equal('@TL FTW')
  },

  async getByAltText(browser) {
    const {getByAltText} = getQueriesFrom(browser)
    const image = await getByAltText('Image Alt Text')

    browser.click(image)
    browser.expect
      .element(image)
      .to.have.css('border')
      .which.equals('5px solid rgb(255, 0, 0)')
  },
}

Requêtes AllBy​

Les résultats des requêtes AllBy disposent d'une fonction supplémentaire : nth qui peut être utilisée dans les fonctions Nightwatch ainsi que dans la fonction within de NWTL.


    async 'getAllByText - regex'(browser) {
        const { getAllByText } = getQueriesFrom(browser);
        const chans = await getAllByText(/Jackie Chan/)


        browser.expect.elements(chans).count.to.equal(2)

        const firstChan = chans.nth(0);
        const secondChan = chans.nth(1);


        browser.click(chans.nth(0));
        browser.click(chans.nth(1));

        browser.expect.element(secondChan).text.to.equal('Jackie Kicked');
        browser.expect.element(firstChan).text.to.equal('Jackie Kicked');

    },

Configuration​

Vous pouvez personnaliser le testIdAttribute via la fonction configure comme dans dom-testing-library :

const {configure} = require('@testing-library/nightwatch')

configure({testIdAttribute: 'data-automation-id'})

Conteneurs​

Par défaut, les requêtes sont pré-liées à document.body, donc aucun conteneur n'est nécessaire. Cependant, si vous souhaitez restreindre votre requête à un conteneur spécifique, vous pouvez utiliser within.

Exemples d'utilisation de within​

const {getQueriesFrom, within} = require('@testing-library/nightwatch')

module.exports = {
  beforeEach(browser, done) {
    browser.url('http://localhost:13370')
    done()
  },
  async 'getByText within container'(browser) {
    const {getByTestId} = getQueriesFrom(browser)

    const nested = await getByTestId('nested')
    const button = await within(nested).getByText('Button Text')

    browser.click(button)
    browser.expect.element(button).text.to.equal('Button Clicked')
  },
}