Rails
CircleCI
e2e

System Specで記述したE2EテストをCircle CI上で行うためにやった設定

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

参考