Ir para o conteúdo principal

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

nightwatch-testing-library permite o uso de consultas dom-testing-library no Nightwatch para testes end-to-end web.

Instalação​

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

depois basta

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

LEIA ISSO PRIMEIRO​

Em sua essência, nightwatch-testing-library converte entre consultas dom-testing-library e seletores CSS. Isso ocorre porque o Nightwatch segue os padrões WebDriver para estratégias de localização. Por enquanto, isso significa que os logs conterão caminhos CSS muito detalhados. PRs são bem-vindos para um relatório personalizado que resolva esse problema 🤗.

Portanto lembre-se: os resultados das consultas NWTL são localizadores WebDriver, não nós DOM.

Nota: no NWTL, todas as consultas devem ser awaited (aguardadas).

Como usar​

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

Consultas AllBy​

Os resultados das consultas AllBy têm uma função adicional: nth, que pode ser usada em funções do Nightwatch e na função within do 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');

    },

Configuração​

Você pode personalizar o testIdAttribute usando a função configure, assim como no dom-testing-library:

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

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

Containers​

Por padrão, as consultas vêm pré-vinculadas a document.body, então não é necessário fornecer um container. Porém, se quiser restringir sua consulta usando um container, você pode usar within.

Exemplos usando 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')
  },
}