Life Saving Protractor Utilities to fix flaky end-to-end tests

Share on facebook
Share on google
Share on twitter
Share on linkedin

A central part of testing Angular apps is to be able to automate the end-to-end testing so you don’t manually have to click through the app every time. This sounds reasonable in theory but often end-to-end tests can be fragile and expensive to maintain. When end-to-end tests become flaky they start to become useless:

This post covers some tricks for solving this by creating some helpers that make the tests more stable and simple to write.

These helpers are designed to make your test behave more like a real tester, by including behavior such as wait for an element to be visible, retry expects if the expect is not true immediately and retry flaky tests, that eg. has an unstable dependency.

Wait for element

A good pattern for selecting an element is to wait for it to be available and then select it. That way you don’t need to worry about eg. some spinner overlay to disappear before selecting.

This is implemented using the Browser.Wait method, which will periodically evaluate if an expression is true and then resolve a promise if the expression is true within the specified timeout.

Expect or retry

This is similar to “wait for element” but will instead wait for a provided boolean expression to become true until a given timeout.

This is again done using the Browser.Wait method, by evaluating a provided boolean expression and determine if it is true. If true this will return a resolved promise with true or else it will keep evaluating till the timeout runs out.

Retry test

Retry tests should be used when a test simply can’t be made stable with the previous helpers. This can often be caused by an external dependency that end-to-end test is calling. Often you will see end-to-end tests mock out the external dependency, but if you somehow need to involve the external dependency to create a meaningful test, this is the helpers to use.

A good tool to setup retry in protractor is Protractor-retry.

Conclusion

In this post, we looked at how to fix flaky protractor tests using three helpers. First, the element helper will ensure an element is visible before it is expected on. Second, the wait for expect helper will wait for a boolean expression to be true until a given timeout.  Third, if a test can’t be made stable with the above two helpers, simply replaying the test might be the way to deal with that.

You can find a complete code example on my Github.

Thanks for reading. Remember to comment, share and follow me on Twitter.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

How to do Cypress component testing for Angular apps with MSW

In this post, we will cover how to do Cypress Component testing with MSW (mock service worker) and why it’s beneficial to have a mock environment with MSW. The mock environment My recommendation for most enterprise projects is to have a mocking environment as it serves the following purposes : * The front end can

Read More »

High ROI Testing with Cypress Component Testing

Testing is one of the most struggled topics in Angular development and many developers are either giving up testing altogether or applying inefficient testing practices consuming all their precious time while giving few results in return. This blog post will change all this as we will cover how I overcame these struggles the hard way

Read More »

Announcement: Angular Testing Workshop

I’m announcing a new live workshop: Angular Testing Workshop. It will be half-day workshops over three days, 100% online, where we will learn all the industry best practices with Angular testing so you can apply them in your daily work – taking straight out of my experience with doing Angular testing for big projects. The

Read More »

The Most Common Cypress Mistakes

Cypress has become the preferred way of doing UI testing of Angular apps by many Angular experts. It offers great improvements over Selenium-based testing tools by making the testing experience more like a real user using the built-in retry mechanism of assertions and commands (eg. click on the element), a user-friendly GUI which makes it

Read More »