Before performing an action with an element, we just need to make sure of the presence of the element on the web page. When we try to interact with an element, if it is not present, it will throw an error/exception, so it is always important checking for the presence of the element.

Example : - When we click a Submit button, we know that we have to wait a second or two for something to happen. Here before trying to test the response, we can always check for element/s that are expected.

In protractor, there are multiple ways to check if an element is present in the DOM. Let us see them with examples :-

In previous article we have discussed about locators to find the elements on web page in protractor

1. element(locator).isPresent()
Checks whether the element is present on the page. It returns true if the element is present on the page or returns false.

NOTE: - It only check for element present in the DOM while it's not displayed

This works with element(locator) or ElementFinder and not with ElementArrayFinder.

We can perform all the actions that we do on WebElement like (i.e. click, sendkeys, getText) using ElementFinder.

And ElementArrayFinder is an array of WebElements which is used to perform chain of actions. The most commonly used to perform actions in a dropdown. First we get WebElements and iterate a list of WebElements to perform action on single WebElement.

// Check for Element present.
expect(element(by.id('person.create')).isPresent()).toBe(true);

And to check if element does not exist we expect it to be false.

// Element not exists.
expect(element(by.binding('.item-hide')).isPresent()).toBe(false);

2. element.all(locator).isPresent() -

It returns true if there are any elements present that match the finder.

element.all - Finds collection of elements by css like below example.

expect(element.all(by.css('.items)).isPresent()).toBe(true);

3. element(locator).isElementPresent() -
This is similar to the "element(locator).isPresent()" except this checks whether the subLocator is present on the webpage.

expect(element(by.css('.item')).isElementPresent(by.css('.p-item'))).toBe(true)

The same can be written using element(locator).isPresent()

expect(element(by.css('.item')).element(by.css('.p-item')).isPresent()).toBe(true);

All the above works good with Angular applications and Angular elements. And as they are extension of ElementFinder so waits for Angular to settle on page before executing any action.

4. browser.isElementPresent() -
This takes an element as a parameter and check if this element is present on the page.

As this is an implementation of webdriver and it doesn't wait for angular application to settle. This should be best used with Non-Angular pages.

5. element.isDisplayed() -
Check whether the element is currently displayed on the page. It returns a boolean value if the element is displayed or not.

var elem = element(by.css('.follow'));
    expect(elem.isDisplayed()).toBe(true);

6. element.isEnabled() -

Checks whether the DOM element represented by this instance is enabled or disabled

Example

<input id="item" disabled=true>

var elem = element(by.id('item'));
expect(elem.isEnabled()).toBe(false);

When the element is not found, it throws error message as below :-

Message Failed: No element found using locator: By(css selector, .ng-empty)

And the stack will be followed as : -

Stack:
NoSuchElementError: No element found using locator:

7. ExpectedConditions -
These are useful especially when working with non-angular apps. Each condition returns a function that evaluates to a promise.

ExpectedConditions are used for checking that an element is present on the DOM of a page and visible. We have discussed Selenium ExpectedConditions with examples in previous article in Java

We can use ExpectedConditions along with browser.wait(). browser.wait() expects a specific value/condition.

To click on any element, we can check for an element to be visible and enabled, such that we can click on it.

browser.wait(EC.elementToBeClickable($('.item')),3000); //wait for condition to be true.

To check, if the given text is present in the element, we can use something like below :-

browser.wait(EC.textToBePresentInElement($('.item'), 'Howdy'),3000);

We can also check for stalenessOf an element which is not attached to the DOM of a page by using : -

browser.wait(EC.stalenessOf($('.item')),3000);

There are multiple types Expected Condition to wait for element in protractor. View all ExpectedConditions in Protractor.