Puppeteer 中的 $x 选择器不能用作 page.evaluate 中的 ElementHandle

Question

我正在尝试使用 puppeteer 抓取维基百科页面。我更喜欢对选择器使用 xpath 语法，因为我发现它更强大。

从文档中，它说$x 和$ 方法都应该返回一个ElementHandle，而$x 方法返回一个数组。

$ Docs
$x Docs

如果我在相关页面的 Chrome 控制台中运行两个测试查询，我会得到相同的结果。如果我查询两个选择器而不尝试在 puppeteer 中评估结果，我也会得到相同的结果。

当我尝试使用evaluate 方法时出现问题，$x 选择器中的 ElementHandle 似乎不正确。但我很难弄清楚我做错了什么。

这是一个代码示例。我将异步方法解构到它们的 .then.catch 中以帮助隔离问题。

const puppeteer = require('puppeteer');

(async() => {

    const searchUrl = "https://en.wikipedia.org/wiki/German_national_football_team"
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto(searchUrl);

    const xPathSelector = page.evaluate(
            el => el.outerHTML,
            await page.$x("//table[@class='infobox']//th[contains(.,'Head')]/following-sibling::td/a")[0])
        .then(
            result => console.log(result)
        ).catch( e => {
            console.log('XPath Error', e)
        })

    const normSelector = await page.evaluate(
            el => el.outerHTML,
            await page.$("#mw-content-text > div > table:nth-child(2) > tbody > tr:nth-child(5) > td > a"))
        .then(
            result => console.log(result)
        ).catch( e => {
            console.log('XPath Error', e)
        })

    await browser.close()

})()

Answer 1

在您的第一个示例中，您试图读取未解决的承诺的第一个元素，而不是它的结果，因此，更改：

await page.$x("//table[@class='infobox']//th[contains(.,'Head')]/following-sibling::td/a")[0]

to（查看额外的包装括号）：

(await page.$x("//table[@class='infobox']//th[contains(.,'Head')]/following-sibling::td/a"))[0]