Wait for an Element to Be Enabled in NightwatchJS

Published: Jul 16, 2020
Updated: May 3, 2021

In NightwatchJS, you can wait for an element to be present, or to be visible. But there is no built-in command to wait for an element to be enabled. Luckily, this can be done by using the :enabled CSS pseudo-class, see MDN docs.

Sample #

The sample test below does the following things:

1. Maximizes the browser window
2. Navigates to the DuckDuckGo URL
3. Waits for the search bar to be enabled and visible for up to 10 seconds
4. Sets the search bar value
5. Sends the RETURN key
6. Saves a screenshot
7. Ends the browser session

module.exports = {
  'Search DuckDuckGo': (browser) => {
    const selector = '#search_form_input_homepage:enabled';
    const wait = 10 * 1000;

    browser
      .maximizeWindow()
      .url('https://duckduckgo.com')
      .waitForElementVisible(selector, wait)
      .setValue(selector, 'NightwatchJS')
      .keys(browser.Keys.RETURN)
      .saveScreenshot('./screenshot.png')
      .end();
  }
};

Acknowledgements #

Shoutout to this stackoverflow answer for the tip.