All Articles

Cypress on Dockerで自動テストすると日本語が文字化ける

Published 6 Apr 2019

Cypressとは

Cypressとは、Web UIの自動テストツールです。
テスト実行するとJavascriptで書かれたテストケースに沿って、自動的にブラウザ(Chrome)によるテストが実施されます。 また、その際にデフォルトで動画が録画されてエビデンスとして残してくれます。 E2Eテストやインテグレーションテストを自動化するという点では、他にSeleniumやPuppeteerあたりが有名ですが、導入の容易さという点においてはCypressが優っていると思います。

CLI実行

CIに組み込んでの実行を想定していたため、今回はCLIでの実行のみを検証しています。 CLIの実行の場合には、テストケースを実行した結果を標準出力し、その際のテストケースごとのエビデンスを動画(mp4形式)として出力してくれます。 他にもCypressにはTest Runnerがあり、インタラクティブにデバッグすることも可能らしいです。

日本語での問題点

Cypressには公式Dockerコンテナが公開されており、今回はこちらの中からcypress/base:10利用しています。

ただし、公式で提供されているコンテナには、日本語フォントがないらしく、そのままCypressでのテスト実行をすると下記のように日本語部分が四角で表示されてしまいます。 日本語が四角で表示される

日本語対応

Cypressで日本語サイトをテストする場合には、コンテナ内に日本語フォントをインストールする必要があります。
コンテナへの日本語フォントインストールは、Dockerfileに下記を追加する必要があります。

RUN apt-get update
RUN apt-get install -y locales locales-all
RUN apt-get remove fonts-vlgothic
RUN apt-get install -y fonts-vlgothic
RUN locale-gen ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LC_CTYPE ja_JP.UTF-8
RUN localedef -f UTF-8 -i ja_JP ja_JP.utf8

ここでやっていることとしては、文字フォントの再インストールとOSの言語設定を日本語に変更することです。 これで、テスト結果において日本語が表示されるようになります。
Cypressが公式で提供しているDockerコンテナはDebianベースなので、apt-getで上記の設定に必要なライブラリをインストールしていきます。

Githubに置いておきました

今回、作成したDockerfileなどの環境をまとめてGithub(https://github.com/michihiko-yamamoto/cypress-test)に置いておいたので、詳細はそちらをご覧ください。
上述した通り、もともとCIとして実行するための検討だったので、基本的には実行結果は標準出力です。 また、エビデンスとしてテスト結果が動画として残ります。

まとめ

Cypressの導入を試してみました。 日本語での利用にちょっとだけハマりましたが、割と簡単に環境構築することができました。 ただ、一方でマルチブラウザテスト、クロスドメイン制約や複数タブを使ったテストなど、Cypressの構造上実現の難しいテストケースもいくつかあるので、導入の際には合わせて検討が必要かと思います。 そういった制約を考慮してもCypressの導入は容易なので、今後何かプロダクトを作ろうという時には、まずCypressでE2Eテストを気軽に導入してみて、必要があれば別のテストスタックも試してみるという流れで使っていこうと思います。

参考

Published 6 Apr 2019

主にWeb技術に関するブログ
Michihiko on Twitter