Wait for an Element to Be Enabled in NightwatchJS

Published: 2020-07-16 • Last updated: 2021-03-11

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.