web-dev-qa-db-ja.com

Puppeteer Node.jsでhref属性を取得する

evaluate内の要素をキャプチャするためのpuppeteerなどの一般的なメソッドは知っていますが、JavaScriptのようなアプローチでhref属性を取得できないのはなぜですか？

const page = await browser.newPage();

await page.goto('https://www.example.com');

let links = await page.$$('a');
for (let i = 0; i < links.length; i++) {
  console.log(links[i].getAttribute('href'));
  console.log(links[i].href);
}
node.jspuppeteer
11
Googlebot

await page.$$('a')はElementHandlesの配列を返します—これらは独自のpupeteer固有のAPIを持つオブジェクトであり、HTML要素またはDOMノード用の通常のDOM APIはありません。したがって、page.evaluate()を介してブラウザコンテキストで属性/プロパティを取得するか、かなり複雑なElementHandles APIを使用する必要があります。これは両方の方法の例です：

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    // way 1
    const hrefs1 = await page.evaluate(
      () => Array.from(
        document.querySelectorAll('a[href]'),
        a => a.getAttribute('href')
      )
    );

    // way 2
    const elementHandles = await page.$$('a');
    const propertyJsHandles = await Promise.all(
      elementHandles.map(handle => handle.getProperty('href'))
    );
    const hrefs2 = await Promise.all(
      propertyJsHandles.map(handle => handle.jsonValue())
    );

    console.log(hrefs1, hrefs2);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();
18
vsemozhetbyt

なぜこんなに辛いのかはわかりませんが、少し前に出会ったときに発見されました。

async function getHrefs(page, selector) {
  return await page.$$eval(selector, anchors => [].map.call(anchors, a => a.href));
}
5
Phix