Skip to main content

Nightwatch Testing Library

nightwatch-testing-library allows the use of dom-testing-library queries in Nightwatch for end-to-end web testing.

Install​

Be sure to follow the Nightwatch install & config instructions first

then just

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

READ THIS FIRST​

At it's core, nightwatch-testing-library translates between dom-testing-library queries and css selectors. This is due to the fact that Nightwatch adheres to the WebDriver standards for locator strategies. For now, this means that the logging will have some very detailed css paths. PRs welcome for a custom reporter to solve this problem 🤗.

So remember, the results from NWTL queries are WebDriver locators, not DOM nodes.

Note, in NWTL, all queries must be awaited.

Usage​

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

AllBy queries​

The results of AllBy queries have an additional function added to them: nth which can be used in nightwatch functions as well as in the within function of 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');

    },

Configure​

You can customize the testIdAttribute using the configure function just like dom-testing-library:

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

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

Containers​

By default the queries come pre-bound to document.body, so no need to provide a container. However, if you want to restrict your query using a container, you can use within.

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