続・WebRTCなコードをE2Eテストする - console.lealog();
WebRTCなコードをE2Eテストする - console.lealog();
新しいネタを仕入れたので、このシリーズがまだ続きます！
microsoft/playwright
今回はこれを使っていく。
雑にいうと`puppeteer`の上位互換。
操作できる対象がChromeではなく、Chromium/Firefox/Webkitというブラウザエンジン単位になってる。
もちろんすべてヘッドレスで動かすことができて、本筋としてはGUIのリグレッションテストやら作業の自動化かもしれないが、使えるものは使っていく。
構想
- ブラウザAのコンテキストをつくる
- WebRTCのP2Pをはじめるべく、オファーを作る
- ブラウザBのコンテキストをつくる
- そこに先のオファーを渡してP2Pさせて、アンサーを得る
- ブラウザAのコンテキストにアンサーを渡す
とまぁ同時に複数のブラウザを操作して、host <-> hostでWebRTCを通してしまうという狙い。
できた
書き捨てるつもりだったので今回はGistになってます。
作成したブラウザコンテキスト（正確にはそのページ）に対して任意のコードを実行できる関数である`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()`してから渡せばよし。
実用的か
ブラウザバージョンなどを決め打ちで使えないところはやや残念。
ただブラウザにがんばってパッチ当てて動かしてるらしいのでいたしかたない。
ただ最新ブラウザでの動作保証ができる点だけでお釣りがくると思うので、がんがん使っていくとよいと思います。
とかいってたら`puppeteer`でもFirefoxが使えるようになってた・・・！