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?

Radarman

Answer 1

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();

Vestavestal

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

Answer 2

You need to test if the element is not present:

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

Dawnedawson

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? – Radarman

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 – Gautea

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

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

Answer 3

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")
    }
});

Torrlow

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

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. – Torrlow

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. – Coyne

Answer 4

same thing, but different syntax

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

Outdoors