element() global API

Overview

The newly added element() global object adds to Nightwatch 2 the functionality present in the Selenium WebElement class.

It supports all the usual ways of locating elements in Nightwatch, as well as the Selenium locators built using By(), which is also available in Nightwatch as a global named by().

Usage

Using regular CSS (or Xpath) selectors
const addButtonEl = element('button[type="submit"]');
Using Nightwatch selector objects
const addButtonEl = element({
  selector: 'button[type="button"]',
  index: 0
});
Selenium locators
const locator = by.css('button[type="button"]');
const addButtonEl = element(locator);
Selenium WebElements as arguments
// webElement is an instance of WebElement class from Selenium
const addButtonEl = element(webElement);
Retrieve the Selenium WebElement instance
const addButtonEl = element('button[type="submit"]');
const instance = await addButtonEl.findElement();

API Commands

All the existing methods from a regular WebElement instance are available. If a method is called, it will be added to the Nightwatch queue accordingly.

Available element commands:

Working Example

The example below navigates to the AngularJS homepage and adds a new to-do item in the sample ToDo App available there.

describe('angularjs homepage todo list', function() {


  // using the new element() global utility in Nightwatch 2 to init elements
  // before tests and use them later
  const todoElement = element('[ng-model="todoList.todoText"]');
  const addButtonEl = element('[value="add"]');


  it('should add a todo using global element()', function() {
    // adding a new task to the list
    browser
      .navigateTo('https://angularjs.org')
      .sendKeys(todoElement, 'what is nightwatch?')
      .click(addButtonEl);


// verifying if there are 3 tasks in the list
expect.elements('[ng-repeat="todo in todoList.todos"]').count.to.equal(3);

// verifying if the third task if the one we have just added
const lastElementTask = element({
  selector: '[ng-repeat="todo in todoList.todos"]',
  index: 2
});

expect(lastElementTask).text.to.equal('what is nightwatch?');

// find our task in the list and mark it as done
lastElementTask.findElement('input', function(inputResult) {
  if (inputResult.error) {
    throw inputResult.error;
  }

  const inputElement = element(inputResult.value);
  browser.click(inputElement);
});

// verify if there are 2 tasks which are marked as done in the list
expect.elements('*[module=todoApp] li .done-true').count.to.equal(2);


  });
});