開催され、そこで「WebExtensionsとテスト」というお話をしてきました。Vixenが取り組んでいることについてお話しました。Deckこの記事では発表資料をかいつまんで、より詳しく説明してゆきたいとおもいます。それでははじまりはじまり〜。はじめにまずは自己紹介。WebExtensions歴は1年ちょいです。Vixenの開発をスタートしたきっかけは、XUL製だったVimperatorが使えなくなったからです。開発を始めて1年が経ち、現在はユーザー数も10,000を超えるほどになりました。開発的な視点で見てみると、本体コードが5,000行程度、テストコードは3,000行程度の規模感です。ビルドはBabelを使ってES7をトランスパイルし、webpackでシングルJS化してます。CircleCIを使って継続的にlintと、今回お話するテストを実行してます。Vixenの話をする前に、まずはなぜテストを書く必要があるかをおさらいします。テストの自動化は手動のテストよりも効率的です。一般的にテストしやすいコードはメンテしやすいコードでもあります。継続的にテスト書き続けることで、将来の機能追加やリファクタリングで困らないようにします。試験を自動化することで、リグレッションも早期に発見できるようになります。VixenではテストをユニットテストとE2Eテストに分類してます。テストの自動化は、費用対効果が高いユニットテストで多くのテストを網羅するのが理想だと言われてます。Vixenの試験自動化で取り組んできたことを説明します。テストの実行環境は、テストフレームワークにMochaを、そしてテストランナーにKarmaをつかってます。この環境はフロントエンドの技術をそのまま使っています。scriptは通常のJavaScript同様、DOMにアクセスすることが多いです。Vixenではこれらのテストにkarma-html2js-preprocessorを使ってます。このプリプロセッサは、ファイルに保存されてるHTMLを、JavaScriptの文字列としてアクセス可能になります。テストコードではテスト実行前・実行中ににdocument.innerHTMLに上書きして、テストケースをファイルとして管理できます。オブジェクトを使ったクラスのテストです。オブジェクトをモックできます。オブジェクトを利用できます。E2Eテスト続いてE2Eテストの自動化についてです。Vixenのリリースフローの説明です。Vixenでは書くリリース毎に100以上の試験項目を手動で確認して、パスすれば新しいバージョンをリリースしてました。その手順をリリース毎に繰り返すのは、コストが高くて退屈な作業です。Vixenでは、E2Eテストの自動化にも取り組んでます。VixenのE2Eテストを実行するために、テストコードからタブ情報や別タブにキー入力を送れるよう「ambassador」アドオンというのを作成しました。scriptと通信します。E2E試験をKarmaで実施するために、web-extのKarmaテストランナーを自作し、web-extにも少し手を加えました。テストケースはES7のawait/asyncを使うことで、手続き的にユーザー操作を記述することもできました。ambassadorアドオンへのメッセージ送信は、クライアントライブラリとしてラップしています。まとめE2Eの現実として、実際はは45/163テストケースしか自動できておらず、今でも100を超えるテストケースは手動で行ってます。ユニットテストの配分をより大きくして、理想のテストピラミッドに近づけていこうと思います。CIだけでなくCDにも力を入れたいと思います。Vixenで取り組んできたWebExtensionsのテストについてお話しました。Vixenというプラグインを作りました。(@ueokande)Webの会社のミドルウェアエンジニア。