解決したいこと
例えば、ユーザー一覧画面で、「非アクティブなユーザーの場合は背景色をグレーにして表示したい」といった機能を実装したい場合、非アクティブなユーザーの場合は特定のクラス(disable-userとします)を付与してあげて、そのクラスに対してCSSでbackground-color: greyを指定する、という対応をとることがあると思います。
これをRSpecのsystem specでテストする場合、私が今まで経験したプロジェクトでは、「非アクティブな場合にdisable-userクラスが付与されているか」、をテストするのがよくある方法でした。
しかし、ふと、「disable-userクラスが付与されている要素の背景色がグレーになっているか」というところまでテストできるのかな?と思って調べたところ、可能だったのでここで紹介しておこうと思います。
背景色をテストするコード例
background_color = find('.disable-user').native.css_value('background-color')
expect(background_color).to eq('rgba(128, 128, 128, 1)')
nativeでネイティブオブジェクトを取得し、css_valueでgackground-colorを指定すると設定されている背景色が取得できました。
ちなみにrgba(...)の部分をgreyにしたらテストは通らなかったです。
終わりに
先輩と話して、今回はsystem specではclassの確認まですれば良く、背景色の確認までやる必要はなさそう、ということで実際には使わなかったですが、勉強になりました。
より簡潔にテストできる方法があれば教えていただきたいです。