Check if element is visible in Playwright

user_8865008 0
Viewed 14401

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?

playwright javascript
3 Answers
user_65126810

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

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);
user_60820840
Related