最近は、E2E テストをどうにかできないかと思って、色々探っています。そのなかで、個人的にアツいなと思った chromeless の紹介と試しに使ってみたレポートを行いたいと思います。
僕が探した限りだと、現時点（2017/10/23)で日本語の記事は、githubのTrendingになっているchromelessをWindowsで試すの1件のみに思えました。
https://github.com/graphcool/chromeless
AWS Lambda 上で Headless Chrome を動作させ、そちらに対してリクエストを行うということで、ブラウザテスト実行の並列性を 1000 まで上げるというアプローチを行うのがこちらのライブラリの目指すところです。
chromeless の README にも記載がありますが、AWS Lambda 上で動作させるために、AWS のアカウントが必要になります。
Lambda 上で動作させるモードと Local で動作させるモードのふたつがあり、 Lambda 上で動作させるモードは Proxy 利用となります。
大まかな手順としては、以下のようになります。
1. chromeless リポジトリを clone し、Proxy 用のサービスのディレクトリで npm install2. コンフィグを設定し、自分のアカウントの Lambda 上に function をデプロイ3. デプロイが完了すると、endpoint の url と api key が発行される4. 発行された endpoint, api key を利用し、proxy に対してリクエストする
手順はこちら。
https://github.com/graphcool/chromeless/tree/master/serverless#chromeless-proxy-service
ひとつハマりどころとしては、全サービス (AWS IoT, AWS Lambda, AWS S3) のリージョンは揃えておく必要があります。
この状態で、Lambda のマネジメントコンソールを確認してみると、たしかに 4 つの関数が追加されています。
さて、次はこちらの API に対してリクエストを投げてみたいと思います。ここでは試しに iPhone の UserAgent と ViewPort を設定してみています。
こちらを実行してみますと、ほどなくして以下のような出力があらわれます。
s3 にスクリーンキャプチャが自動的にアップロードされ、その URL が返ってきているのがわかります。
早速開いてみますと、ViewPort がちゃんと反映はされているものの、文字化けというか日本語が表示されるであろう箇所が豆腐になっています…。
ちなみに、 https://www.yahoo.com/ を指定してみると
ちゃんと出ています。
やはり日本語が表示されないようです。その後いろいろと調べていると、chromeless が依存している serverless-chrome に日本語フォントがインストールされていないため、日本語は表示されないという状況のようです。
その issue は こちら
こちらの issue にもコメントされていますが @fd0 さんのブログに「serverless-chrome で日本語を表示できるようにする」というエントリがあり、できないことはないようです。（lambda の 50MB 制限を超えないようにフォントをインストールした chrome のバイナリを strip して容量を減らすというの、面白かった)
フォント問題は意外と根が深いのかもな…と思いつつ、本家の対応を待つかという気持ちになりつつあります。
ちなみに、chromeless にももちろん click(selector: string) や type(input: string, selector?: string) などの Chrome でのメソッドが使用できます。（一部未実装があるようですが）一般的に E2E テストは実行時間が遅いという認識ですが、Lambda を利用して並列数を爆発的に増やすというアプローチはすごく面白いので、今後も非常に期待しています。