CODEWITHSUNDEEP
playwright
doberkofler
doberkofler

Reputation: 10341

How to wait for multiple locators to be visible

When waiting for a single Locator to be visible this can be with a simple expect().toBeVisible() but how would I wait for multiple and independent locators to be visible at the same time? In the following example el1 might be initially visible but while waiting for el2 to be visible el2 might no longer be and I would like to ensure that both elements are visible at the same time.

test('visible', async ({page}) => {
   const el1 = page.locator('.el1');
   const el2 = page.locator('.el2');

   await expect(el1).toBeVisible();
   await expect(el2).toBeVisible();
});

Upvotes: 1

Views: 1442

Answers (1)

AutomationAndy
AutomationAndy

Reputation: 982

You can use .toPass() from v1.29 for this which will retry until all assertions pass or the timeout is met:

await expect(async () => {
    const el1 = page.locator('.el1');
    const el2 = page.locator('.el2');

    await expect(el1).toBeVisible();
    await expect(el2).toBeVisible();
}).toPass({
    timeout: 10000,
});

Upvotes: 1

Related Questions