I am unable to use the section elements selectors inside section commands

[Adrian Tamas]

Hi,

I am using the Nigtwatch-api in a mocha + chai framework. When I am trying to use the @<element> annotation in section level commands I get the error:

Error while running .locateMultipleElements() protocol action: Given css selector expression "@gettingstartedMenu" is invalid: SyntaxError: '@gettingstartedMenu' is not a valid selector

Here is simple example I made for the nightwatchjs.org website:

Page object "nightwatch.js":

module.exports = {

    url: function () {

        return "https://nightwatchjs.org/";

    },

    elements: {

        page: "#index-container"

    },

    sections: {

        menu: {

            selector: "#navbar",

            locateStrategy: 'css selector',

            elements: {

                gettingstartedMenu: "#navbar > ul > li > a[href=\"/gettingstarted\"]",

                guideMenu: "#navbar > ul > li > a[href=\"/guide\"]"

            },

            commands: [{

                getTextFotGuide: function (callback) {

                    this.api.getText("css selector", "#navbar > ul > li > a[href=\"/guide\"]", callback);

                    return this;

                },

                getTestForGettingStarted: function (callback) {

                    this.api.getText( "@gettingstartedMenu", callback);

                    return this;

                }

            }]

        },

        examples: {

            selector: "#example",

            locateStrategy: 'css selector',

        }

    }

};

The test:

const {

    client,

    createSession,

    closeSession,

    startWebDriver,

    stopWebDriver,

    getNewScreenshots

} = require('nightwatch-api');

const chai = require('chai');

const expect =  chai.expect;

describe('Nightwatch api', function () {

    this.timeout(60000);

    before(async () => {

        await startWebDriver({env: process.env.NIGHTWATCH_ENV || 'firefox'});

        await createSession({env: process.env.NIGHTWATCH_ENV || 'firefox'});

    });

    after(async () => {

        await closeSession();

        await stopWebDriver();

    });

    it.only('works with section commands', async function () {

        const nightwatch_page = client.page.nightwatch();

        await nightwatch_page

            .navigate()

            .section

            .menu

            .getTextFotGuide((result) => {

                expect(result.value).to.contain("Guide")

            })

            .getTestForGettingStarted((result) =>{

                expect(result.value).to.contain("Started")

            })

    });

});

I don't have the same issues with using the annotation in page level commands. The api reference docs shows that it should work like this: https://nightwatchjs.org/api/pageobject/

Has anyone seen anything similar?

[Andrei Rusu]

You're project setup looks very complicated. In version 1.3 you could do something like this in Nightwatch without any external dependencies:

describe('Nightwatch api', function () {

    it.only('works with section commands', async function () {

        const nightwatch_page = client.page.nightwatch();

        await nightwatch_page.navigate();

        const menu = nightwatch_page.section.menu;

        

        menu.expect.element('@guideMenu').text.toContain('Guide');

        menu.expect.element('@gettingstartedMenu').text.toContain('Started');

    });

});

Why not use the existing capabilities? As for your exact problem, you can't use "@" element ids inside page object custom commands. These ids are only parsed when calling commands on page objects or sections.

[Adrian Tamas]

Sorry I was not clear on this: the example here is a PoC since it would not have made sense to use my actual code if the app I am testing is not available to everyone and it is "complicated" to illustrate the issue. The setup of the framework using mocha + chai as the base and nigthwatch-api is configured that way because I am mixing in some API testing and API requests in the UI tests for simple test data setup. However the "complexity" of the framework has nothing to do with the fact that functionality does not work as it should or the documentation is incorrect.

Andrei Rusu: "As for your exact problem, you can't use "@" element ids inside page object custom commands. These ids are only parsed when calling commands on page objects or sections."

Answer: I can absolutely use the @ annotation inside custom commands when adding them at page object level. For e.g. the following code works without any issues:

    search: function(searchTerm) {

        const page = this;

        page.waitForElementVisible("@table", 30000)

            .setValue('@searchField', searchTerm);

        return page;

    },

Furthermore the nightwatch documentation (https://nightwatchjs.org/api/pageobject/) clearly states that you can use the @ annotation inside section commands. Here is an extract from the documentation:

....

  sections: {

    myFooterSection: {

      selector: '#my-footer',

      locateStrategy: 'css selector',

      elements: {

        myLogo: {

          selector: '.my-logo',

          locateStrategy: 'css selector'

        }

      },

      commands: [

        {

          myMoveToLogo: function () {

            this.moveToElement('@myLogo', this.props.myLogoX, this.props.myLogoY);

          }

        }

      ],

  

.....

Now if this functionality does not work properly I don't see the concept of sections of being of any use in the page object paradigm and I would just rather define separate page objects for "sections" of the page as they would be more useful and work better with the page object design pattern.

[Andrei Rusu]

Ok, it looks like a bug then. Could you please file it on Github so we can address it there?

--
You received this message because you are subscribed to the Google Groups "NightwatchJs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nightwatchjs...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/nightwatchjs/a9483081-d00a-4d77-8a55-28c2befdbbf6%40googlegroups.com.

[Adrian Tamas]

Logged https://github.com/nightwatchjs/nightwatch/issues/2283

To unsubscribe from this group and stop receiving emails from it, send an email to nightw...@googlegroups.com.