【RSpec】クラスでマッチさせようとした場合の注意点

はじめに

• 特定のタグ、CSS (tailwincss) 要素、特定の文字列が表示されているか否かを検証する capybara の system テストを行った際のミス

tailwindcss を使用している場合は / に注意

結論

• スラッシュ (/) をクラスで使用している場合はエスケープする必要がある

例) spec/system/XXX_spec.rb

expect(page).to have_css '.w-1\/2'

えらーについ

• 以下のように、特定のタグ、CSS (tailwincss) 要素、特定の文字列が表示されているか否かを検証するで検証しようとした際になぜかエラーが出てしまう

修正前

expect(page).to have_css 'button[name="button"][type="submit"].w-1/2.p-2.border.rounded-md.bg-gray-800.text-white', text: '検索'

エラー文

Failure/Error: expect(page).to have_css 'button[name="button"][type="submit"].w-1/2.p-2.border.rounded-md.bg-gray-800.text-white', text: '検索'

     Selenium::WebDriver::Error::InvalidSelectorError:
       invalid selector
       from javascript error: {"status":32,"value":"An invalid or illegal selector was specified"}
         (Session info: chrome=131.0.6778.108); For documentation on this error, please visit: https://www.selenium.dev/documentation/webdriver/troubleshooting/errors#invalid-selector-exception

修正後

• エラー文で invalid selector とあるように「CSSセレクタが無効だ」と言われているので、tailwindcss の記述が誤っているであろうと察しがつきます
• 先に結論でも書きましたが『 / は別の意味を持つためエスケープする必要がある』という事になります

• 以下のリンクで分かりやすく説明されていますが、『background のオプションの区切りを示すために必要となる "/"』『URL における "/"』『除算における "/"』といった意味を持っているためエスケープが必要となる

https://csshtml.work/css-symbol/#i-39

修正後

expect(page).to have_css 'button[name="button"][type="submit"].w-1\/2.p-2.border.rounded-md.bg-gray-800.text-white', text: '検索'

---

参考資料