javascript - Puppeteer - 获取父元素

Question

我试图根据另一个元素的名称点击一个值(赔率)，但这两个值需要位于我通过其中的文本获得的特定父元素内。

以下代码段可以在具有相同类的同一页面上多次找到，因此不能按类定位。

我首先需要获得一个带有文本“第一个目标”的容器。然后我需要获得它的父级，在父级中，我需要获得第二个 div 元素(类 parent2)。该元素包含其他元素。让我们想象一下我需要获取值为200的元素并点击。

我尝试过使用 parentElement、parentNode，但在获取子元素的父元素时总是得到“undefiend”，尽 pipe 元素已成功检索。我只是无法从我可以沿着树向下找到所需元素并单击它的位置获取父项。

<div class="group ">
    <div class="parent1 "><span>1st Goal</span></div>
    <div class="parent2">
        <div class="container ">
            <div">
                <div><span>Malaga</span><span class="odds">200</span></div>
                <div><span>No 1st Goal</span><span class="odds">300</span></div>
                <div><span>Las Palmas</span><span class="gll-odds">400</span></div>
            </div>
        </div>
    </div>
    <div></div>
</div>

Answer 1

XPath 表达式

如果您可以使用 XPath表达式，您可以使用以下语句:

//div[contains(@class, "group") and contains(., "1st Goal")]/div[@class="parent2"]//span[@class="odds"]

此 XPath 表达式查询具有类 group 并在某处包含文本 1st Goal 的 div 元素。然后它将查询具有 parent2 类的子 div 并查询内部具有 odds 类的 span 元素。

在 puppeteer 中使用

要使用 puppeteer 获取元素，请使用 page.$x功能。要单击该元素，请使用 elementHandle.click .

将所有内容放在一起，代码如下所示:

const [targetElement] = await page.$x('//div[contains(@class, "group") and contains(., "1st Goal")]/div[@class="parent2"]//span[@class="odds"]');
await targetElement.click();