Saltar al contenido principal

Biblioteca de Pruebas Nightwatch

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

nightwatch-testing-library permite utilizar consultas de dom-testing-library en Nightwatch para pruebas web de extremo a extremo.

Instalación​

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

y luego simplemente

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

LEE ESTO PRIMERO​

En esencia, nightwatch-testing-library traduce entre consultas de dom-testing-library y selectores CSS. Esto se debe a que Nightwatch cumple con los estándares WebDriver para estrategias de localización. Por ahora, esto significa que los registros mostrarán rutas CSS muy detalladas. Se agradecen PRs para crear un reporter personalizado que resuelva este problema 🤗.

Recuerda: los resultados de las consultas NWTL son localizadores WebDriver, no nodos DOM.

Nota: en NWTL, todas las consultas deben usarse con await.

Uso​

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​

Los resultados de las consultas AllBy incluyen una función adicional: nth, que puede usarse en funciones de Nightwatch así como en la función 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');

    },

Configuración​

Puedes personalizar el testIdAttribute usando la función configure igual que en dom-testing-library:

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

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

Contenedores​

Por defecto, las consultas vienen previnculadas a document.body, así que no es necesario proporcionar un contenedor. Sin embargo, si deseas restringir tu consulta usando un contenedor, puedes utilizar within.

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