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
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.
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
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.
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 :