How to Wait for Element to Be Enabled in Playwright

Modern web applications rely heavily on JavaScript to dynamically enable or disable elements based on user interactions or backend processes. In many cases, certain elements—such as buttons, input fields, or checkboxes—may not be immediately usable when the page loads or after specific actions. In Playwright automation, It’s important to wait for element to be enabled before interacting with it to ensure smooth and error-free operation.

Waiting for elements to become active before performing actions like clicking, typing, or selecting prevents issues and improves both user experience and automation reliability.

In this Playwright automation testing guide, you’ll learn how to wait for an element to be enabled using waitForSelector() and by polling the element’s state in modern web automation.

Wait for Element to be enabled using waitForSelector() in Playwright

You can use the waitForSelector() method with a specified timeout to wait for the element to be both present in the DOM and in an enabled state. It will continue waiting for the defined duration until the element becomes enabled.

Let’s see how to wait for an element to be enabled using the waitForSelector() method with a timeout in Playwright, along with an example.

Example of Wait for Element to Be Enabled in Playwright Using the waitForSelector() Method

const { test, expect } = require('@playwright/test');

test('Example: Wait for element enabled using waitForSelector() in Playwright.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2014/01/textbox.html');

await page.waitForSelector('#submitButton:enabled', { timeout: 15000 });

const button = page.locator('#submitButton');
const isEnabled = await button.isEnabled();

if (isEnabled) {
    console.log('Button is Enabled');
} else {
  console.log('Button is disabled');
}
});

Code Breakdown

• page.waitForSelector(): A Playwright method that waits for an element matching the given selector to appear in the DOM.
• ‘#submitButton:enabled’: A CSS selector that targets an element with the ID submitButton only when it is in an enabled state. The :enabled pseudo-class ensures the element is interactable (not disabled).
• { timeout: 15000 }: Specifies the maximum wait time—15,000 milliseconds (15 seconds). If the selector doesn’t match an enabled element within this time, an error is thrown.

Wait for the element to be enabled in Playwright by Polling for the Element State

In some cases, using waitForSelector() alone may not be enough, especially when elements are present in the DOM but not immediately enabled. A more flexible approach is to poll the element’s state in a loop until it becomes enabled. This allows for custom logic and better control over how and when you proceed.

Let us see how to wait for the element to be enabled by polling for the element state in Playwright.

Example to Wait for the Element to be Enabled by Polling for the Element State

const { test, expect } = require('@playwright/test');

test('Example: Wait for element to be enabled in Playwright by Polling for Element State.', async ({ page }) => {
await page.goto('http://only-testing-blog.blogspot.com/2014/01/textbox.html');
async function waitForEnabled(element, timeout = 30000) {
  const startTime = Date.now();
  while (Date.now() - startTime < timeout) {
    if (await element.isEnabled()) {
      return true;
    }
    await page.waitForTimeout(100);
  }
  throw new Error(`Element not enabled within ${timeout}ms`);
}

const button = page.locator('#submitButton');
await waitForEnabled(button);

if (button) {
    console.log('Button is Enabled');
} else {
  console.log('Button is disabled');
}
});

Code Breakdown

• async function waitForEnabled(element, timeout = 30000): Defines an asynchronous function that takes a Playwright element handle and an optional timeout (default: 30 seconds).
• const startTime = Date.now(): Captures the current time in milliseconds to track how long the polling has been running.
• while (Date.now() – startTime < timeout): Loops until the elapsed time reaches the defined timeout limit.
• if (await element.isEnabled()): Uses Playwright’s isEnabled() method to check if the element is currently enabled.
• return true: If the element is enabled, the function exits early and returns true.
• await page.waitForTimeout(100): Waits for 100 milliseconds before checking again, preventing tight-loop CPU usage.
• throw new Error(…): If the element is not enabled within the timeout period, an error is thrown to indicate failure.

Final Thoughts

Waiting for an element to be enabled in Playwright is straightforward, whether you use the waitForSelector() method with the :enabled selector or implement a custom polling approach to check the element’s state. Both methods are effective and can be chosen based on your specific use case in Playwright automation.

Related Articles

• How to Check Element Enabled in Playwright
• Check if Checkbox is Checked or Not in Playwright
• How to Check Element is Not Visible in Playwright

Aravind

Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.