.click() Suggest edits


Simulates a click event on the given DOM element. The element is scrolled into view if it is not already pointer-interactable. See the WebDriver specification for element interactability.

click() will automatically wait for the element to be present (until the specified timeout). If the element is not found, an error is thrown which will cause the test to fail. Starting with v1.2 you can suppress element not found errors by specifying the suppressNotFoundErrors option.

Usage

.click(selector, [callback])
.click(using, selector, [callback])

Parameters

Name Type description
using
Optional		 string

The locator strategy to use. See W3C Webdriver - locator strategies
selector string

The CSS/Xpath selector used to locate the element.
callback
Optional		 function

Optional callback function to be called when the command finishes.

Example

module.exports = {
  demoTest(browser) {
    browser.click('#main ul li a.first');

    browser.click('#main ul li a.first', function(result) {
      console.log('Click result', result);
    });

    // with explicit locate strategy
    browser.click('css selector', '#main ul li a.first');

    // with selector object - see https://nightwatchjs.org/guide#element-properties
    browser.click({
      selector: '#main ul li a',
      index: 1,
      suppressNotFoundErrors: true
    });

    browser.click({
      selector: '#main ul li a.first',
      timeout: 2000 // overwrite the default timeout (in ms) to check if the element is present
    });
  },

  demoTestAsync: async function(browser) {
    const result = await browser.click('#main ul li a.first');
    console.log('Click result', result);
  }
}

Examples

1) Clicking a button

The example below navigates to google.com, searches for the term "nightwatch.js" and clicks the submit button.


module.exports = {
  before : function(browser) {
    // see https://github.com/nightwatchjs/nightwatch/blob/main/examples/globalsModule.js#L12
    browser.globals.waitForConditionTimeout = 5000;
  },

  'click example test' : function (browser) {

    browser
      .url('https://google.com')
      .waitForElementVisible('input[type=text]')
      .setValue('input[type=text]', 'nightwatch.js')
      .click('button[type=submit]', function(result) {
        this.assert.strictEqual(result.status, 0);
      })
      .expect.element('#rcnt').text.to.contain('nightwatchjs.org/');
  },

  after : function(browser) {
    browser.end();
  }
};

Output

[Click] Test Suite
======================

Running:  clearValue example test
 ✔ Element  was visible after 67 milliseconds.
 ✔ Passed [strictEqual]: 0 === 0
 ✔ Expected element <#rcnt> text to contain: "nightwatchjs.org/" - condition was met in 768ms

OK. 3 assertions passed. (5.277s)

2) Selecting an option from a list

The click command is also used to select an option from a drop down list. The example below navigates to https://www.w3.org and selects the "All" option from the regions drop down.


module.exports = {
  before : function(browser) {
    // see https://github.com/nightwatchjs/nightwatch/blob/main/examples/globalsModule.js#L12
    browser.globals.waitForConditionTimeout = 5000;
  },

  'click option from drop down list' : function (browser) {

    browser
      .url('https://www.w3.org/')
      .waitForElementVisible('#region_form')
      .click('#region_form select')
      .click('#region_form select option[value="all"]')
      .click('input[type=submit]', function(result) {
        this.assert.strictEqual(result.status, 0);
      });
  },

  after : function(browser) {
    browser.end();
  }
};

Output

[Click Options] Test Suite
==============================

Running:  click option from drop down list
 ✔ Element <#region_form> was visible after 64 milliseconds.
 ✔ Passed [strictEqual]: 0 === 0

OK. 2 assertions passed. (6.203s)

Possible Errors

  • element not visible - if the referenced element is not visible on the page (either hidden by CSS, has 0-width, or has 0-height or it is not within the viewport).

Full error details are available when running nightwatch with --verbose flag.

W3C WebDriver spec