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?
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
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();
}