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?