使用 Xpath 的 Puppeteer 选择器答案

【问题标题】：Puppetteer Selects using Xpath使用 Xpath 的 Puppeteer 选择器
【发布时间】：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()并返回值。

标签： javascript node.js xml xpath puppeteer

【解决方案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()

【讨论】：