Day31 - 在 Windows 底下的 Ubuntu 18.04 执行 Ruby on Rails 的 RSpec Capybara 能显示 Chrome 浏览器跑 E2E 测试

前言

在 Windows 10 底下的 Ubuntu 18.04 LTS 执行 Ruby on Rails 的 RSpec Capybara 能显示 Chrome 浏览器 (selenium-webdriver) 跑 E2E 测试

这标题真的很长 XD

希望在 Windows 环境下的 Ruby on Rails 文章能多些 (雷真的很多...)，别老是霸凌 Windows 啊... (虽然我工作上也是用 Mac)

之前看 Mac 电脑，直接执行 rspec spec 就能有效果，换成在 Windows 上时，却变得很艰辛，过程中很多环境的雷，且相关资源真的很少，之前搞过一阵子，如今终於可以顺利执行 (撒花

此篇为铁人赛加码文章，本文章会以此 repo 作为范例

环境介绍

以下为个人在 Windows 电脑使用的环境，Ruby on Rails 相关版本，可参考 repo 中的 Gemfile.lock

备注: 若还没在 Windows 安装 Ruby on Rails 环境，可参考这篇文章

作业系统: Windows 10 家用版 1909 版 (OS 组建 18363.1082)

Ubuntu: Ubuntu 18.04 LTS

浏览器: Google Chrome 版本 86.0.4240.75 (正式版本) (64 位元)

如何安装

以 Ruby on Rails -v 6.0.3.3 版本为例，建立专案时，在 Gemfile 的 test group 中，已经有 capybara 、 selenium-webdriver 、 webdrivers 这三个 Gem，可参考 repo 中的 Gemfile

# Gemfile 档案

group :test do
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  gem 'webdrivers'
end

# 记得要 bundle

如何设定

可将下方写在 spec/support/capybara.rb 的设定，统一写在 spec/rails_helper.rb 的档案中，两种方式都可以，或参考此 commit

# spec/rails_helper.rb
Dir[Rails.root.join('spec', 'support', '**', '*.rb')].sort.each { |f| require f }

# ---

# spec/support/capybara.rb
require 'capybara'

Capybara.register_driver :chrome do |app|
  Capybara::Selenium::Driver.new(app, browser: :chrome)
end

Capybara.javascript_driver = :chrome

# ---

# .travis.yml
  - xvfb

# ---

# spec/features/sign_in_spec.rb
require 'rails_helper'

RSpec.feature 'test', type: :feature, driver: :chrome, js: true, slow: true do
  describe 'Feature spec/功能测试' do
    before(:each) do
      visit users_path
    end

    scenario 'User CRUD' do
      expect(User.count).to eq(0)
      click_on('New User')
      fill_in('Name', with: '小菜')
      fill_in('Email', with: '[email protected]')
      fill_in('Phone', with: '0987654321')
      fill_in('Address', with: '某个地方')
      click_button('Create User')
      expect(User.count).to eq(1)
    end
  end
end

Travis CI 设定

实际 Travis CI 跑的 log 纪录可参考这个 Job log 纪录

更多设定可参考 Travis CI Docs

# .travis.yml
  - xvfb
  
# 别怀疑，就是这麽简单 XD

在 Windows 的 Ubuntu 执行 RSpec 会显示 Chrome 浏览器模拟操作

参考资料

rspec-rails 3.7の新机能！System Specを使ってみた

小结

此方法也有在 MacOS 测试过，确认能在 Windows 、 MacOS 环境执行，前面铁人赛文章几乎都是在 MacOS 环境写的，偶尔要替 Windows 平反下 XD

铁人赛文章连结：https://ithelp.ithome.com.tw/articles/10252686
medium 文章连结：https://link.medium.com/hn69TJ6Qwab
本文同步发布於 小菜的 Blog https://riverye.com/

备注：之後文章修改更新，以个人部落格为主