6

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

sumit
  • 91
  • 1
  • 1
  • 5
  • Please provide more details. What do you mean by clickable? What element is this? Please show the site and the code you're using so far. Providing this info will improve the quality of your answers and enable folks to write a specific, guaranteed correct answer that actually solves your problem, rather than hand-wavey guesses that probably won't help you much. Thanks. – ggorlen Jul 23 '22 at 23:23

4 Answers4

6

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
}
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
  • thanks for the reply. I see from the documentation it auto waits, but my requirement bit different. Based on a specific element is clickable, I want to perform an action on another element. So basically I don't want to click the element which I am checking if its enabled. but if its enabled want to perform an action on another element. can you suggest any solution for this ? – sumit Jul 22 '22 at 12:00
  • I don't think 'auto-wait' with timeout is the answer to this question. – bhantol Apr 19 '23 at 21:37
  • Hi Alapan, I need to wait for the element to be clickable but I don't want to click on it. Could you suggest, how can I achieve it? – Anand Jul 18 '23 at 12:41
  • You can use an assertion like `await expect(page.locator(selector)).toBeEnabled()` – Alapan Das Jul 18 '23 at 14:23
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

Simon Martinelli
  • 34,053
  • 5
  • 48
  • 82
  • thanks for the reply. I see from the documentation it auto waits, but my requirement is bit different. Based on a specific element is clickable, I want to perform an action on another element. So basically I don't want to click the element which I am checking if its enabled. but if its enabled want to perform an action on another element. can you suggest any solution for this ? – sumit Jul 22 '22 at 11:46
  • You can check the button: There is the method isDisabled() https://playwright.dev/docs/api/class-elementhandle#element-handle-is-disabled – Simon Martinelli Jul 22 '22 at 12:07
1

This is not exactly about clickable-state, but for visible one. Java implementation

page.locator("button[aria-label=Search]")
            .waitFor(new Locator.WaitForOptions()
                    .setState(WaitForSelectorState.VISIBLE)
                    .setTimeout(10000));

I have found only 4 possible states to wait for:

package com.microsoft.playwright.options;

public enum WaitForSelectorState {
  ATTACHED,
  DETACHED,
  VISIBLE,
  HIDDEN
}
Dyadko
  • 21
  • 2
0

The Click method has an overload that lets you pass an instance of LocatorClickOptions. Use that with the Trial property set to true.

In the following C# code, the execution will wait until the page has a button labelled "Sign In" that is clickable.

await Page.GetByRole(AriaRole.Button, new() { Name = "Sign In" }).ClickAsync(new LocatorClickOptions() { Trial = true });

Clickable means:

  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

source

Arvin
  • 1,210
  • 2
  • 15
  • 18