Wait until element change state in Playwright with Java

Question

I have an issue with tables. Let's say that I have a table with column and rows, I get the need to verify a value before and after

//get the value before
String randomStuff = page.locate(columnSelector).textContent() //This will give us for example Activate

// click on deactivate button
page.locate(deactivateButton).click()

// get the value after
String randomStuff = page.locate(columnSelector).textContent() //This will give us for example Deactivate

The problem is as the element exist anyway, the script give me randomly activate or deactivate, so it generate flakiness.

I have tried

page.waitForLoadState(LoadState.DOMCONTENTLOADED);
page.waitForLoadState(LoadState.NETWORKIDLE);

To wait for element to change, but nothing works.

I even waited for ready state = complete, but nothing works

String state = page.evaluate("document.readyState").toString();
outerloop:while(time<timeout) {
    try {
        Thread.sleep(200);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    time+=200;
    state = page.evaluate("document.readyState").toString();
    if (state.equals("complete")) 
        break outerloop;
}

I want to wait (dynamically) until the element change the state. When searching for existence or absence of an element in a table for example, tables and column exist even before the search, so Playwright doesn't wait until the table finish loading with search result.

I have many example like this in my web app, and I can't figure out a simple solution that Playwright offers.

Elayaraja K · Accepted Answer · 2023-04-06T11:19:57.013

1

You can use Awaitility (import org.awaitility.Awaitility;) with polling until your specified conditions are met. It solves most of my conditional based requirement in my app implementation.

Callable<Boolean> wait = () -> page.locator("yourLocator").isVisible(); //you can code your condition here.
Awaitility.waitAtMost(Duration.ofSeconds(30)).pollDelay(Duration.ofMillis(500)).until(wait);

edited Apr 06 '23 at 11:19

answered Apr 06 '23 at 11:18

Elayaraja K

26
2

Hamza Bouhelal · Answer 2 · 2022-12-01T15:24:51.743

0

Since this is your website, you could set some hidden input to indicate whether the table is loading or not using javascript, and wait for that input value to be what you expect in playwright.

edited Dec 01 '22 at 15:24

answered Dec 01 '22 at 15:24

Hamza Bouhelal

11
3

score 0 · Answer 3 · answered Feb 26 '23 at 02:59

Try a utility function like this to wait for Javascript and JQuery animations to finish

    public static void waitForJsAndJquery(Page page) {
        String jsScript = "document.readyState === 'complete'";
        String jqueryScript = "window.jQuery && window.jQuery.active == 0 && $(\":animated\").length == 0";

        Boolean javascript = (Boolean) page.evaluate(jsScript);
        Boolean jquery = (Boolean) page.evaluate(jqueryScript);

        while (!javascript && jquery != null && !jquery) {
            javascript = (Boolean) page.evaluate(jsScript);
            jquery = (Boolean) page.evaluate(jqueryScript);
        }
    }

If this still doesn't work, then try in conjunction with your

page.waitForLoadState(LoadState.DOMCONTENTLOADED);
page.waitForLoadState(LoadState.NETWORKIDLE);

Wait until element change state in Playwright with Java

3 Answers3