Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9004

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

$
0
0

この記事は

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

やりたかったこと

すぐ壊れるCSSのテスト

やり方

インストール方法

gem 'rspec-css'

CSSの記録

Capybara.default_driver=:selenium_chrome_headlessCapybara.app=Rack::File.new('spec/fixtures/files/')visit'sample.html'files_path='spec/fixtures/files/sample.yml'RSpec::CSS.print_silk(files_path,page)unlessFile.exist?files_path

比較

css_file=File.openfiles_path,'r'expect(page).toeq_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を利用したい。


Viewing all articles
Browse latest Browse all 9004

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>