element() global API Suggest edits

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().

Syntax:

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
});

Using Selenium locators:

const locator = by.css('button[type="button"]');
const addButtonEl = element(locator);

Using Selenium WebElements:

// webElement is an instance of WebElement class from Selenium
const addButtonEl = element(webElement);

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);
  });
});