# Eliminate Delays with Playwright Auto-Waiting > Learn how to avoid delays and 'waitFor' statements in your end-to-end tests by using Playwright's auto-waiting feature. Simplify your testing process with ease. Source: https://www.checklyhq.com/blog/playwright-auto-waiting/ --- [Blog](https://www.checklyhq.com/blog/) / [Checkly Community](https://www.checklyhq.com/blog/tag/community/) / [Playwright](https://www.checklyhq.com/blog/tag/playwright/) # Avoid Delays and "waitFor" Statements Using Playwright Auto-Waiting [Nočnica Mellifera](https://www.checklyhq.com/blog/author/nica-mellifera/) June 14, 2023 · Updated October 16, 2024 End-to-end testing is a critical phase in the development lifecycle, ensuring that applications behave as expected under simulated real-user scenarios. However, one of the longstanding challenges in this domain has been the management of asynchronous events, such as waiting for elements to become interactive or visible on a webpage. Traditionally, developers have resorted to implementing delays or "waitFor" statements to overcome these hurdles, a practice that not only introduces potential flakiness but also increases test execution time. Enter Playwright's auto-waiting feature, a game-changer that significantly simplifies the process, making tests more reliable and maintainable. ## Understanding the Challenge In end-to-end testing, particularly when dealing with dynamic web applications, testers frequently encounter situations where UI elements are not immediately actionable. These elements could be buttons that become enabled only under certain conditions, modals that appear upon triggering specific actions, or fields that await input once they're activated. Traditionally, handling these scenarios involved littering test scripts with arbitrary delays or explicit "waitFor" statements, hoping that the targeted elements would reach the desired state within the specified wait time. This approach, however, is inherently brittle and prone to errors, as it relies heavily on guesswork and often results in either wasted time (when waits are too long) or failed tests (when waits are too short). ## Enter Playwright Auto-Waiting Playwright, a modern framework for end-to-end testing of web applications, introduces an elegant solution to this problem with its auto-waiting feature. This powerful capability allows tests to automatically wait for elements to reach an actionable state before proceeding with the execution. This means that developers no longer need to manually insert pauses or wait statements in their test scripts, leading to cleaner, more readable, and more reliable tests. ### How It Works The auto-waiting feature in Playwright operates under the hood, seamlessly handling various scenarios where elements transition through states before becoming interactive. Here's a closer look at how it tackles common challenges: - **Dynamic Content:** Playwright waits for elements that are dynamically injected into the DOM, ensuring they are fully loaded and actionable before any interaction is attempted. - **Visibility and Occlusion:** For elements that are initially hidden or occluded, Playwright patiently waits until they become visible or come to the forefront, making sure that clicks and other interactions are accurately executed. - **Animations:** Recognizing that animations can affect the interactability of elements, Playwright also waits for animations to conclude before initiating interactions, thereby avoiding premature actions. - **Disabled Elements:** In cases where elements are initially disabled, Playwright ensures that it only attempts interactions once the elements become enabled. ### Playwright Auto-waiting in Practice To illustrate, let's consider a test scenario with a webpage containing five buttons, each becoming actionable at different times due to various reasons such as DOM injection, visibility changes, animations, or state changes (e.g., from disabled to enabled). ### Testing Without "waitFor" Statements With Playwright, testing these buttons becomes straightforward. Here's a simplified example of how you might test that a button becomes disabled after being clicked, without needing any `waitFor` or delay: test.js ``` const { chromium } = require('playwright'); // Require Playwright's Chromium browser (async () => { const browser = await chromium.launch(); // Launch the browser const page = await browser.newPage(); // Open a new page await page.goto(' '); // Navigate to your test website const button = page.locator('button#your-button-id'); // Locate the button by ID await button.click(); // Click the button await expect(button).toBeDisabled(); // Assert the button is disabled await browser.close(); // Close the browser })(); ``` In this example, Playwright automatically waits for the button to become clickable, performs the click action, and then asserts that the button is disabled—all without explicit `waitFor` commands. ### Benefits of Auto-Waiting - **Reduced Flakiness**: By eliminating arbitrary waits, tests become more reliable and less prone to timing-related failures. - **Increased Efficiency**: Tests run faster as they proceed as soon as elements are ready, without unnecessary delays. - **Simplified Test Scripts**: Test scripts are cleaner and more focused on the actual testing logic rather than the intricacies of timing and state changes. ## Conclusion Playwright's auto-waiting feature alters how we implement E2E testing, making tests more robust and easier to maintain. By intelligently waiting for elements to be in the right state, Playwright eliminates the need for manual `waitFor` statements and arbitrary delays, allowing developers to focus on what matters most—ensuring their applications work correctly for their users. To see auto-waiting in action, see Stefan’s video walkthrough on this feature. ## Join the Checkly Community If you have tips and tricks to share for making stable, useful tests with Playwright, we’d love to hear from you. Join the [Checkly community Slack](https://join.slack.com/t/checklycommunity/shared_invite/zt-1gvia8904-_XrzM3ul3vS3YNoKie5tbw), [follow us on X](https://twitter.com/checklyHQ), or [connect on LinkedIn](https://www.linkedin.com/company/18560588/admin/feed/posts/). [Nočnica Mellifera Developer Advocate Nočnica Mellifera (She/Her) was a developer for seven years before moving into developer relations. She specializes in containerized workloads, serverless, and public cloud engineering. Nočnica has long been an advocate for open standards, and has given talks and workshops on OpenTelemetry and Kubernetes architecture. She enjoys making music that friends have described as "unlistenable." In her spare time she cares for her two children and hundreds of houseplants.](https://www.checklyhq.com/blog/author/nica-mellifera/) In This Article - Understanding the Challenge - Enter Playwright Auto-Waiting - Conclusion - Join the Checkly Community Share on social ## Related Articles [How to Implement Custom Test Fixtures in Playwright February 14, 2024](https://www.checklyhq.com/blog/how-to-implement-custom-test-fixtures-in-playwright/)