检查元素在 Playwright 中是否可见答案

【问题标题】：Check if element is visible in Playwright检查元素在 Playwright 中是否可见
【发布时间】：2022-01-07 18:19:17
【问题描述】：

我正在使用 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 接受的答案也不起作用。

谁能帮我解决这个问题？

【问题讨论】：

你试过吗 await expect(yourModalLocator).toBeVisible(); ?

标签： javascript playwright

【解决方案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

【讨论】：

您是否有理由同时需要visible=true 和isVisible()？