🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

続・続・WebRTCなコードをE2Eテストする

続・WebRTCなコードをE2Eテストする - console.lealog();
WebRTCなコードをE2Eテストする - console.lealog();

新しいネタを仕入れたので、このシリーズがまだ続きます!

microsoft/playwright

GitHub - microsoft/playwright: Node library to automate Chromium, Firefox and WebKit with a single API

今回はこれを使っていく。

雑にいうと`puppeteer`の上位互換。

操作できる対象がChromeではなく、Chromium/Firefox/Webkitというブラウザエンジン単位になってる。

もちろんすべてヘッドレスで動かすことができて、本筋としてはGUIリグレッションテストやら作業の自動化かもしれないが、使えるものは使っていく。

構想

  • ブラウザAのコンテキストをつくる
  • WebRTCのP2Pをはじめるべく、オファーを作る
  • ブラウザBのコンテキストをつくる
  • そこに先のオファーを渡してP2Pさせて、アンサーを得る
  • ブラウザAのコンテキストにアンサーを渡す

とまぁ同時に複数のブラウザを操作して、host <-> hostでWebRTCを通してしまうという狙い。

できた

書き捨てるつもりだったので今回はGistになってます。

Use playwright for WebRTC P2P DataChannel testing · GitHub

作成したブラウザコンテキスト(正確にはそのページ)に対して任意のコードを実行できる関数である`evaluate()`を使うだけ。
第2引数にNode側から任意のものを渡せるのがポイント。

往復するのが地味に面倒なので、VanillaICEでつなげる。
この例ではDataChannelしか試してないけど、ブラウザの起動時引数でフェイクメディアを使うなどすれば、Mediaも通せるはず。

この時点で

↓offer/answer→ ch ff wk
ch o o o
ff o o o
wk o o x

という組み合わせでちゃんと動いてるのを確認した。

playwrightのTips

`window.xxx`で状態を保存

保存というか、参照を残し続けるだけ。
モジュール以前の時代ではみんなそうしてたように。

これで`evaluate()`をまたいでも、同じ参照にアクセスできる。

`evaluate()`の第2引数は`Serializable`

SDPを返そうと思って、`RTCSessionDescription`をそのまま渡したところ、`{}`になって困ってた。
`toJSON()`してから渡せばよし。

`webkit`はhostのcandidateを発行しない

WebRTCのAPIを使ったIPアドレス抜き取り対応で、ある頃からそうなったんだった。
たぶんそれ用の起動オプションがあると思うけど、そのままではwebkit x webkitはつなげられなかった。(STUNとか使えばいけると思うけど)

実用的か

ブラウザバージョンなどを決め打ちで使えないところはやや残念。
ただブラウザにがんばってパッチ当てて動かしてるらしいのでいたしかたない。

ただ最新ブラウザでの動作保証ができる点だけでお釣りがくると思うので、がんがん使っていくとよいと思います。

とかいってたら`puppeteer`でもFirefoxが使えるようになってた・・・!

feat(launcher): Provide option to run puppeteer with different browsers by mjzffr · Pull Request #5137 · puppeteer/puppeteer · GitHub