javascript - 检查元素在 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 (使用所有上述选择器)也不起作用。
this question 的公认答案也没有用。
有人可以帮我吗？

Answer 1

page.$("text=modal title >> visible=true")不会等到元素在 DOM 上并且可见。
你需要使用:await expect(page.locator("text=modal title")).toBeVisible()见这里:https://playwright.dev/docs/test-assertions#expectlocatortobevisibleoptions