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 👏 😊