Check if an element is displayed or not

Question

I'm trying to check if an element is visible or not but I get the following error:

Failed: No element found using locator: By(css selector, *[id="button--copy"])

Though this is the point the element shouldn't be visible but instead of going into my if statement it just exits with that error.

Can anyone explain why this is happening?

element(by.id('button--copy')).isDisplayed().then(function (isVisible) {
    if (isVisible) {
        //do stuff
    }
    else{
        //do stuff
    }
});

Do you have jQuery support for your project? Then it will be far easier. — Alexis, Mar 23 '18 at 11:24
Possible duplicate of [How to use protractor to check if an element is visible?](https://stackoverflow.com/questions/22850271/how-to-use-protractor-to-check-if-an-element-is-visible) — Nope, Mar 23 '18 at 11:25
@Nope I seen that answer I don't see how it helps. It causes my test to fail when it shouldn't. — Dan Murphy, Mar 23 '18 at 11:30
Are you talking about it being "visible" or present? That error message looks a lot like the element doesn't exist to me — David A, Mar 23 '18 at 11:33
If it shows you the basic syntax that works and you using that exact same syntax doesn't work for you then it should help you identify that your problem might just be unrelated to your code itself but possibly hints you to issues with the DOM or maybe even selectors. - That's how it helps. - Though by the sound of it it seems "visibility" is not what you are looking for but possibly existence. If that is so then you cannot query a DOM element which isn't in the DOM for it's visibility. You check if the selector returns a match first. — Nope, Mar 23 '18 at 11:34
@DavidA Visible. The element does exist. My tests before hand make it appear or not. I've to run through all my tests in different languages. The first time I run the tests it is present and works fine, any time after that the button won't appear and it shouldn't. So getting the error message is wrong and I don't know a work around — Dan Murphy, Mar 23 '18 at 11:38
That a previous test is showing or hiding the element is crucial information that should be in the question as that might be the reason why the element is no longer there after that first test? How do you hide or show the element in your previous Test? That could have a direct impact on your test you have the issues with. - Off course if you have your own setup code for each test then the previous test doesn't matter but the setup code would be important to see than instead. — Nope, Mar 23 '18 at 11:44
@Nope Ya sorry I should of mentioned, just this has me stressed. It does have a direct impact on the test. Depending on what I select in a drop down menu in a previous test causes the button to appear or not. If the button does appear I click it and continue as normal, if it does not appear I've to select something else in the drop down. That's why the test failing when the element is not visible causes major issues — Dan Murphy, Mar 23 '18 at 11:51
Have you tried not depending on the previous test @DanMurphy ? Not knowing your setup off ocurse, in general having tests rely on results from previous tests is not good design as you can see here, your consecutive tests have issues now. I would recommend to have a separate setup for each test to ensure they all only pass or fail for reasons in control of the test itself. Your previous test might be missing a check that in the end when the element is made visible/hidden it actually has done so correctly and didn't remove the element from the DOM instead? Just brainstorming :) — Nope, Mar 23 '18 at 13:00
@DanMurphy The benefit in separate setup is that you don't get false negative or positives as theoretically, you current test isn't broken but the setup for it is incorrect as it seems no element is in the DOM, which is part of it's pre-test requirements that it is in the DOM, either visible or hidden,..but always existing. Basically your previous test seems to highlight a bug in the code whereby the element is removed instead of hidden (possibly?) — Nope, Mar 23 '18 at 13:02
@Nope I have to depend on the previous test. I select something from a drop down in the previous test. This causes the button to appear or not. Also I can't know if the button will be there or not so the dependency is necessary — Dan Murphy, Mar 23 '18 at 13:40
@DanMurphy Should the button exist in the DOM or not? Existing and visible is 2 different things. If your button should **always** exist in the DOM and either be hidden or visible then the code in your your previous test has a bug as it should never end in a state where the button is not in the DOM. If it is expected and perfectly valid that the button might not be in the DOM to begin with then check if it exists before you check if it is visible. This show how you can do that I think: https://stackoverflow.com/questions/28024342/use-element-by-css-to-check-if-element-exists-in-protractor — Nope, Mar 23 '18 at 14:21

score 1 · Answer 1 · answered Mar 24 '18 at 04:09

It's a common misunderstanding that isDisplayed() also checks for Presence. It doesn't

You have to first check whether the element is present on the DOM before checking whether its displayed; You can do this by using isPresent()

Once you've established that its present, go ahead and do the isDisplayed() check.

Like this

element(by.id('button--copy')).isPresent().then(function (isPresent) {
    if (isPresent) {
        element(by.id('button--copy')).isDisplayed().then(function (isDisplayed) {
            if (isDisplayed) {
                //Visible
            }
            else {
                //Not visible
            }
        });
    }
    else{
        //Not visible
    }
});

You can extract this into a handy function if you want to avoid some of the repetition.

Danijel · Answer 2 · 2018-03-23T12:18:12.887

-1

The easiest way is this:

var foo = element(by.id('foo')).isDisplayed();
if (isVisible) 
{
     //do stuff
}
else{
    //do stuff
}

edited Mar 23 '18 at 12:18

answered Mar 23 '18 at 11:28

Danijel

64
1
7

But then the test will fail if it is not visible. When running the test I won't know if it will be visible or not that's why I need to check both – Dan Murphy Mar 23 '18 at 11:31
Then you just save the result of isDisplayed() and then check. – Danijel Mar 23 '18 at 12:19
That can be done if there element is there. If it is not we come back to the original issue, the test fails because the element cant be found. Your way is just going in circles – Dan Murphy Mar 23 '18 at 12:57
Then please update the question. If the element exists is not same as if is visible. – Danijel Mar 23 '18 at 13:28

Check if an element is displayed or not

2 Answers2