目次

Cypressとは？
概要
インストール方法
使用方法（起動・実行編）
使用方法（テストコード編）
まとめ

Cypressとは？

CypressOnRailsの導入を試みる前に、まずはCypressについて学びましょう。
Cypressは公式ドキュメントが充実しており親切にチュートリアルの動画も載せてくれてます。
この記事ではCypessとは？については省略しているので公式ドキュメントを参照ください。

概要

ざっくりまとめるとCypressの恩恵をRailsでも受けられるようになる、というgemですが
E2Eテストで陥りやすい「不安定なテスト」にならないよう以下のような仕組みが取られています。

各テストを行う前にdatabase_cleanerを使用する
各テストのデフォルトデータをseedで準備する
factory_botを使用してデータのセットアップを行う
特定のテストに使用されるシナリオファイルを作成する

Rspecで使用しているテストデータを使い回しできることも、
既存のRailsアプリケーションへの導入が容易である要因の一つですね。

インストール方法

gemを導入してからテストの実行・テスト結果を確認するダッシュボードを開くところまでとても簡単に進められます。

gemファイルに追記

Gemfile

group :test, :development do
  gem 'cypress-on-rails', '~> 1.0'
end

bundle installを行い、ターミナルで以下を実行

ターミナル

$ bin/rails g cypress_on_rails:install

# 他のフォルダで作成したいもしくはすでにcypressのフォルダがある場合
$ bin/rails g cypress_on_rails:install --cypress_folder=spec/cypress

# npmでインストールする場合
$ bin/rails g cypress_on_rails:install --install_cypress_with=npm

# すでにグローバルでインストールしている場合
$ bin/rails g cypress_on_rails:install --no-install-cypress

# すでにgenerateしたファイルをアップデートする場合
$ bin/rails g cypress_on_rails:update

下記のフォルダやディレクトリが作成されます

主要ファイルのデフォルトコードを添付しておきます

config/initializers/cypress_on_rails

if defined?(CypressOnRails)
  CypressOnRails.configure do |c|
    c.cypress_folder = File.expand_path("#{__dir__}/../../cypress")
    # WARNING!! CypressOnRails can execute arbitrary ruby code
    # please use with extra caution if enabling on hosted servers or starting your local server on 0.0.0.0
    c.use_middleware = !Rails.env.production?
    c.logger = Rails.logger
  end

  # # if you compile your asssets on CI
  # if ENV['CYPRESS'].present? && ENV['CI'].present?
  #  Rails.application.configure do
  #    config.assets.compile = false
  #    config.assets.unknown_asset_fallback = false
  #  end
  # end
end

cypress/cypress_helper.rb

# This is loaded once before the first command is executed

begin
  require 'database_cleaner-active_record'
rescue LoadError => e
  puts e.message
  begin
    require 'database_cleaner'
  rescue LoadError => e
    puts e.message
  end
end

begin
  require 'factory_bot_rails'
rescue LoadError => e
  puts e.message
  begin
    require 'factory_girl_rails'
  rescue LoadError => e
    puts e.message
  end
end

require 'cypress_on_rails/smart_factory_wrapper'

factory = CypressOnRails::SimpleRailsFactory
factory = FactoryBot if defined?(FactoryBot)
factory = FactoryGirl if defined?(FactoryGirl)

CypressOnRails::SmartFactoryWrapper.configure(
    always_reload: false,
    factory: factory,
    files: [
      Rails.root.join('spec', 'factories.rb'),
      Rails.root.join('spec', 'factories', '**', '*.rb')
    ]
)

cypress/support/on-rails.js

// CypressOnRails: dont remove these command
Cypress.Commands.add('appCommands', function (body) {
  Object.keys(body).forEach(key => body[key] === undefined ? delete body[key] : {});
  const log = Cypress.log({ name: "APP", message: body, autoEnd: false })
  return cy.request({
    method: 'POST',
    url: "/__cypress__/command",
    body: JSON.stringify(body),
    log: false,
    failOnStatusCode: false
  }).then((response) => {
    log.end();
    if (response.status !== 201) {
      expect(response.body.message).to.be.empty
      expect(response.status).to.be.equal(201)
    }
    return response.body
  });
});

Cypress.Commands.add('app', function (name, command_options) {
  return cy.appCommands({name: name, options: command_options}).then((body) => {
    return body[0]
  });
});

Cypress.Commands.add('appScenario', function (name, options = {}) {
  return cy.app('scenarios/' + name, options)
});

Cypress.Commands.add('appEval', function (code) {
  return cy.app('eval', code)
});

Cypress.Commands.add('appFactories', function (options) {
  return cy.app('factory_bot', options)
});

Cypress.Commands.add('appFixtures', function (options) {
  cy.app('activerecord_fixtures', options)
});
// CypressOnRails: end

// The next is optional
// beforeEach(() => {
//  cy.app('clean') // have a look at cypress/app_commands/clean.rb
// });

// comment this out if you do not want to attempt to log additional info on test fail
Cypress.on('fail', (err, runnable) => {
  // allow app to generate additional logging data
  Cypress.$.ajax({
    url: '/__cypress__/command',
    data: JSON.stringify({name: 'log_fail', options: {error_message: err.message, runnable_full_title: runnable.fullTitle() }}),
    async: false,
    method: 'POST'
  });

  throw err;
});

database.ymlをアップデートする

テストを実行する度にdevelop環境のデータベースが汚れるのを防ぐにはdatabase.ymlを編集しましょう

database.yml

development:
  <<: *default
  database: <%= ENV['CYPRESS'] ? 'my_db_test' : 'my_db_development' %>
test:
  <<: *default
  database: my_db_test

使用方法（起動・実行編）

ローカル環境で起動までを行なってみましょう

# railsをスタートさせる
$ bin/rails server -p 5017

# 別ウィンドウでcypressを起動する
$ yarn cypress open 

# npmを使用する方はこちら
$ node_modules/.bin/cypress open 

# spec/cypressにフォルダを変えた方はこちら
$ yarn cypress open --project ./spec

cypressを起動すると、このような画面に移ります

「Log In to DashBord」からログインすると、このようなページへリダイレクトします
GUIでテスト結果をデバックできるのは分かりやすいですね

実行

ターミナル

# railsを起動しバックグランドでサーバーを起動する
$ yarn run cypress run

# npmを使用する方はこちら
$ node_modules/.bin/cypress run

テスト結果はこのように表示されます（何も設定していないのでテスト落ちてます）

使用方法（テストコード編）

factory botの使用例

既存アプリケーションで作成していたfactory_botを直接実行することもできます

spec/cypress/integrations/simple_spec.js

describe('My First Test', function() {
  it('visit root', function() {
    // バックエンドを呼び出し、アプリケーションの状態を準備する
    cy.appFactories([
      ['create_list', 'post', 10],
      ['create', 'post', {title: 'Hello World'} ],
      ['create', 'post', 'with_comments', {title: 'Factory_bot Traits here'} ] # traitsを使う
    ])

    // テスト対象のアプリケーションにアクセスする
    cy.visit('/')

    cy.contains("Hello World")

    // アクセス結果
    cy.appFactories([['create', 'invoice', { paid: false }]]).then((records) => {
     cy.visit(`/invoices/${records[0].id}`);
    });
  })
})

テストフィクスチャーの使用例

activerecord_fixtures.rbはデフォルトで作成されるファイルです。

spec/cypress/app_commands/activerecord_fixtures.rb

require "active_record/fixtures"

fixtures_dir = ActiveRecord::Tasks::DatabaseTasks.fixtures_path
fixture_files = Dir["#{fixtures_dir}/**/*.yml"].map { |f| f[(fixtures_dir.size + 1)..-5] }

logger.debug "loading fixtures: { dir: #{fixtures_dir}, files: #{fixture_files} }"
ActiveRecord::FixtureSet.reset_cache
ActiveRecord::FixtureSet.create_fixtures(fixtures_dir, fixture_files)

実際の使用してみましょう。

spec/cypress/integrations/simple_spec.js

describe('My First Test', function() {
  it('visit root', function() {
    // This calls to the backend to prepare the application state
    cy.appFixtures()

    // Visit the application under test
    cy.visit('/')

    cy.contains("Hello World")
  })
})

シナリオの使用例

シナリオとはテストで参照できる名前付きブロックです。
シナリオはspec/cypress/app_commands/scenariosディレクトリで定義してください。

spec/cypress/app_commands/scenarios/basic.rb

Profile.create name: "Cypress Hill"

# factory_botがあればcypress_helperを使うことができます
CypressOnRails::SmartFactoryWrapper.create(:profile, name: "Cypress Hill")

次に、テストでシナリオを参照します。

spec/cypress/integrations/scenario_example_spec.js

describe('My First Test', function() {
  it('visit root', function() {
    // This calls to the backend to prepare the application state
    cy.appScenario('basic')

    cy.visit('/profiles')

    cy.contains("Cypress Hill")
  })
})

seedの使用例

spec/cypress/app_commandsディレクトリにファイルを作成してください

spec/cypress/app_commands/load_seed.rb

load "#{Rails.root}/db/seeds.rb"

次に、テストでcy.app('load_seed')を参照します。

spec/cypress/integrations/simple_spec.js

describe('My First Test', function() {
  beforeEach(() => { cy.app('load_seed') })

  it('visit root', function() {
    cy.visit('/')

    cy.contains("Seeds")
  })
})

まとめ

E2Eテストといえばseliniumが有名ですが、最近有名企業もseliniumからCypressに移行した話などが増えているみたいです。
フレームワークやラッパーの選定が面倒なseliniumに対してセットアップが容易なCypressは今後もシェアを広げていきそうです。

RailsアプリケーションだとSystem Specがありますが、CypressOnRailsも使いやすそうなので是非触ってみてください