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-15 09:43:22Z

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, 2018 at 9:43

answered Jan 19, 2015 at 12:15

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michiel Over a year ago

Thanks this did it! (see my comment at JB also)

Daan · Accepted Answer · 2018-12-04 09:38:14Z

28

You need to test if the element is not present:

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

edited Dec 4, 2018 at 9:38

Daan

10.4k2 gold badges32 silver badges36 bronze badges

answered Jan 19, 2015 at 12:15

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

4 Comments

Michiel Over a year ago

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?

hankduan Over a year ago

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

Alex Worden Over a year ago

Your code appears to be checking that it is NOT present. Can you explain please?

JB Nizet Over a year ago

Yes, that's what the OP wanted to achieve.

Quality Catalyst · Accepted Answer · 2020-10-19 20:26:14Z

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, 2020 at 20:26

Quality Catalyst

6,8318 gold badges41 silver badges65 bronze badges

answered Oct 15, 2020 at 14:06

John Mburu

115 bronze badges

3 Comments

Quality Catalyst Over a year ago

John, any chance to explain your answer please and why this is a better solution than the accepted answer with nearly 100 upvotes?

John Mburu Over a year ago

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.

Mark Rotteveel Over a year ago

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.

Sergey Pleshakov · Accepted Answer · 2021-04-22 13:02:17Z

1

same thing, but different syntax

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

edited Apr 22, 2021 at 13:02

user15614102

answered Feb 9, 2021 at 1:41

Sergey Pleshakov

9,1362 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

Use element by css to check if element exists in Protractor

4 Answers 4

1 Comment

4 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related