Puppeteerでブラウザのイベントを捕捉する
ちょっとした小ネタなのですが、Puppeteerを動かしていて手動でタブを閉じちゃう人がいたり、browser.closeした後にそれを捕捉して何か動かしたいケースがあります。こういったイレギュラーな対応をする方法を探ってみました。
故に今回のネタは非常に小粒です。
リンク
今回利用するツール等
- Node.js 23（Homebrewでインストールしています）
- Puppeteer-core - npm
- BrowserEvents interface
- BrowserContextEvent enum
特に追加のモジュールは必要ありません。作成したBrowserインスタンスに対してイベント設定を付与し、アクション時に発火するようにするというだけです。
ソースコードではモジュールのロード部分までは以下のエントリーを参考にしてみてください。
ソースコード
ブラウザのイベント捕捉は、browser.onで作成します。主に三種類あり
- targetcreated : 起動時にページを開くと自動的に発火する。pageだけじゃなくservice workerなどの色々なものが出てくる。
- targetdestroyed : 手動でタブを閉じたり、browser.close時に発火する。
- disconnected : コードでbrowser.closeなどをした場合に発火。ただし、targetdestroyedがある場合はそちらが優先される。
特にtargetdestrpyedをセットしていない場合、動いてるブラウザを閉じたり、タブを閉じるとクラッシュしてエラーとなります。これを入れておくことでそれらを検知して通知したりなどが可能になります。
また、disconnectedは単独でないと利用できませんが、browser.close後に何か作業をやらせたい場合に、それが終了するのを待ってから捕捉し実行させることが可能になります。
'use strict';
・・・前略・・・
//Puppeteerで自動操縦する
async function main() {
//puppeteer-coreを起動する
const browser = await puppeteer.launch({
headless: false,
executablePath: chromepath,
//slowMo:100,
userDataDir: userDataDir,
args: ['--lang=ja']
});
//タブが手動で閉じられた時イベントを捕捉
browser.on('targetdestroyed', async (target) => {
if (target.type() !== 'page') return;
console.log('タブ閉じられた');
//強制終了する
process.exit();
});
//タブが作られた場合
browser.on('targetcreated', async (target) => {
if (target.type() !== 'page'){
console.log(target.type() + 'が作成されたよ');
}else{
return;
}
});
//閉じられた時イベントを捕捉(browser.close()時に発火.targetcreatedと同時には使えない)
browser.on('disconnected', async (target) => {
console.log('終了');
process.exit();
});
//ページ設定とタイムアウトデフォルト値設定
const page = await browser.newPage();
const timeout = 0; //0でNavigation timeout ofが出なくなる
page.setDefaultTimeout(timeout);
const navigationPromise = page.waitForNavigation();
//ページ名を取得する
let url = "https://www.ja-town.com/shop/f/f1010/";
//ページを開く
await page.goto(url,{
timeout: 20000
});
await page.waitForNetworkIdle(5000)
//ブラウザを自動で閉じる
await page.close();
await browser.close();
}
