Playwright how to wait for locator that matches multiple elements to not be visible

Question

I am trying to wait for an element that indicates a page is still loading, and exists on the page multiple time, to not be visible (think table with loading data placeholders).

Playwright documentation suggests using Locators is best practice, and therefore I initially tried to achieve this by doing:

locator.waitFor({state: "hidden")

However that errors due to Locators being strict and only being allow to match one element.

I'm now doing it with the following code:

page.waitForSelector(".foo .bar", {state: "hidden"})

This is non-ideal for a couple of reasons:

I'm storing page elements as locators in the Page Object Model, and you seemingly cannot access the selector of a locator, meaning the selector is duplicated in the code
I believe page.waitForSelector will use an ElementHandle which is discouraged

Is there any way to turn off the strictness constraint on a Locator? Or a way to achieve this using the Locator. I'm aware you can do .count on a Locator which matches multiple elements, but I've not found a nice way to combine that with waiting for the count to be 0.

So using https://playwright.dev/docs/locators#lists and awaiting the visible state on each locator does not work for you? — madflow, Jan 28 '22 at 16:30
@madflow ah no I'd glanced past that in the docs and not appreciated what that was for! I've got a working solution now (looping round getting the hidden state of all elements and waiting till they are all true, or a timeout is exceeded). — bee-anchor, Jan 31 '22 at 15:18

Oleksandr Pelykh · Answer 1 · 2023-04-01T05:02:27.160

2

hope it will work

this code will check the next element each time the previous one disappears

while (await page.locator('.foo .bar').first().isVisible()) { //do nothing }

edited Apr 01 '23 at 05:02

answered Jan 28 '22 at 19:27

Oleksandr Pelykh

41
7

1

This could get you stuck in an infinite loop if they never stop being visible. I've got a working solution now using `evaluateAll` function. – bee-anchor Jan 31 '22 at 15:20
pretty nice solution. thank you – Oleksandr Pelykh Feb 15 '22 at 09:59
This solution works as well, to avoid infinite loop timeout can be passed in the function call. – Vishal Aggarwal Mar 27 '23 at 13:39
@VishalAggarwal In which function call? – bee-anchor Mar 28 '23 at 11:02
@bee-anchor while(await expect(page.locator(locator)).not.toBeVisible({timeout: 2000 })) { } – Vishal Aggarwal Mar 30 '23 at 18:14

score 2 · Accepted Answer · edited May 06 '23 at 13:55

2

I got this working in the end using the evaluateAll method. Example code:

async waitForAllHidden(locator: Locator, timeout: number = 10000) {
    const start = Date.now()
    const elementsVisible = async () => (
        await locator.evaluateAll(elements =>
            elements.map(element => element.hidden))
    ).includes(false)

    while (await elementsVisible()) {
        if (start + timeout < Date.now()) {
            throw (`Timeout waiting for all elements to be hidden.
                    Locator: ${locator}. Timeout: ${timeout}ms`);
        }
    }
    console.log(`All elements hidden: ${locator}`)
}

edited May 06 '23 at 13:55

surfmuggle

5,527
7
48
77

answered Jan 31 '22 at 15:26

bee-anchor

119
1
1
6

This is a bit convoluted solution for an simpler problem. – Vishal Aggarwal Mar 27 '23 at 13:41
1

Agreed, but at the time there wasn't a better solution – bee-anchor Mar 28 '23 at 11:05

Vishal Aggarwal · Answer 3 · 2023-03-31T12:27:36.763

Use toHaveCount() (Added in: v1.20)

await expect(locator).toHaveCount(0,{timeout:2000});

Timeout: To avoid infinite loops timeout can be configured globally or passed as an parameter in the function call.

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  expect: {
    timeout: 5000
  },
});

Tip: Its better to keep local timeouts lower than global timeout to avoid any race conditions if both exist.

Reference: https://github.com/microsoft/playwright/issues/11988

How can I assert that an element is NOT on the page in playwright?

Playwright how to wait for locator that matches multiple elements to not be visible

3 Answers3