如何在 Playwright.js 中检查页面上是否存在元素

Question

我正在使用 playwright.js 为 https://target.com 编写脚本，在您提交送货信息的页面上，如果您已完成结账流程，它将提供使用已保存地址的选项之前在该目标帐户上。

我希望每次运行脚本时都输入新的运输信息，因此我必须让剧作家单击页面上存在的删除，然后输入运输信息。

下面显示的函数可以单击“删除”，但随后会在

if (await page.$$("text='Delete'") != [])

处超时，而不是执行该函数的

else

部分。

我如何重写这个函数，以便它只是检查元素（选择器：

text='Delete'

）是否存在，如果存在则单击它，如果不存在则执行函数的填充部分？

  async function deliveryAddress() {
    if (await page.$$("text='Delete'") != []) {
      await page.click("text='Delete'", {force:true})
      await deliveryAddress()
    } else {
      await page.focus('input#full_name')
      await page.type('input#full_name', fullName, {delay: delayms});
      await page.focus('input#address_line1')
      await page.type('input#address_line1', address, {delay: delayms});
      await page.focus('input#zip_code')
      await page.type('input#zip_code', zipCode, {delay: delayms});
      await page.focus('input#mobile')
      await page.type('input#mobile', phoneNumber, {delay: delayms});
      await page.click("text='Save & continue'", {force:true})
    }
  }

Answer 1

await page.isVisible("text='Delete'")

也许这就是您要找的人。

来自

.isVisible()

文档：

返回元素是否可见。

selector

不匹配任何元素的被视为不可见。

Answer 2

await expect(page.locator(".MyClass")).toHaveCount(0)

Answer 3

您有两个主要选择：

const deletes = await page.$$("text='Delete'");
if (deletes) {
    // ...
}

或

const deletes = await page.$$("text='Delete'");
if (deletes.length) {
    // ...
}

为了便于阅读，我个人会将

$$

命令留在 if 语句之外，但这可能只是我自己。

页面上似乎只有一个属性文本值为“Delete”的元素，因为您没有对

$$

返回的数组执行任何操作。如果是这样，您可以使用

$

：

const del = await page.$("text='Delete'");
if (del) {
    // ...
}

Answer 4

通常，在检查元素是否存在时，这在很多情况下都会有所帮助。

if(await page.locator(your_selector).count()>0)

Answer 5

try {
  await page.waitForSelector(selector, { timeout: 5000 })
  // ...`enter code here`
} catch (error) {`enter code here`
  console.log("The element didn't appear.")
}

来自 - https://github.com/puppeteer/puppeteer/issues/1149#issuecomment-434302298

Answer 6

您可以尝试这个简单的代码来检查元素的可见性并采取必要的操作。

下面的代码检查元素的可见性，如果元素在 DOM 上可见，则单击同一元素。

if(await page.locator('Your selector').isVisible()){
  await page.locator("Your selector").click()
}

即使定位器在页面上不可见，它也不会抛出任何异常或错误。

Answer 7

await expect(page).toHaveSelectorCount('.floorNav__modal', 1);

Answer 8

试试这个，它可以处理所有带有错误处理的场景 -

async isSelectorExists(selector: string) {
  return await this._page.$(selector).catch(() => null) !== null;
}

无效选择器 - 返回 false

console.log(await isSelectorExists('$'))

有效的选择器并且存在 - 返回 true

console.log(await isSelectorExists('body'))

选择器有效但不存在 - 返回 false

console.log(await isSelectorExists('h1'))

Answer 9

page.isVisible

不是一个 断言。

isVisible 只是以布尔值的形式返回可见性状态，而不是在不满足条件时抛出异常。

您正在寻找的是：

await expect(page.locator('.somethingdoesnotexistYET')).toBeVisible()

如何在条件下使用:

let isVisible = await expect(locator).toBeVisible({timeout=2000});
    
    If(isVisible) { // Do something man! }

使用剧作家推荐的网络断言作为最佳实践：

根据剧作家文档（v1.20）：

这将确保 Locator 指向附加且可见的 DOM 元素。

参考：https://github.com/microsoft/playwright/issues/18394

Answer 10

检查元素是否存在的最佳方法是：

if selector_exits(page, 'div[aria-label="Next"]'):
    print('yeah it exits')

def selector_exists(page, selector, timeout=3000):
    try:
        element = page.locator(selector).is_visible(timeout=timeout)
        return element
    except:
        return False

注意：这是基于Python的方法。转换成您想要的语言。