Puppeteer - 获取父元素

Question

我正在尝试根据另一个元素的名称单击一个值（赔率），但这两个值需要位于我通过其中的文本获取的特定父元素内。

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

我首先需要获得一个带有文本“1st Goal值为 200 的元素并单击它。

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

<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

const parent_node = await child_node.getProperty('parentNode')

你可以试试这个

Answer 2

XPath 表达式

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

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

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

在 puppeteer 中的使用

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

放在一起，代码如下所示：

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