Playwright - how to wait for an element to be clickable

Question

like in selenium, do we have option in Playwright to wait for an element to be clickable ?

Answer 1

For page.click(selector[, options]), Playwright will ensure that:

1. element is Attached to the DOM
2. element is Visible
3. element is Stable, as in not animating or completed animation
4. element Receives Events, as in not obscured by other elements
5. element is Enabled

So, you can use this:

await page.click('button');

If you want to add a timeout, basically to allow playwright to complete the above checks and then click, you can do like this:

await page.click('button', {timeout: 9000});

To first check that the element is visible and then click another element based on the result, you can use an if-else like this:

if (await page.locator('modal-selector').isEnabled()) {
  await page.click('button1')
} else {
  //do something
}

Answer 2

Playwright is "auto-waiting" for this.

Checkout the documentation: https://playwright.dev/docs/actionability

You can check the button state with the method isDisabled()

Checkout the docs: https://playwright.dev/docs/api/class-elementhandle#element-handle-is-disabled