Best Practices for Implementing E2E (End-to-End) UI Tests

Writing UI tests that are resilient and easy maintainable is hard. Everyone knows that UI tests are slow and flaky but using a few best practices can make the job of implementing and maintaining UI tests a little more easier.

Here are some best practices that we found useful:

1. use the page object model/robot pattern; this makes the tests easier to understand and update
2. make the tests run independently from one another and still pass; not fulfilling this will make your tests flaky and give weird behaviours on different environments
3. use data-*(data-test/data-testid) attributes so that we can keep the tests independent from the changes in the CSS or JS (ex. button id=”main” class=”btn btn-large” data-test=”submit-login-btn”); this will make your tests more resilient to changes in CSS or JS
4. use more assertions in a single test as the framework should give you enough information related to which check failed; also UI tests take a long time to go to a page so it’s preferable to have more assertions on that page; this will take the number of tests lower and a side effect will also be the running time of the tests will go down
5. clean up the state before each test run and at the end of the test using beforeEach / afterEach; this will improve reliability and make the tests less flaky
6. do not use wait for arbitrary periods of time; instead use assertions that wait for a specific condition to be met; this will make the tests less flaky and avoids weird fails in the tests
7. always set the start url in the context of your test; do not set as start url that needs an entire flow to be run so that we get to what we want to test; this will lower the execution time of the test suites and avoid fails triggered by bugs in different parts of the application which are not to be tested by the respective test suite
8. talk to 3rd party services via their API not by visiting another web app; this will decrease flakiness of the tests and lower the execution time of the test suites

Written by Bogdan Vazzolla.

LoadFocus — is an easy to use cloud testing tool, and you don’t need any setup, it runs from the browser. It helps you understand better your Website’s and WebServices’ performance and find potential bottleneck before your customers do. Run a free website speed test today.