等待 Puppeteer 中的 xpath

Question

在我使用 Puppeteer 抓取的页面上，每个

li

都有一个具有相同 id 的列表。我正在尝试查找并单击此列表中具有特定文本的元素。我有以下代码：

await page.waitFor(5000)

const linkEx = await page.$x("//a[contains(text(), 'Shop')]")

if (linkEx.length > 0) {
  await linkEx[0].click()
}

你知道如何用等待实际文本来替换第一行吗

'Shop'

？

我尝试等待

page.waitFor(linkEx)

，

waitForSelector(linkEx)

，但它不起作用。

另外，我想将第二行代码中的

a

替换为实际的 id (

#activities

) 或类似的内容，但我找不到合适的示例。

您能帮我解决这个问题吗？

Answer 1

更新：我的答案到2024年就会过时。请参阅ggorlen的评论或weeix的答案中的“waitForSelector”选项。他们是正确的。

---

page.waitForXPath这里有你需要的。

示例：

const puppeteer = require('puppeteer')

async function fn() {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://example.com')

  // await page.waitForSelector('//a[contains(text(), "More information...")]') // ❌
  await page.waitForXPath('//a[contains(text(), "More information...")]') // ✅
  const linkEx = await page.$x('//a[contains(text(), "More information...")]')
  if (linkEx.length > 0) {
    await linkEx[0].click()
  }

  await browser.close()
}
fn()

尝试使用基于 id 的 XPath：

"//*[@id='activities' and contains(text(), 'Shop')]"

你知道吗？如果您右键单击 Chrome DevTools“元素”选项卡中的某个元素并选择“复制”：您可以在其中复制元素的确切选择器或 XPath。之后，您可以切换到“控制台”选项卡，并使用 Chrome API 测试选择器的内容，以便为您的 puppeteer 脚本做好准备。例如：

$x("//*[@id='activities' and contains(text(), 'Shop')]")[0].href

应该显示您期望点击的链接，否则您需要更改访问权限，或者您需要检查是否有更多具有相同选择器的元素等。这可能有助于找到更合适的选择器。

Answer 2

对于 puppeteer 19 及更新版本，

waitForXPath()

已过时。请使用

xpath

前缀

await page.waitForSelector('xpath/' + xpathExpression)

您的情况：

const linkEx = await page.waitForSelector('xpath///a[contains(text(), "Shop")]');
await linkEx.click();