【RSpec】画面ごと CSSのテストができるGem「rspec-css」の使い方

この記事は

CSSの比較ができる rspec-css を作ったメモ

やりたかったこと

すぐ壊れるCSSのテスト

やり方

インストール方法

gem 'rspec-css'

CSSの記録

Capybara.default_driver = :selenium_chrome_headless
Capybara.app = Rack::File.new('spec/fixtures/files/')

visit 'sample.html'
files_path = 'spec/fixtures/files/sample.yml'
RSpec::CSS.print_silk(files_path, page) unless File.exist? files_path

比較

css_file = File.open files_path, 'r'
expect(page).to eq_screen_css(css_file.read)

結果

(compared using ==)

Diff:
@@ -17,7 +17,7 @@
  animation-timing-function: ease
  appearance: ''
  azimuth: ''
-  backface-visibility: hidden
+  backface-visibility: visible
  background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
  background-attachment: scroll
  background-blend-mode: normal

技術的ポイント

きっかけは「VCR便利だな」って軽い気持ちだったのが、RSpecは気軽に触れちゃいけないものだという畏怖の気持ちに変わり、Qiitaの記事とか参考になんとか出来たって感じなので、オープンソースは人々の協力によって支えられているのだ、という今の感謝の気持ちを心に留めてRailsを利用したい。