Use element by css to check if element exists in Protractor

Question

In a protractor end to end test, I want to check if an element exist using element(by.css(...)), my code:

var myElement = element(by.css('.elementClass'));
expect(myElement).toBeUndefined;

This test fails, it says:

    Expected { locator_ : { using : 'css selector', value : 'div[ng-switch-
    when="resultNav"]' }, parentElementFinder_ : null, opt_actionResult_ :
    undefined, opt_index_ : undefined, click : Function, sendKeys : Function, 
getTagName : Function, getCssValue : Function, getAttribute : Function, getText
 : Function, getSize : Function, getLocation : Function, isEnabled : Function, 
isSelected : Function, submit : Function, clear : Function, isDisplayed : 
Function, getOuterHtml : Function, getInnerHtml : Function, toWireValue : 
Function } to be undefined.

After that I tried to use a promise:

element(by.css('.elementClass')).then( functtion(data) {
    expect(data.getText()).toBeUndefined();
});

This results in an error:

Error: No element found using locator By.CssSelector(...)

Yes, I know that no element will be found, but how can I create a working test using element(by.css(...))?

Does anyone know how to achieve this? or is element(by.css()) not the method to use here?

Davin Tryon · Accepted Answer · 2018-03-15T09:43:22.563

102

You can test whether the element is present with isPresent. Here are the protractor docs for the isPresent function.

So, your code would be something like:

var myElement = element(by.css('.elementClass'));
expect(myElement.isPresent()).toBeFalsy();

edited Mar 15 '18 at 09:43

answered Jan 19 '15 at 12:15

Davin Tryon

66,517
15
143
132

Thanks this did it! (see my comment at JB also) – Michiel Jan 19 '15 at 12:27

score 28 · Answer 2 · edited Dec 04 '18 at 09:38

28

You need to test if the element is not present:

expect(element(by.css('.elementClass')).isPresent()).toBe(false);

edited Dec 04 '18 at 09:38

Daan

9,984
2
30
36

answered Jan 19 '15 at 12:15

JB Nizet

678,734
91
1,224
1,255

Thanks a lot, I was sure I tried something like this, I feel stupid... Do you have any idea why the 'isPresent' method is not mentioned in the object in my failure message? – Michiel Jan 19 '15 at 12:26
2

Because isPresent is added by protractor as a **prototype**. The ones you see in the error message are inherited from webdriver **as a property** of element. console.log and throws will not show prototypes by default – hankduan Jan 19 '15 at 18:53
1

Your code appears to be checking that it is NOT present. Can you explain please? – Alex Worden Oct 23 '15 at 06:40
Yes, that's what the OP wanted to achieve. – JB Nizet Oct 23 '15 at 07:19

score 1 · Answer 3 · edited Oct 19 '20 at 20:26

1

Truthy and falsie refer to values that are evaluated to true and false after being coerced to a boolean unless you want your function to return different types of values.

var myElement = element(by.css('.elementClass'));
myElement.isPresent().then(function (elm)
{
    if (elm)
    {
        console.log("... Element was found")
        expect(myElement.getText()).toBeUndefined();
    } else {
        console.log("... Element was not found")
    }
});

edited Oct 19 '20 at 20:26

Quality Catalyst

6,531
8
38
62

answered Oct 15 '20 at 14:06

John Mburu

11
5

5

John, any chance to explain your answer please and why this is a better solution than the accepted answer with nearly 100 upvotes? – Quality Catalyst Oct 15 '20 at 21:25
truthy and falsy refer to values that are evaluated to true and false after being coerced to a boolean. Unless you want your function to return different types of values. – John Mburu Oct 19 '20 at 08:23
Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Oct 19 '20 at 09:11

score 1 · Answer 4 · edited Apr 22 '21 at 13:02

1

same thing, but different syntax

let elem = $('.elementClass');
let elemIsPresent = await elem.isPresent();
expect(elemIsPresent).toBe(false);

edited Apr 22 '21 at 13:02

answered Feb 09 '21 at 01:41

Sergey Pleshakov

7,964
2
17
40

Use element by css to check if element exists in Protractor

4 Answers4

Linked