How to use if else statement if there is an element presented or not

Question

First of all here is my code....

describe('Details page', function () {

    //
    // Email Field
    //

    it('Entering Email', function (done) {

        browser.driver
            .then(() => utils.presenceOf(detailsSpecs.getEmail()))
            .then(() => utils.sendKeys(detailsSpecs.getEmail(), userData.email))
            .then(() => done());
    });


    //
    // Click Next Step Button
    //

    it('Clicking Next Step button', function (done) {

        browser.driver
            .then(() => utils.click(detailsSpecs.getNextStepButton()))
            .then(() => done());
    });


    //
    // Wait for stock to fully load
    //

    it('Waiting for stock to fully load', function (done) {

        setTimeout(function () {
            done();
        }, 5000);
    });


    if (element.all(by.className("generic-error-heading")).first()) {

        it('Clicked all remove button', function (done) {

            let allBtns = detailsSpecs.getRemoveButtonDesktop();

            allBtns.count()
                .then(function (countElement) {

                    console.log('Find buttons: ', countElement)

                    for (let i = 0; i < countElement; i++) { // let variables are scoped to the immediate enclosing block denoted by { }
                        utils.click(detailsSpecs.getRemoveButtonDesktop().first())
                        browser.sleep(1000) // sleep 1s
                    }
                })
                .then(() => {
                    done();
                })

        });


        //
        // Click Next Step Button - Not needed if two above is returning 0
        //

        it('Clicking Next Step button', function (done) {

            browser.driver
                .then(() => utils.elementToBeClickable(detailsSpecs.getNextStepButton()))
                .then(() => utils.click(detailsSpecs.getNextStepButton()))
                .then(() => done());
        });
    } else {
        it('DONE', function (done) {

            browser.driver
                .then(() => console.log("YES"))
                .then(() => done());
        });
    }
});

I have been trying to speed up my test cases by skipping if a element is not presented. If its not presented then we skip everything inside the if-statement else we do the test cases.

I have a element that I want to look after which is element.all(by.className("generic-error-heading")).first() (Should be 2 but for me its just matters that it is presented or not)

My problem is that right now it just skips it and does the Else statement even though the element is presented in the HTML.

My question is, How can I make a correct if-else statement where it actually do the if-statements if there is a element presented else skip?

Any code within a spec file but outside of an It block will be executed before **any** test code executes so you cannot work with elements in this way. This is why you are seeing an angular sync issue, the code to navigate to the browser has not executed — DublinDev, Mar 06 '20 at 14:43
Oh okey, that make sense, what do you recommend me to do in that case? @DublinDev because I am pretty new with this but I had a feeling it could be about that.. — PythonNewbie, Mar 06 '20 at 14:44
Firstly, if you are just getting started I would recommend using `async/await` to handle the promises and disabling the promise manager. Long term your tests will become much simpler. See [here](https://imgur.com/ig1xdCi) for an example of how much simpler it appears.There are a lot of articles which can guide you moving to async/await syntax — DublinDev, Mar 06 '20 at 15:04
Oh crap, Am I able to change that already by now? Is it possible you can send it by hastebin or as a answer maybe? However I am not sure if the if else statement will work for you? — PythonNewbie, Mar 06 '20 at 15:06
Changing this one script will be quick once you understand what is required. Is your code base already large? Making this change can be difficult the more code you have already written — DublinDev, Mar 06 '20 at 15:07
@DublinDev Am I still able to use .then? Because I believe its a mocha which shows you the test pass/fail — PythonNewbie, Mar 06 '20 at 15:08
@DublinDev I would say I only have 4 .js files which is not very long honestly. — PythonNewbie, Mar 06 '20 at 15:10
Then I would invest the effort into making the switch to `async/await` now and you will save effort long term. This [article](https://medium.com/@anandujjwal/end-to-end-testing-using-protractor-with-async-await-46dc11d948d0) offers some good info on it. Note that this will not solve your original question but will be a good start in simplifying your framework — DublinDev, Mar 06 '20 at 15:12
@DublinDev Just read and it seems like its better advantage of using await than using .then, feels more like .then is more "outdated" than await. Also alot easier to code where it shorts by ALOT... — PythonNewbie, Mar 06 '20 at 15:19
@DublinDev btw, you line 71 on the left picture about countElement, How would you apply it on ur right picture because I believe you did wrong? — PythonNewbie, Mar 06 '20 at 18:19
@DublinDev I tried to follow up your picture with removing and I get an error saying ` TypeError: allBtns.count is not a function` when I tried to follow your picture of awaits. — PythonNewbie, Mar 09 '20 at 08:27
Yeah the reason for that is that once getRemoveButtons() is awaited then it becomes an array of elementFinder objects instead of an ElementFinderArray obj. I previously answered a question [around this here](https://stackoverflow.com/a/60170389/10836734). If you remove the await in this line `let allBtns = detailsSpecs.getRemoveButtonDesktop()` it should work — DublinDev, Mar 09 '20 at 11:02

amato rahman · Answer 1 · 2020-03-09T12:55:34.407

-1

change if (element.all(by.className("generic-error-heading")).first()) by:

 if (expect(element.all(by.className("generic-error-heading")).first().isDisplayed()).toBe(true))

edited Mar 09 '20 at 12:55

answered Mar 06 '20 at 14:21

amato rahman

1
5

I do get `Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined. This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping. See http://git.io/v4gXM for details"` – PythonNewbie Mar 06 '20 at 14:27
add browser.waitForAngular(); – amato rahman Mar 06 '20 at 14:36
Where should I add that if I might ask? – PythonNewbie Mar 06 '20 at 14:37
after describre – amato rahman Mar 06 '20 at 14:39
Okey so I had to do waitForAngularEnabled but when having it, nothing happens, the website just get stuck.. – PythonNewbie Mar 06 '20 at 14:40
Could not find Angular on page https://www.testing.com/en/p/-60426806/ : retries looking for angular exceeded – PythonNewbie Mar 06 '20 at 14:40
your test pass before? – amato rahman Mar 06 '20 at 14:42
Yes, if I have it on false then it is able to proceed on the website I am trying to do test on. – PythonNewbie Mar 06 '20 at 14:43
@amatorahman, `isDisplayed()` method in ElementFinder method will always return a promise, not a Boolean value which you cannot use it in an if condition. – Sudharsan Selvaraj Mar 08 '20 at 17:32

How to use if else statement if there is an element presented or not

1 Answers1