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

Posted 2023-03-16

【中文标题】如何在 Playwright.js 中检查页面上是不是存在元素

【英文标题】：How to check if an element exists on the page in Playwright.js如何在 Playwright.js 中检查页面上是否存在元素

【发布时间】：2021-02-23 07:53:11

【问题描述】：

我正在使用 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)
    
  

【问题讨论】：

在 javascript 中不能像这样比较数组，可以检查数组长度或使用if (await page.$('text=Delete'))

【参考方案1】：

您有两个主要选择：

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

【参考方案2】：

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

【参考方案3】：

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

【参考方案4】：

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

也许这就是你要找的那个。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。