0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【RSpec/Capybara】背景色などCSSまでテストしたい時の方法

Last updated at Posted at 2022-10-30

解決したいこと

例えば、ユーザー一覧画面で、「非アクティブなユーザーの場合は背景色をグレーにして表示したい」といった機能を実装したい場合、非アクティブなユーザーの場合は特定のクラス(disable-userとします)を付与してあげて、そのクラスに対してCSSでbackground-color: greyを指定する、という対応をとることがあると思います。

これをRSpecのsystem specでテストする場合、私が今まで経験したプロジェクトでは、「非アクティブな場合にdisable-userクラスが付与されているか」、をテストするのがよくある方法でした。

しかし、ふと、「disable-userクラスが付与されている要素の背景色がグレーになっているか」というところまでテストできるのかな?と思って調べたところ、可能だったのでここで紹介しておこうと思います。

背景色をテストするコード例

system-spec
background_color = find('.disable-user').native.css_value('background-color')
expect(background_color).to eq('rgba(128, 128, 128, 1)')

nativeでネイティブオブジェクトを取得し、css_valuegackground-colorを指定すると設定されている背景色が取得できました。
ちなみにrgba(...)の部分をgreyにしたらテストは通らなかったです。

終わりに

先輩と話して、今回はsystem specではclassの確認まですれば良く、背景色の確認までやる必要はなさそう、ということで実際には使わなかったですが、勉強になりました。
より簡潔にテストできる方法があれば教えていただきたいです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?