Correct way to get a count of matching elements in Nightwatch?

Question

I'm trying to test if a todo app has the right number of elements.

The docs seem to deal almost exclusively with single elements, so I had to use the Selenium Protocol functions. Would this be the right way to test the count of matching selectors (in this case, checking for 2 li elements)?

client.elements('css selector','#todo-list li', function (result) {
    client.assert.equal(result.value.length, 2);
});

This works in my test, but I wasn't sure if there were gotchas around using a callback for this. Also not sure why Nightwatch doesn't have any helper functions dealing with more than one element.

Answer 1

I found the following very elegant solution within a VueJS template. It shows how to add a custom assertion into Nightwatch that counts the number of elements returned by a selector. See http://nightwatchjs.org/guide#writing-custom-assertions for details of how to write custom assertions within Nightwatch.

Once installed, usage is as simple as:

browser.assert.elementCount('#todo-list li', 2)

The plugin:

// A custom Nightwatch assertion.
// the name of the method is the filename.
// can be used in tests like this:
//
//   browser.assert.elementCount(selector, count)
//
// for how to write custom assertions see
// http://nightwatchjs.org/guide#writing-custom-assertions
exports.assertion = function (selector, count) {
  this.message = 'Testing if element <' + selector + '> has count: ' + count;
  this.expected = count;
  this.pass = function (val) {
    return val === this.expected;
  }
  this.value = function (res) {
    return res.value;
  }
  this.command = function (cb) {
    var self = this;
    return this.api.execute(function (selector) {
      return document.querySelectorAll(selector).length;
    }, [selector], function (res) {
      cb.call(self, res);
    });
  }
}

This code was added to vuejs-templates by yyx990803 in 2016. So full credit goes to yyx990803.

Answer 2

Just to reassure you I do a similar thing when trying to grab all matching elements, ex:

    browser.elements("xpath","//ul[@name='timesList']/h6", function(result){
        els = result.value;
        var i = 0;
        els.forEach(function(el, j, elz){
            browser.elementIdText(el.ELEMENT, function(text) {
                dates[i] = text.value;
                i++;
            });
        });
    });

Answer 3

Alternatively, if you want to be sure that n number of elements exist, you can use a combination of :nth-of-type/:nth-child selectors and nightwatch's expect.

For example, if you want to test if #foo has nine direct children:

function(browser) {
  browser
    .url('http://example.com')
    .expect.element('#foo > *:nth-child(9)').to.be.present;
  browser.end();
}

Or if #bar has three direct article children:

function(browser) {
  browser
    .url('http://example.com')
    .expect.element('#bar > article:nth-of-type(3)').to.be.present;
  browser.end();
}

Answer 4

I adapted Chris K's answer to support XPath expressions by using the built-in method this.api.elements:

exports.assertion = function elementCount(selector, count) {
  this.message = 'Testing if element <' + selector + '> has count: ' + count

  this.expected = count

  this.pass = function pass(val) {
    return val === this.expected
  }

  this.value = function value(res) {
    return res.value.length
  }

  this.command = function command(callback) {
    return this.api.elements(this.client.locateStrategy, selector, callback)
  }
}

For usage instructions and credits see his answer

Answer 5

You could use expect.elements(<selector>).count():

  browser.expect.elements('div').count.to.equal(10);
  browser.expect.elements('p').count.to.not.equal(1);

Answer 6

And if you like a bit of TypeScript, here is an assertion that will confirm the element count:

import { NightwatchCallbackResult, NightwatchAssertion, NightwatchAPI } from "nightwatch";

module.exports.assertion = function (selector: string, count: number, description?: string) {

    this.message = description || `Testing if element <${selector}> has count: ${count}`;
    this.expected = count;

    this.pass = (value: number) => value === this.expected;

    this.value = (result: number) => result;

    this.command = (callback: (result: number) => void): NightwatchAPI => {

        const self: NightwatchAssertion = this;

        return self.api.elements(this.client.locateStrategy, selector, (result: NightwatchCallbackResult) => {
            callback(result.value.length);
        });
    }

}

Use like this:

browser.assert.elementCount('body', 1, 'There is only one body element');