Click on Element when it is displayed with If and Else condition

[automation9006]

Thanks in advance for your contribution. Please follow the below steps in submitting an issue, as it will help us with addressing it quicker.

Before submitting a new issue, try searching for a similar one here: https://github.com/nightwatchjs/nightwatch/search?state=open&type=Issues.

• [ ] Please do not ask for assistance in the Issues list. Use the Mailing List or StackOverflow to ask questions or seek help.
• [ ] Use a meaningful title that would clearly and concisely explain the problem. For instance:
• not helpful: "Issue with tags"
• much better: "Tags don't work when combined with --skiptags option in some cases"
• [ ] Include a sample test (for complex scenarios) which would reproduce the problem you're experiencing. The test should be against a public url. The test and other info should be posted inline, attachments will not be accepted;
• [ ] Include the verbose output, if possible (run nightwatch with --verbose argument);
• [ ] Also include: Nightwatch version, Node.js version, OS version and Selenium server version (including any driver version if applicable);
• [ ] Please try to avoid sending issues you have with Selenium (e.g. works perfectly in ChromeDriver but not in Safari)

[automation9006]

Hi Guys,

I'm fairly new to Java Scripting language, Firstly I would like to thank the Nightwatch Js team for providing this wonderful framework doing wonders in browser automation...

Currently I'm stuck with an issue where a button appears randomly and I added a logic as below:

If Button A appears {

// then click on the button

} else {

// verify expected elements to be visible }

Please find the below code snippet of createNewUserPageObject.js

When I run the testCreateNewUser.js

I get an error that .element is not a function where the if condition is written.

****Code Snippet Starts***** const createNewUserCommands = {

    createNewUser: function (userNameEn, userNameLocal, regNo, country) {
        this.waitForElementVisible('@buttonNewUser')
            .click('@buttonNewUser')
            .waitForElementVisible('@buttonCreateNewUserSave')

            .setValue('@inputUserNameLocal', userNameLocal)
            .setValue('@inputUserNameEN', userNameEn)
            .setValue('@inputRegistrationNO', regNo)
            .click('@inputCountryOfRegistration')
            .setValue('@inputCountryOfRegistration', country)
            .click('@buttonCreateNewUserSave')
            .element('css selector', '@buttonOKAlert', function (result) {
                if (result.value.ELEMENT) {

                    .waitForElementVisible('@buttonOKAlert')
                        .click('@buttonOKAlert')
                        .waitForElementVisible('@textGlobalUserID')
                        .getText('@textGlobalUserID', function (globalUserID) {
                            var globalUserIDValue = globalUserID.value;
                            console.log('************ GLOBAL ID :::' + globalUserIDValue + '*******************');
                        })
                        .waitForElementVisible('@linkEdit')

                } else {
                        .waitForElementVisible('@linkEdit')
                        .waitForElementVisible('@textGlobalUserID')
                        .getText('@textGlobalUserID', function (globalUserID) {
                            var globalUserIDValue = globalUserID.value;
                            console.log('************ GLOBAL ID :::' + globalUserIDValue + '*******************');
                        })
                }
            });
        return this;
    }
},

module.exports = {

url: function() {
    return this.api.launch_url;
},

commands: [createNewUserCommands],

elements: {

            buttonNewUser: '#xxxxx',
            buttonCreateNewUserSave: '#xxxxx',
            inputUserNameLocal: 'input[id="xxxxxx"]',
            inputUserNameEN: '#xxxxx',
            inputRegistrationNO:'#xxxxx',
            inputCountryOfRegistration :'#xxxxx',
            buttonOKAlert: '#xxxx',
            buttonCANCELForPMDBAlert: '#xxxxxx',
            textGlobalUserID:'.xxxxx',
            textGlobalUserIDValue:'.xxxxxx',
        }

} *** Code Snippet Ends****

Any Advise to fix is much appreciated !

Thanks in Advance !

[sandeepthukral]

I believe this is a pageObject file. Here, 'this' refers to the page object, not the 'browser' or 'client' object. The function .element (or any other function mentioned in the section WebDriver Protocol on http://nightwatchjs.org/api/#protocol) are functions on the 'browser' or 'client' object. You can refer to this by using this.api.

So your code should change to

             .setValue('@inputCountryOfRegistration', country)
            .click('@buttonCreateNewUserSave')
            .api.element('css selector', '@buttonOKAlert', function (result) {
                if (result.value.ELEMENT) {

Also, in some cases, you need to type var self = this and use self instead of this in callbacks.

this is the most awesome and least understood thing in JS