检查 Playwright 中元素是否可见

Question

我正在使用Playwright 1.15.2进行测试，并遇到元素可见性的问题。 我想检查模态框是否在屏幕上可见，以便可以关闭它。 模态框始于display:none，然后变为display:block。 此外，模态框会通知表单数据的错误，因此它可能会出现或者不会出现（即我无法waitForSelector）。

目前，我的代码类似于以下代码：

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');
}

我也尝试过：

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

使用page.$("text=modal title >> visible=true")或将page.$转换为page.locator（带有所有先前提到的选择器）也没有起作用。

在这个问题中被接受的答案也不起作用。

有人可以帮帮我吗？

- JeanCHilger

---

你试过使用 await expect(yourModalLocator).toBeVisible(); 吗？ - mianbato

请查看此链接：https://dev59.com/-1IG5IYBdhLWcg3whAMW#75901956 - Vishal Aggarwal

Answer 1

page.$("text=modal title >> visible=true") 不会等待元素在DOM中出现并且可见。

您需要使用：

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

请参阅：https://playwright.dev/docs/test-assertions#expectlocatortobevisibleoptions

- Max Schmitt

---

你需要同时使用 visible=true 和 isVisible() 有什么原因吗？ - Cathal Mac Donnacha

@CathalMacDonnacha 不。 - Aleks-Daniel Jakimenko-A.

Answer 2

我通过使用不同的state和waitFor解决了它。

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

- jfk

Answer 3

以下是两种检查元素不可见的方法（检查waitForSelector选项 选项）：

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

或者

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

- Dima Dorogonov

Answer 4

有两种方法可以做到这一点：

1. 检查定位器是否可见

• 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();

检查元素是否可见

• https://playwright.dev/docs/api/class-elementhandle#element-handle-is-visible
• https://playwright.dev/docs/api/class-elementhandle#element-handle-query-selector

await elementHandle.isVisible();

我发现定位器API更加灵活。

- Tomáš Hübelbauer