Protractor test: Best Practices

Writing a test case is not a big deal  but writing a good test cases is. You must know which protractor method to use when. Here are some of the best practices to be followed while writing a test case.

browser.sleep() VS browser.wait()

I will try to explain it better with an example. Let’s assume we hit a button and after that a pop-up opens up. Now to test this we want a pause after we hit the button.

Now when we use sleep(5000) i.e sleep of 5 sec, after we hit the button. browser will stop functioning for 5 sec after button is hit and after 5 sec it starts functioning i.e it starts doing actions on pop-up. Now when we use wait(popup.present(),5000), it will wait for pop-up to be rendered within 5 sec.

So, what’s the difference between the two, Sleep is going to pause for full 5 sec even though pop-up might be displayed in 1 sec only but wait is going  pause for only 1sec if pop-up displays in 1 sec. You see use wait is more beneficial the sleep.

So it is better to use browser.wait() instead of browser.sleep()

toBe() vs toEqual()

toEqual() is similar to equivalence (==) in JavaScript, while toBe() is similar to strict equivalence (===) in JavaScript.

So, if we have two objects A and B,
var A={
firstName=Varun,
lastName=Sukheja
}
var B={
firstName=Varun,
lastName=Sukheja
}

then,
expect(A).toEqual(B);   // returns true
expect(A).toBe(B);         // returns false

toBe(true) vs toBeTruthy() vs toBeTrue()

toBe(true) works same as JavaScript strict equivalence (===)

  return {
        pass: actual === expected
      };

toBeTruthy()
When something is truthy it may or may not be a boolean, but the “cast” value of is a boolean.

return {
        pass: !!actual
      };

Some of the values which are truthy are:

true == true;       // truthy
1 == true;           // truthy
"hello" == true;     // truthy
[1, 2, 3] == true;   // truthy
[] == false;         // truthy
false == false;      // truthy
0 == false;          // truthy
"" == false;         // truthy
undefined == false;  // truthy
null == false;       // truthy

toBeTrue()  checks if the value returned is true

return actual === true ||
    is(actual, 'Boolean') &&
    actual.valueOf();

Using toBe(true) is the best option.

isPresent() vs isDisplayed()

isPresent() checks if element exists in DOM and may be visible or hidden. On the other hand isDisplayed() checks if element exists in DOM and also visible.

EC.presence() vs EC.visibilityOf()

presence() checks an element in present in the DOM and may or may not be visible.
visibilityOf() checks an element in present in the DOM and also visible i.e has height and width.