puppeteer 13.0.0がリリースされました。
今回のリリースノートは以下のとおり。
BREAKING CHANGES
・typo in ‘already-handled’ constant of the request interception API
Features
・expose HTTPRequest intercept resolution state and clarify docs
・implement Element.waitForSelectorBug Fixes
・handle multiple/duplicate Fetch.requestPaused events
https://github.com/puppeteer/puppeteer/releases/tag/v13.0.0
・revert “feat(typescript): allow using puppeteer without dom lib”
・typo in ‘already-handled’ constant of the request interception API
目立った変更はありませんが request interception に関するドキュメントがアップデートされてます。
request interceptionとは
puppeteerの強力な機能の1つとして、HTTP requestをinterceptすることができます。具体的には以下のようなコードで、’request’メッセージをonで拾います。この例ではGoogle Analyticsへのリクエストをブロックしています。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', (request) => {
if (/www\.google-analytics\.com/.test(request.url())) {
return request.abort();
}
return request.continue();
});
await page.goto('https://example.com');
await browser.close();
})();これまではこのような記述でよかったのですが、Cooperative Interception Modeが実装されたことにより、少し書き換えが必要になりました。具体的には以下のように変わります。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setRequestInterception(true);
page.on('request', (request) => {
if (/www\.google-analytics\.com/.test(request.url())) {
return request.abort('failed', 0);
}
return request.continue(request.continueRequestOverrides(), 0);
});
await page.goto('https://example.com');
await browser.close();
})();Cooperative Interception Modeとは
page.on(‘request’)はイベントリスナーですので、同じ’request’メッセージをlistenするイベントリスナーを複数定義することができます。ところがNodeJSは非同期です。そうすると、どのイベントリスナーから順番に実行すればいいのか分からなくなります。
上の例ではGoogle Analyticsをブロックするように書きました。でも、もしかしたらその前にGoogle Analyticsに対して処理するイベントリスナーを定義したいかもしれません。そうなると、どの順番で実行すればいいか保証されなくなってしまいます。
そこで、Cooperative Interception Modeが実装されました。従来の abort() や continue() の第2引数にpriorityを設定できるようになりました。これにより、プライオリティが高い順番にイベントリスナーが処理されるようになります。
なお、引数が指定されていない場合はLegacy Interception Modeとして実行されます。普通の用途では’request’メッセージに対するイベントリスナーは1つしか定義しないことがほとんどだと思いますので、基本的には第1引数、第2引数を設定することをお勧めします。