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.

The command 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. You can suppress element not found errors by specifying the selector argument as an object and passing the suppressNotFoundErrors = true option.

For more info on working with DOM elements in Nightwatch, refer to the Finding & interacting with DOM Elements guide page.

Usage

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

Example

Or run locally with:
git clone https://github.com/nightwatchjs/nightwatch-examples.git
cd nightwatch-examples
npm install
npx nightwatch tests/api/click.js

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.

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