Use element by css to check if element exists in Protractor
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?
Solution 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();
Solution 2:
You need to test if the element is not present:
expect(element(by.css('.elementClass')).isPresent()).toBe(false);
Solution 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")
}
});
Solution 4:
same thing, but different syntax
let elem = $('.elementClass');
let elemIsPresent = await elem.isPresent();
expect(elemIsPresent).toBe(false);