web-dev-qa-db-ja.com

chrome headless + puppeteer evaluate（）でxpathを使用する方法は？

$x() 内でpage.evaluate()を使用して xpath expression を使用するにはどうすればよいですか？

pageが同じコンテキストにない限り、私は$x()を直接試しました（chrome dev toolsで行うように）が、葉巻はありませんでした。

スクリプトがタイムアウトになります。

javascriptgoogle-chromexpathpuppeteer
7
MevatlaveKraspek

$x()は、XPathで要素を選択する標準のJavaScriptメソッドではありません。 $x()ヘルパーchrome devtools にすぎません。ドキュメントでこれを主張しています：

注：このAPIは、コンソール自体からのみ使用できます。ページ上のスクリプトからコマンドラインAPIにアクセスすることはできません。

そしてpage.evaluate()は、ここでは「ページ上のスクリプト」として扱われます。

次の2つのオプションがあります。

  1. 使用 _document.evaluate_

page.evaluate()内の要素（featured article）を選択する例を次に示します。

_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();
})();
_
  1. 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()ヘルパー関数を挿入する方法に関連する質問です。

16
Everettss

page.$x() を使用する場合は、結果を page.evaluate() に渡すだけです。

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