Check if element is visible in Playwright

Question

I'm using Playwright 1.15.2 for testing and facing a problem with elements' visibility. I want to check if a modal is visible on screen so I can close it. The modal starts with display:none and turns into display:block. Also, the modal informs incorrectness in form data so it may or may not appear (i.e. I can't waitForSelector).

Currently, I have a code similar to the following:

const myModal = await page.$("#modal");
if (await myModal.isVisible()) {
  await page.waitForSelector('#modal > .modal-dialog > .modal-content > .modal-footer > .btn-close');
  await page.click('#modal > .modal-dialog > .modal-content > .modal-footer > .btn-close');
}

I've also tried:

const myModal = await page.$("#modal:visible");
if (myModal) {
...

Using page.$("text=modal title >> visible=true") or switching page.$ to page.locator (with all the aforementioned selectors) also didn't work.

The accepted answer for this question didn't work as well.

Could anyone help me with that?

did you try await expect(yourModalLocator).toBeVisible(); ? – mianbato Dec 01 '21 at 11:39 — mianbato, Dec 01 '21 at 11:39
See this https://stackoverflow.com/a/75901956 – Vishal Aggarwal Jul 28 '23 at 07:39 — Vishal Aggarwal, Jul 28 '23 at 07:39

Max Schmitt · Accepted Answer · 2022-07-08T12:07:30.777

18

page.$("text=modal title >> visible=true") does not wait until the element is on the DOM and visible.

you need to use:

await expect(page.locator("text=modal title")).toBeVisible()

see here: https://playwright.dev/docs/test-assertions#expectlocatortobevisibleoptions

edited Jul 08 '22 at 12:07

answered Dec 01 '21 at 14:57

Max Schmitt

2,529
1
12
26

7

Is there a reason you need both `visible=true` and `isVisible()`? – Cathal Mac Donnacha Dec 09 '21 at 00:34
1

@CathalMacDonnacha No. – Aleks-Daniel Jakimenko-A. Jul 07 '22 at 21:22

score 4 · Answer 2 · answered Jun 28 '22 at 01:55

I solved it by using waitFor with different state

 constructor(page: Page) {
        this.page = page;
        this.myElement = page.locator('div.myElement');
     }
 async isMyElementVisible() {
        await this.myElement.waitFor({ state: 'visible' });
        return await this.myElement.isVisible();
    }

 async isMyElementHidden() {
        await this.myElement.waitFor({ state: 'hidden' });
        return await this.myElement.isHidden();
    }

score 2 · Answer 3 · answered Aug 15 '22 at 09:59

2

Here are two ways to check element is NOT visible (check waitForSelector options):

await page.waitForSelector('.btn', { state: 'detached' });

or

expect(await page.$$('.btn')).toHaveLength(0);

answered Aug 15 '22 at 09:59

Dima Dorogonov

2,297
1
20
23

score 0 · Answer 4 · answered Mar 18 '23 at 18:20

There's two ways to do this:

Check if a locator is visible

https://playwright.dev/docs/api/class-locator#locator-is-visible

const visible = await page.getByRole('button').isVisible();
const isTextVisible = await page.locator(':text("Some text")').isVisible();
const isElementVisible = await page.locator('button').isVisible();

Check if an element is visible

await elementHandle.isVisible();

I find the locator API to be more flexible.

Check if element is visible in Playwright

4 Answers4