nightwatch assert ALL elements, not ANY

Question

I'm trying to test that, when the Submit button is clicked on an empty form, all the "please fill in this field" labels are displayed.

I'm doing so with this:

page.click('@btn_submit');
page.expect.element('@validation_label_required').to.be.visible;

where @validation_label_required is represented by the CSS selector:

input[required] ~ p.error-message-required

However, this test passes if ANY of the validation labels are visible. The test should only pass if they ALL are.

How can I achieve this?

Answer 1

You will need to create a custom assertion for that where you locate all elements by selenium commands and then loop to verify condition. It should look something like this

var util = require('util');
exports.assertion = function (elementSelector, expectedValue, msg) {

    this.message = msg || util.format('Testing if elements located by "%s" are visible', elementSelector);

    this.expected = expectedValue;

    this.pass = function (value) {
        return value === this.expected;
    };

    this.value = function (result) {
        return result;
    };

    this.command = function (callback) {
        var that = this.api;
        this.api.elements('css selector',elementSelector, function (elements) {
            elements.value.forEach(function(element){
              that.elementIdDisplayed(element.ELEMENT,function(result){
                if(!result.value){
                  callback(false);
                 }
               });
             });
            callback(true);
        });
        return this;
    };

};