Playwright’s Auto-Wait Strategy

A More Efficient Way to Wait for Elements in Test Automation

Waits are crucial in test automation to ensure that the script waits until the specified condition is met. This is important because web pages and applications can take time to load, and if the script tries to interact with an element before it’s ready, it will fail. Two types of waits are implicit and explicit. Implicit waits apply to the entire test script and tell the automation tool to wait for a certain amount of time before throwing an exception if the element is not found. Explicit waits are more specific and let you wait for a particular condition to be met, such as an element being visible or clickable.

Playwright comes with a built-in auto-wait strategy that waits for elements to be visible, clickable, and ready before executing actions. This strategy can be customized to wait for specific conditions, such as the presence of an element or the loading of a page. Since the auto-wait strategy is applied to all actions, you don’t need to add explicit waits in your test scripts.

To ensure expected behaviour, the Playwright checks elements before executing actions. It waits for relevant checks to pass and performs the requested action only after. If the checks do not pass within the timeout, the action fails with a TimeoutError. The playwright has a list of actionability checks for each action.

Check if elements are attached, visible, stable, enabled, editable, and receive events to determine their actionability.

• The attached elements are connected to a Document or ShadowRoot.
• Visible elements have a non-empty bounding box and no visibility:hidden style.
• Stable elements maintain the same bounding box for at least two consecutive animation frames.
• Enabled elements exclude <button>, <select>, <input>, or <textarea> with the disabled property.
• Editable elements are enabled and have no readonly property.
• Elements receive pointer events when they hit targets at the action point.

Checking if an element is actionable help write assertive tests that ensure elements reach an actionable state after certain actions.

The WaitFor() function in Playwright and the cy.wait() function in Cypress are generic functions that allow you to wait for a condition to be met. Both functions take multiple arguments, including the desired condition, the timeout value, and the polling interval.

While the cy.waitUntil() function in Cypress can wait for any condition to be met, the waitForSelector() function in Playwright waits only for the visibility of the element. This makes test scripts more readable and maintainable. Additionally, the waitForSelector() function in Playwright retries failed waits a specified number of times, while the cy.waitUntil() function in Cypress does not, which can prevent flaky tests. However, it's worth noting that the cy.waitUntil() function in Cypress waits for all elements that match the selector, which can make test scripts run slower.

Compared to Selenium’s explicit waits, Playwright’s auto-wait strategy is more efficient. It only waits for the necessary elements, while Selenium’s explicit waits wait for all elements on the page. Playwright’s auto-wait strategy reduces flaky tests by retrying failed waits a specified number of times and makes test scripts more maintainable by eliminating the need for explicit waits.

My recent publication compiled a comprehensive collection of 100 similar typescript programs. Each program not only elucidates essential Typescript concepts and expounds upon the significance of test automation but also provides practical guidance on its implementation using Playwright. This resource will undoubtedly be valuable if you look deeper into similar topics.

Playwright's Cookbook: Recipes with Typescript