使用 Xpath 的 Puppeteer 选择器

Posted 2023-02-16

【中文标题】使用 Xpath 的 Puppeteer 选择器

【英文标题】：Puppetteer Selects using Xpath

【发布时间】：2022-01-04 23:11:54

【问题描述】：

我正在尝试使用 puppeteer 动态选择一个选项，但在如何正确获取它时遇到了一些问题。我需要获取与option 标签关联的实际value。这使我的问题变得更加困难。我搜索了一下，发现有些人正在使用 Xpath 使问题更容易解决，但似乎我的 Xpath 无法正常工作，因为我遇到了错误 ->

字符串 '//select[@id = "wrestler"]/option[text() = Henri Mugnier]' 不是有效的 XPath 表达式。

Henri Mugnier 在我的holderArr 数组中的索引为 0。

这是我的小代码sn-p。

const option = (await frame.$x(
    `//select[@id = "wrestler"]/option[text() = $holderArr[i].name]`
))[0];

holderArr 是从另一个函数传入的，它是一个对象数组。下拉列表是一个名称列表，但每个名称的 value 只是随机数，所以我希望使用 xpath，然后使用这样的函数获取值

const value = await (await option.getProperty('value')).jsonValue();

重现步骤：

转到https://www.trackwrestling.com/seasons/ 2021-22 高中男生 > 选择“田纳西州中学体育协会” 点击顶部的“团队” 选择任何团队 选择“匹配”或更多 选择匹配项（这个下拉菜单是我要访问的）

【问题讨论】：

请显示您正在使用的网站或标记。见minimal reproducible example。谢谢。

如果要获取元素的值，使用evaluate()并返回值。

【参考方案1】：

这就是我最终让它工作的方式。这将使用 puppeteer 为您提供 option 标签上的 value 属性。

 let [optElementHandle] = await frame.$x(`//select[@id="wrestler"]//option[contains(text() , "$holderArr[i].name")]`)
    const text = await optElementHandle.getProperty('value')
    const value = await text.jsonValue()