如何在 chrome headless+puppeteer evaluate() 中使用 xpath？

Question

如何使用$x()来使用xpath expression inside a page.evaluate()？

至于 page 不在同一上下文中，我直接尝试了 $x()（就像我在 chrome 开发工具中所做的那样），但没有雪茄。

脚本超时。

Answer 1

$x() 不是 XPath 对 select 元素的标准 JavaScript 方法。 $x() 这只是一个 helper in chrome devtools。他们在文档中声明了这一点：

Note: This API is only available from within the console itself. You cannot access the Command Line API from scripts on the page.

而 page.evaluate() 在这里被视为 "scripts on the page"。

你有两个选择：

使用document.evaluate

这是 selecting 元素（特色文章）在 page.evaluate():

中的示例

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://en.wikipedia.org', { waitUntil: 'networkidle2' });

    const text = await page.evaluate(() => {
        // $x() is not a JS standard -
        // this is only sugar syntax in chrome devtools
        // use document.evaluate()
        const featureArticle = document
            .evaluate(
                '//*[@id="mp-tfa"]',
                document,
                null,
                XPathResult.FIRST_ORDERED_NODE_TYPE,
                null
            )
            .singleNodeValue;

        return featureArticle.textContent;
    });

    console.log(text);
    await browser.close();
})();

Select 元素由 Puppeteer page.$x() 传递给 page.evaluate()

这个例子实现了和1一样的结果。例子：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://en.wikipedia.org', { waitUntil: 'networkidle2' });

    // await page.$x() returns array of ElementHandle
    // we are only interested in the first element
    const featureArticle = (await page.$x('//*[@id="mp-tfa"]'))[0];
    // the same as:
    // const featureArticle = await page.$('#mp-tfa');

    const text = await page.evaluate(el => {
        // do what you want with featureArticle in page.evaluate
        return el.textContent;
    }, featureArticle);

    console.log(text);
    await browser.close();
})();

是一个相关的问题，如何将 $x() 辅助函数注入您的脚本。

Answer 2

如果你坚持使用page.$x(), you can simply pass the result to page.evaluate():

const example = await page.evaluate(element => {
  return element.textContent;
}, (await page.$x('//*[@id="result"]'))[0]);

如何在 chrome headless+puppeteer evaluate() 中使用 xpath？

How to use xpath in chrome headless+puppeteer evaluate()?

javascript

xpath

google-chrome

puppeteer