CODEWITHSUNDEEP
javascriptseleniumnightwatch.js
crimsonsky2005
crimsonsky2005

Reputation: 2963

nightwatch.js assert on multiple page sections

I am working with nightwatch.js i have a page file that looks like this: 

sections: {
    table: {
        selector: '.sr-filterable-data-layout--collection',
        elements: {
            header: {
                selector: '.sr-collection--header'
            },
            body: {
                selector: 'sr-collection--body'
            }
        }
    },
    filters: {
        selector: '.sr-filterable-data-layout--filters',
        elements: {
            filterByName: {
                selector: '#filter-name'
            }
        }
    },
    actions: {
        selector: '.sr-entities-actions',
        elements: {
            addButton: {
                selector: '.mdi-content-add'
            }
        }
    }
},
commands: [{
        editEntity(options) {
            return this.section.body();
        },
        verifyPageload() {
            return (
                this.section.filters.waitForElementVisible('@filterByName') 
                    .section.table.waitForElementVisible('@header')
                    // .section.actions.waitForElementVisible('@addButton')
                    .assert.title(this.props.title)
            );
        }
    }
]

asserting on each of the elements individually works but when i try to chain the assertions like this: 

this.section.filters.waitForElementVisible('@filterByName') 
                    .section.table.waitForElementVisible('@header')

it fails with the following error:

✖ TypeError: Cannot read property 'waitForElementVisible' of undefined

any help regarding how to chain these asserts together will be much appreciated

Upvotes: 1

Views: 1072

Answers (2)

crimsonsky2005
crimsonsky2005

Reputation: 2963

while the comments here suggest ways to circumvent the issue. i finally stumbled upon the way to chain multiple actions on different sections by chaining .parent after the first call to return the root of the page and not the section like this: 

verifyPageload() {
            this.section.table
                .waitForElementVisible('@header')
                .parent.section.filters.waitForElementVisible('@filterByName')
                .parent.section.actions.waitForElementVisible('@addButton')
                .assert.title(this.props.title);
            return this;
        }

Upvotes: 1

Eliran Malka
Eliran Malka

Reputation: 16263

You cannot do that, as section is a page property, while waitForElementVisible returns a reference to the client instance ("browser"), not to the page.

Just split the commands, there's really no reason to chain them.

Another thing; the return () block is redundant here, just return the assertion result directly:

verifyPageload() {
    // waitForStuff...
    return this.assert.title(this.props.title)
}

Upvotes: 1

Related Questions