API Reference


Simulates a click event on the given DOM element. Uses elementIdClick protocol action internally.

The element is scrolled into view if it is not already pointer-interactable. See the WebDriver specification for element interactability

Syntax

.click(selector, [callback])

Parameters

Name Type description
selector string

The CSS/Xpath selector used to locate the element.

callback
Optional
function

Optional callback function to be called when the command finishes.

Usage

this.demoTest = function (browser) {
  browser.click("#main ul li a.first");
};

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/master/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/master/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.

API Reference

<%- content['expect-api'] %>
<%- content['expect-cookie'] %> <%- content['expect-element'] %> <% for (var methodName in api['expect.element']) { var method = api['expect.element'][methodName]; %>

<%- method.display %>Suggest edits

<%- method.descr %>

<% if (method.params.length) { %>
Parameters:
<% for (var j = 0; j < method.params.length; j++) { var param = method.params[j]; %> <% } %>
Name Type description
<%- param.name %><% if (param.optional) { %>
Optional<% } %>
<%- param.types %> <%- param.descr %>
<% } %> <% if (method.example) { %>
Usage:
<%- method.example %>
<% } %>
<% } %> <%- content['expect-elements'] %> <%- content['expect-title'] %> <%- content['expect-url'] %>
<%- content['assert-api'] %>
<% for (var i = 0; i < methods.assertions.length; i++) { var method = methods.assertions[i]; %>

assert.<%- method.name %>()

<%- method.descr %>

Parameters:
<% for (var j = 0; j < method.parameters.length; j++) { var param = method.parameters[j]; %> <% } %>
Name Type description
<%- param.name %><% if (param.optional) { %>
Optional<% } %>
<%- param.type %> <%- param.descr %>
Usage:
this.demoTest = function (browser) {
  <%- method.usage %>
};
<% } %>
<%- content['page-api'] %>
<%- content['commands-api'] %> <% var sectionsData = { 'protocol.elements' : [ 'elements-headline', 'Finding Elements', [ 'The commands listed below allow lookup of individual elements and collections of elements. Element retrieval searches are performed using a provided selector, in usually a CSS selector or, less often, an Xpath selector.', 'The convenience commands, such as .waitForElementVisible() can take a default locator strategy. More info on locator strategy can be found on the WebDriver page.', 'Each element has an associated web element reference (a UUID) that uniquely identifies the element across all browsing contexts.' ] ], 'protocol.elementinteraction' : [ 'elementinteraction-headline', 'Element Interaction' ], 'protocol.elementstate' : [ 'elementstate-headline', 'Element State', 'Details on how WebDriver checks if the element is displayed are available Element Displayedness page.' ], 'protocol.elementlocation' : [ 'elementlocation-headline', 'Element Location' ], 'protocol.document' : ['document-headline', 'Document Handling'], 'protocol.sessions' : [ 'sessions-headline', 'Sessions', 'A WebDriver session represents the connection between a client and a remote WebDriver server. Read more on WebDriver page.' ], 'protocol.navigation' : [ 'navigation-headline', 'Navigation', 'The commands in this section allow navigation to new URLs and introspection of the currently loaded url.' ], 'protocol.contexts' : ['contexts-headline', 'Window Related'], 'protocol.cookies' : ['cookies-headline', 'Cookies'], 'protocol.useractions' : ['useractions-headline', 'User Actions'], 'protocol.userprompts' : ['userprompts-headline', 'User Prompts'], 'protocol.screens' : ['screens-headline', 'Screen Capture'], 'protocol.mobile' : ['mobile-headline', 'Mobile Related'], 'protocol.utilities': ['utilities-headline', 'Utilities / Debugging'], 'protocol' : '' }; for (var section in sectionsData) { %> <% if (Array.isArray(sectionsData[section][2])) { var sectionEntry = sectionsData[section][2] || []; for (var i = 0; i < sectionEntry.length; i++) {%>

<%- sectionEntry[i] %>

<% } } else if (sectionsData[section][2]) { %>

<%- sectionsData[section][2] %>

<% } %> <% if (api[section]) { %> <% for (var i = 0; i < api[section].length; i++) { var method = api[section][i]; %>

.<%- method.name %>() Suggest edits

<%- method.descr %> <% if (method.params) {%>
Parameters:
<% for (var j = 0; j < method.params.length; j++) { var param = method.params[j]; %> <% } %>
Name Type description
<%- param.name %> <% if (param.optional) { %>
Optional<% } %>
<%- param.types %> <%- param.descr %>
<% } %> <% if (method.returns) { %>
Returns
Type description
<%- method.returns.type %> <%- method.returns.descr %>
<% } %>
<% } %> <% } %> <% } %>