如何在 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

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

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

Answer 4

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 5

您有两个主要选择：

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) {
    // ...
}