检查元素在 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")).toBeVisible()

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