大ちゃんの駆け出し技術ブログ

RUNTEQ受講生のかわいいといわれるアウトプットブログ

トップ > Rails > 【RSpec②】have_selectorの画像検証

【RSpec②】have_selectorの画像検証

Rails RSpec

はじめに

こんにちは！大ちゃんの駆け出し技術ブログです。

RSpecの紹介シリーズ第二弾！今回はhave_selectorの画像検証とあるようにhave_selectorについてです！

応用編が終わり個人的にRSpecを最近書く機会が少なくなってきたので、RSpecについてはなるべく多くアウトプットしたいと思います！！

have_selector超基礎

1つ目のRSpecはhave_selectorです。have_selectorは使用頻度がとても高いRSpecのマッチャだと思います。その理由はhave_selectorは特定のタグやCSS要素に特定の文字列が表示されていることを検証するといった、かなり使い勝手のよいマッチャだからでしょう。

例えば、タスク一覧画面にはh1タグで文字列"タスク一覧"が表示されています。

https://i.gyazo.com/5eda388a39a182f50a649cd922a32ee4.png

文字列"タスク一覧"が表示されていることを検証する場合、have_contentを使用すれば簡単に検証できることはわかると思います。

expect(page).to have_content 'タスク一覧'

しかし、ここで「h1タグでテキストが"タスク一覧"」である要素が画面にあることを検証する場合、have_contentでは検証できません。

そこでhave_selectorの出番です。

expect(page).to have_selector 'h1', text: 'タスク一覧'

これにより「h1タグでテキストが"タスク一覧"」条件を満たす要素があるか検証を行ってくれます。

画像検証の方法

上述したのはhave_selectorの基本的な使い方です。このhave_selectorで紹介したい記法は下記のような記法です。

expect(page).to have_selector("img[src$='画像ファイル名']")

これはどのような検証を行っているのかというと、対象の画像ファイルが表示されていることを検証してくれます。少し奇妙な書き方をしていますね。

例えば、下記のような画像が表示されている時に使用するとします。

https://i.gyazo.com/3bdd5eb2fb9ca8bee8145d389c48cfb8.png

ここで ディベロッパーツールを使うと表示されている画像の部分(img要素)は以下のようになります。見やすいようにわざと改行しています。

<img class="swiper-slide swiper-slide-next" 
         src="/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBHZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--b7f974b228479bd43c7aaba23cd913d9e88c77e2/haikyu.jpg" 
         role="group" 
         aria-label="3 / 3"
         style="width: 300px; transform: rotateX(0deg) rotateY(180deg) translate3d(300px, 0px, 300px); transition-duration: 0ms;">

ここである画像が表示されていることを検証する場合、その画像を表す部分はsrc属性からわかると思います。しかし、src属性は画面上ではかなり複雑なハッシュにより表されています。

src="/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBHZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--b7f974b228479bd43c7aaba23cd913d9e88c77e2/haikyu.jpg"

このsrc属性を正確に検証しようとすることはかなり手間だと思いませんか。実際にhave_selectorを使って表現すると以下のようになります。

expect(page).to have_selector("img[src$='/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBHZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--b7f974b228479bd43c7aaba23cd913d9e88c77e2/haikyu.jpg']")

長すぎますよね笑

そこで$=を記載することでこの長いハッシュを書かずに済むようにしています。

expect(page).to have_selector("img[src$='画像ファイル名']")

先ほどのsrc属性の後ろ側をみると、haikyu.jpgとあるように画像の名前はハッシュ化されずそのままです。あくまでもハッシュとして表現されているのはディレクトリの部分なのですね。なので、その長いハッシュ化されたディレクトリを無視できれば、画像ファイルが表示されているかを検証できるのです。そしてその方法が$='画像ファイル名'と書くことによって可能になります。

expect(page).to have_selector("img[src$='haikyu.jpg']")

終わりに

src$=の記法を使えば画像ファイルの検証はとても簡単に行うことができますね！ハッシュ化されたディレクトリをそのまま書かずに済むのでありがたい！

以上、大ちゃんの駆け出し技術ブログでした！