In protractor, browser.isElementPresent vs element.isPresent vs element.isElementPresent

Question

In protractor, there are, basically, 3 ways to check if an element is present:

var elm = element(by.id("myid"));

browser.isElementPresent(elm);

elm.isPresent();

elm.isElementPresent();

Are these options equivalent and interchangeable, and which one should be generally preferred?

Answer 1

All the functions are shown below work in a similar way but they all have a few subtle differences. Here are a few differences that I found -

 elm.isPresent() -

1. It is an extension of ElementFinder and so waits for Angular to settle on a page before executing any action.

2. It works when elm is an element(locator) or ElementFinder and not ElementArrayFinder. If multiple elements are returned using the locator specified then the first element is checked if it isEnabled() in the DOM. It doesn't take any parameter as input.

3. Works best with Angular pages and Angular elements.

4. First preference to use whenever there's a necessity to search out if an element is present.

elm.isElementPresent(subLoc) - (When there is a sub locator to elm)

1. It is an extension of ElementFinder and so waits for Angular to settle on the page before executing any action.

2. Used to check the presence of elements that are sub-elements of a parent. It takes a sub locator to the parent elm as a parameter. (the only difference between this and the elm.isPresent())

3. Works best with Angular pages and Angular elements.

4. First preference to use whenever there's a necessity to see if a sub-element of a parent is present.

browser.isElementPresent(element || Locator) -

1. It is an implementation of a web driver and so doesn't wait for angular to settle.

2. Takes a locator or an element as a parameter and uses the primary result if multiple elements are placed using constant locator.

3. Best used with Non-Angular pages.

4. First priority to use when testing on non-angular pages.

All of the above points identifies the existence of an element in DOM and returns a Boolean value. Though angular and non-angular features don't affect the usage of these methods, there's an added advantage when the method waits for angular to settle by default and helps avoid errors just in case of angular like element not found or state element reference exceptions, etc.