3行で
- RailsアプリでE2Eテストしたい
- Rails 5.1 で SystemTestCaseという機能が入り、RSpecユーザにはSystem Specという同等のgemがあるのでそれを使う
- Circle CIで動かす方法
前提
- Ruby on Rails 5.1 以上
- 今回E2Eテストを導入した対象のRailsアプリはDBを持たずにAPIと通信してデータ持ってきて表示するだけのアプリです。そのため、DBが絡んだ設定などが抜けてます
RSpecの設定
RSpecの設定は rspec-rails 3.7の新機能！System Specを使ってみた - Qiita を読んだらわかりました。すごい丁寧です。
今回はChromeのヘッドレスモードを使いたかったので以下になりました。
spec/spec_helper.rb
config.before(:each) do |example|
if example.metadata[:type] == :system
driven_by :selenium_chrome_headless, screen_size: [800, 1000]
end
end
Circle CIの設定
Circle CI 上で動かしたいので、以下の設定が必要になりました。
- 2.0対応
- Dockerイメージは
ruby:2.3-node-browsersにする - 失敗時のスクリーンショットをArtifactsに保存
-
store_artifactsを設定 - 日本語文字化け問題を解決する
2.0対応
Circle CI を2.0対応しました。2.0にしないと新しいバージョンのChromeが動かせないため1、Chromeのヘッドレモードでのテストができないからです。
Circle CI 2.0対応のときにはドキュメントを読みつつCircle CI 2.0 移行時のキャッシュ設定メモ - Qiitaみたいなメモを残しながらやりました。
Dockerイメージ
ruby:2.3-node-browsers を使いました。-browsers つけたものにするのは、e2eテストにChromeが必要なためです。
会社によっては独自のDockerイメージを用意してDockerHubに上げてそれを使う、というところもあるようですが2 、今回はあるものを使えました。
store_artifacts を設定
store_artifacts に、テスト結果のファイルが入るパスを指定することで、Circle CIの画面上のArtifactsという画面からテスト結果を閲覧できるようにしました。
日本語文字化け問題を解決する
文字化け問題というかフォントが無い問題と書いたほうがいいでしょうか。手っ取り早い方法として、普通に毎回 apt-get install で日本語フォントをインストールするように設定しました。
雑感
DB絡むといくつか面倒なことがありそうですが、今回対象のアプリケーションはそうではなかったのでそこまで大変ではなかったです。
参考
-
Storing and Accessing Build Artifacts - CircleCI
9410082/#browsers) - A Guide to Testing Rails Applications — Ruby on Rails Guides
- 退屈なブラウザ作業はSeleniumにやらせようーーはじめてでもできるブラウザ操作自動化 - Mercari Engineering Blog