puppeteer

puppeteer 13.1.1がリリースされました。

Bug Fixes

・use content box for OOPIF offset calculations

https://github.com/puppeteer/puppeteer/releases/tag/v13.1.1

・・・のですがこちらはバグ修正のみなのです。

その前にリリースされたpuppeteer 13.1.0のリリースを見ましょう。

Features

・chromium: roll to Chromium 98.0.4758.0

Bug Fixes

・apply OOPIF offsets to bounding box and box model calls

・correctly compute clickable points for elements inside OOPIFs

・error for pre-existing OOPIFs

https://github.com/puppeteer/puppeteer/releases/tag/v13.1.0

ポイントはChromiumが98になりました。現在配布されているChromeが97ですので、puppeteerのChromiumはバージョンが1つ先行することになります。

では、合わせてChromium 98の変更点をおさらいしておきましょう。

• COLRv1 Color Gradient Vector Fonts
• Origin Trials Region Capture
• Adding auto Keyword for contain-intrinsic-size
• AudioContext.outputLatency
• CSS Color Adjust: ‘only’ Keyword for color-scheme
• document.adoptedStyleSheets is Now Mutable
• High Dynamic Range Color Media Queries
• New window.open() Behavior for Popups, Tabs, and Windows
• Private Network Access Preflight Requests for Subresources
• structuredClone() Method on Windows and Workers
• WebAuthn minPinLength Extension
• Window Controls Overlay for Installed Desktop Web Apps
• WritableStream controller AbortSignal
• Remove SDES Key Exchange for WebRTC

この中でハイライトした興味深いもの2つについて解説します。

New window.open() Behavior for Popups, Tabs, and Windows

windows.open() はポップアップウィンドウを生成するために使われるメソッドです。

Chromium 98ではオプションに popup を指定することで、ポップアップウィンドウ (popup=1) にするか、タブ (popup=0) として開くか、を選択できるようになりました。（タブが使えない環境ではウィンドウになります）

const popup = window.open('_blank','','popup=1');  // ポップアップの場合
const tab = window.open('_blank','','popup=0');       // タブの場合

structuredClone() Method on Windows and Workers

こちらは説明するまでもないでしょう。オブジェクトのディープコピー (Deep Copy) をするメソッドが実装されました。

JavaScriptではオブジェクトの代入はリファレンスのコピーにすぎません。また、Object.assign() で元のオブジェクトをコピーしたとしても、第一階層はコピーされますが、第二階層以降は浅いコピー (Shallow Copy) になり、真にディープコピーするには自前で再帰的にassign()等をする関数を実装する必要がありました。

この structuredClone() は文字通りオブジェクトの再帰的なディープコピーを作ってくれるメソッドになります。自前でディープコピーのメソッドを実装したら自己参照して無限ループになった・・・みたいなことにならずに済むわけです。

ちなみに FireFox は94で対応済、NodeJSは17.0からの対応のようです。

詳細は web.dev を参照してください。また、MDNにも関数の概要が記載されていますので、こちらも読んでおきましょう。

Google Chrome 97がリリースされました。

例によってセキュリティ対応などが中心ですが、注目するアップデートが2つあります。

1つ目はCookieなどのWebサイトごとに保存されている情報を一括で削除できるようになったことです。従来はサイト単位や保存してからの時間（1週間以内とか1ヶ月以上前とか）でしか削除できませんでした。まとめて削除できるのは、ブラウザ関連の開発やテストをしている人にはうれしい機能です。プライベートモードで代替できなくもないですが、普通のブラウザの状態でのテストも必要ですから。

2つ目はWeb Transportのサポートです。Web TransportはWeb RTCに代わる技術でHTTP（正確にはHTTP/3）の上でソケット通信を行える技術です。Web RTCが主にピア・ツー・ピアを前提にした技術であるのに対して、Web Transportはサーバ・クライアントを考慮した技術になります。これにより、Webサーバを使ってレイテンシのないサーバ・クライアント間通信が実現できるようになります。とはいうものの、HTTP/3が前提となるのでまだサーバを用意するのが難しいかもしれません。Web Socketで非同期通信を実装しているのであれば、今後はWeb Transportに注目です。

puppeteer 13.0.1がリリースされました。

今回のリリースノートは以下のとおり。

Bug Fixes

・disable a test failing on Firefox

・make sure ElementHandle.waitForSelector is evaluated in the right context

・predicate arguments for waitForFunction

https://github.com/puppeteer/puppeteer/releases/tag/v13.0.1

基本的にバグ修正です。もしも13.0.0で問題が起きている場合にはアップデートしましょう。

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.waitForSelector

Bug Fixes

・handle multiple/duplicate Fetch.requestPaused events
・revert “feat(typescript): allow using puppeteer without dom lib”
・typo in ‘already-handled’ constant of the request interception API

https://github.com/puppeteer/puppeteer/releases/tag/v13.0.0

目立った変更はありませんが 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引数を設定することをお勧めします。