End-to-End testing using protractor with async-await

I’ve been using Protractor for more than an year, writing automated, end to end tests for both Angular Applications and Non-Angular Applications (eg .React Apps).I used promies to write the tests but with the introduction of async-await with node version 7.6 , writing end to end tests is much simpler and more fun . I would want to share some of the lessons I learnt along the way.

The minimum node version you should use is 8.0.0 and the minimum jasmine version you should use is 2.7

You may be knowing that Protractor is a testing API written by Google in support of AngularJS. It is a wrapper around the Selenium WebDriver API for JavaScript.

Protractor is heavily promise-driven.Protractor is built for asynchronous execution.

For instance :

element(by.css('.first-button')).click() returns a promise and you should resolve it to queue up tasks in a synchronous manner. I will illustrate you this with three sample code blocks where I have compared promises and async await and gave the sample code to explain how to write them.

Using async/await we need not use control flow in javascript tests.

Protractor and the Promise Manager

The WebDriverJS library uses a promise manager to ease the pain of working with a purely asynchronous API. Rather than writing a long chain of promises, the promise manager allows you to write code as if WebDriverJS had a synchronous, blocking API (like all of the other Selenium language bindings).

Selenium promise manager is now deprecated.

Don’t forget to turn off control_flow, you cannot use a mix of async/await and the control flow: async/await causes the control flow to become unreliable.

Key things to note when using async/await in your specs

  • wrap our asynchronous function with “async”
  • “await” keyword to each async operation.
  • Don’t forget to turn off control_flow in the protractor.conf.js file as illustrated above.
  • You may also use Page Object with async await.

Sample spec code below:

Benefits of Using Async/Await with Protractor

  • More readable and manageable specs.
  • No need to use any third party async library to avoid long promise chains.
  • managing asynchronous loops is easier with async/await.
    For instance , If you have to click on a <td> with a certain text only , you have to search it and protractor being heavily asynchronous you have to use some third party async-loop library.
    In such scenario async/await is a boon as illustrated in the sample code below:

Some Useful Tips for protractor tests

I have followed certain practices that has helped me manage & maintain the test code easily and I would like to share them with you.

  • Use the model/concept of Page Object when writing protractor tests.
  • Follow a naming-convention for classes used to match UI elements in your tests and application code. Something like:
     <button class="e2e-form-submit"> in your application code. The class prefix shows that this element is used in your end-to-end tests and not for styling purposes.
  • Use Async Await to write readable and manageable tests, its better than using third party libraries to manage the complicated asynchronous flow.
  • Add consoles and debuggers in your specs.
  • Handle timeouts explicitly in your tests.

Conclusion

Using async/await makes life simpler for developers and testers and hence I recommend using async/await with your protractor tests.

Thanks for reading!
If you liked this post, please share, comment and give few 👏 😊

You may also like :