Chrome
e2e

ヘッドレスChromeが動かない?SSL証明書のせいならこれで!

ラクス Advent Calendar 2017の4日目です。
昨日は @MasaKu さんの「Laravelで作るRESTなWebアプリ」でした。

今回は私がヘッドレスChromeを使ってみた際につまづいたポイントについて、書いてみたいと思います。

はじめに

Windows版のChromeでもヘッドレスモードが使えるようになりましたね :clap:

私の担当するプロジェクトはレガシーなもので、あまりコードの変更が発生しません。そのため、自動UIテストはWindowsのローカル開発環境で実施する程度です。
これまでWebDriverでGUIのChromeを立ち上がる形でテストしていたのですが、テスト中にうっかりChromeに触ってしまって、テスト失敗になってしまう事が何度かありました :cry:

そこでヘッドレスモードなら、この事故をなくせるのではないかと考えました。

環境

  • Windows10
  • Chrome 62.0.3202.94
  • ChromeDriver 2.33.506120

ヘッドレスChromeについて

Chromeのヘッドレスモードについては、詳しい記事が世にございますので、省かせていただきます。
ざっくり言えば、「GUIのないモード」です。
GUIがないので、私が遭遇している問題のように、うっかりテスト中に触ってしまうこともありません。

ヘッドレスモードでの起動方法は、Chromeの起動引数に下記をつけるだけで動作します。

--headless --disable-gpu

--disable-gpuはいずれ不要になるとか(ヘッドレス Chrome ことはじめ

自動UIテストをヘッドレスにしてみたけど・・・動いてない?

自動UIテストを、上記引数を渡すよう変更して実行してみました。
・・・が、動いていない・・・?
次々とテスト失敗が告げられます :persevere:

テスト対象のアプリケーションサーバーには、リクエスト時のログさえ出ていない。
テスト失敗時に撮っているスナップショットを見ると、真っ白な画面。。
(ヘッドレスでもスナップショットは撮れます)

動作しなかった原因

どうやらSSL証明書に問題があると動かないようです。アドレスバーに注意が出るようなやつですね。

「ヘッドレスでなければ動くのに! :angry:」とも思ってしまいますが、SSL証明書自体をテスト対象として見た場合はこれが正しい気もします。GUIがないので「注意を引くには止まるしか・・・」という事なのかな?

私の開発環境ですと、SSL証明書は雑に作ったいわゆるオレオレ証明書です。
オレオレ証明書でも、ちゃんと作れば大丈夫なのかも知れませんが、それを用意する時間も手間も惜しいので、SSL証明書の問題を無視してくれる設定がないか探してみました。

回避方法

起動引数に下記をつけると、SSL証明書に問題があっても動作します。
(どんなSSL証明書でも大丈夫かは不明です)

--allow-insecure-localhost

ただし、制約があります。
引数を見た感じでも分かりますが、ドメインが localhost でないとダメです。

その制約が問題なければ、下記のような状態のSSL証明書でもヘッドレスChromeが動作しました。

shoumeisho.png

回避方法+α

上記の回避方法だけでは問題があるケースもあるかと思います。
localhostだけだと、テスト対象のドメインが複数ある場合に対応できません。

私の担当プロジェクトが正にそうで、ドメインをまたいだ画面移動があります。
その場合、ドメインを localhost に統一してしまうと、ドメインまたぎの遷移テストが不十分になってしまいます。

すがる思いでChromiumのソースコードを確認したところ・・・
--allow-insecure-localhost が効くドメイン名は「.localhost」で終わっていればなんでも良いみたいです。(ロジックが変わってしまったらスミマセン)

これならテスト対象のドメインを hoge.localhostfuge.localhost にすればOKですね。

自動UIテストのヘッドレス化に再挑戦

ここまでの回避方法を適用すると、無事にヘッドレスモードで動作させることができました :relaxed:
ドメインを変えなければいけないのが、結局手間ではありましたが :pensive:

実現してみての感想ですが、想定通り、テスト中にブラウザに触ってしまう事故はゼロになりました :sunny:

速度については少し速くなったものの、思ったほどではありませんでした。気持ち程度ですかね :partly_sunny:
GUIとして出てないだけで、レンダリングはしっかりしてると思うので、こんなものかも知れません。

まとめ

  • ヘッドレスChromeが動作しない場合はSSL証明書が原因なこともある
  • SSL証明書が原因なら、ドメインを localhosthoge.localhost にして、Chromeの起動引数に --allow-insecure-localhost を追加する

・・・ただ、ドメインを変えること自体が結構な手間なので、ちゃんとしたSSL証明書を作ってしまった方が良いのかも :sweat_smile:
回避策の1つとしてどなたかの助けになれば幸いです。

最後までお読みいただき、ありがとうございました。

参考サイト