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が動かせないため¹、Chromeのヘッドレモードでのテストができないからです。

Circle CI 2.0対応のときにはドキュメントを読みつつCircle CI 2.0 移行時のキャッシュ設定メモ - Qiitaみたいなメモを残しながらやりました。

Dockerイメージ

ruby:2.3-node-browsers を使いました。-browsers つけたものにするのは、e2eテストにChromeが必要なためです。

会社によっては独自のDockerイメージを用意してDockerHubに上げてそれを使う、というところもあるようですが² 、今回はあるものを使えました。

store_artifacts を設定

store_artifacts に、テスト結果のファイルが入るパスを指定することで、Circle CIの画面上のArtifactsという画面からテスト結果を閲覧できるようにしました。

日本語文字化け問題を解決する

文字化け問題というかフォントが無い問題と書いたほうがいいでしょうか。手っ取り早い方法として、普通に毎回 apt-get install で日本語フォントをインストールするように設定しました。

雑感

DB絡むといくつか面倒なことがありそうですが、今回対象のアプリケーションはそうではなかったのでそこまで大変ではなかったです。

3行で

前提