Let say I have a radio button styled with Tailwind class
<input type="radio" class="bg-red-500" checked="checked"/>
I can find the element with Capybara’s matchers
expect(page).to have_selector(".bg-red-500")
However how would I find an emement styled with Tailwind’s pseudo element class names?
<input type="radio" class="checked:bg-red-500" checked="checked"/>
this doesn’t work:
expect(page).to have_selector(".checked:bg-red-500")
expect(page).to have_selector(".checked:bg-red-500")
expect(page).to have_selector("checked:.bg-red-500")
2
Well turns out double quotes are to blame 🙂 …more percisly interpolation of ":"
This doesn’t work 👎
expect(comp).to have_selector(".checked:tw-bg-primary-600")
but this does work 👍
expect(comp).to have_selector('.checked:tw-bg-primary-600')
or
expect(comp).to have_selector(%q(.checked:tw-bg-primary-600))