javascriptplaywright

Check if element is visible in Playwright

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?

Solution

  • 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