检查元素在 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（使用上述所有选择器）也不起作用。

的已接受答案也无效。

有人可以帮我吗？

Answer 1

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

您需要使用：

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

看这里：https://playwright.dev/docs/test-assertions#expectlocatortobevisibleoptions

检查元素在 Playwright 中是否可见

Check if element is visible in Playwright

javascript

playwright