前言

在 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: 'river@riverye.com')
      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/

備註：之後文章修改更新，以個人部落格為主