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

在你的第一个例子中，你试图读取未解决的诺言的第一个元素而不是它的结果，所以，改变：

Q2

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

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