在 Tailwind 伪类名上使用 Capybara 查找 css 选择器

Question

假设我有一个带有 Tailwind 类样式的单选按钮

<input type="radio" class="bg-red-500" checked="checked"/>

我可以用水豚的匹配器找到该元素

expect(page).to have_selector(".bg-red-500")

但是，我如何找到使用 Tailwind 的伪元素类名称样式的 emement？

这行不通：

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")

Answer 1

事实证明双引号是罪魁祸首:) ...更准确地插值

"\:"

这不起作用👎

expect(comp).to have_selector(".checked\:tw-bg-primary-600")

但这确实有效👍

expect(comp).to have_selector('.checked\:tw-bg-primary-600')

或

expect(comp).to have_selector(%q(.checked\:tw-bg-primary-600))