puppeteerを使う時のTips

TIL

Headless chrome apiのpuppeteerを触ってみたので躓いたところ等のメモ。

GitHub - puppeteer/puppeteer: Headless Chrome Node.js API

Node is either not visible or not an HTMLElement

Error: Node is either not visible or not an HTMLElement

指定されたDOMはないのにそこへアクセスする時に出る。セレクタの指定がだいたい間違っている。

Protocol error (Runtime.callFunctionOn): Target closed.

(node:75130) UnhandledPromiseRejectionWarning: Error: Protocol error (Runtime.callFunctionOn): Target closed.

これもたまに出た。DOMへのアクセスより前にブラウザを閉じてたりすると起こる。 自分の場合は処理の最後で browser.close(); とawaitせずにブラウザを閉じる処理を書いていた。await browser.close()に変更することで解決。

classで要素を指定して押下したいとき

page.click('#id');

Idを指定する時などはこういった指定で問題ないが、classで要素を指定したい時はclick処理が動かない時があった。

const loginButton = await page.$('.login');
await loginButton.click();

一度要素を取得してからclickするように変更すると期待通りに動く。

ref:

Puppeteerを使った開発の勘所 - Qiita

PDFでページを出力

await page.pdf({
    path: 'output.pdf',
  });

Error: Protocol error (Page.printToPDF): PrintToPDF is not implemented 上記のエラーが出た場合は headless を有効にすると期待通りに動く。

const browser = await puppeteer.launch({
        headless: true,
    });

ref:

PuppeteerのちょっとしたTipsいろいろ - ゆるふわ技術日誌

TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded

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

goto() を利用してTimeoutErrorが出る場合は、waitUntil オプションを付与することで解決する。

await page.goto('https://hoge.com', {waitUntil: 'networkidle2'});

ref: MEMO: PuppeteerでSPA(Single Page Application)を操作する時の留意点 - Qiita

参照記事のようにnetworkidle を使用すると v1.20.0 では Error: ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead のエラーが出るのでnetworkidle2 を使用する。