HHH v4

Capybara cheatcheat

Edit
equivalent Web Development
Public
capybara
Rails
RSpec


find('[data-turbo-frame="menu"]').click


find_all("input").first.fill_in with: "tomas"

<input data-order="0001">
<input data-order="0002">

find_all("input")
  .sort_by { |input_node| input_node["data-order"].to_i }
  .last
  .fill_in with: "Nikola"

page.has_selector?("h2", text: "Ready to send", wait: 1)

expect(page).to have_link("Export", href: "http://www.test.com/companies/123") # title + exact url
expect(page).to have_link(href: "http://www.test.com/companies/123")           # exact url only

expect(page).to have_link("Export", href: /companies\/123/)                    #regexp

path =  Regexp.escape("/users/#{user.id}/article/#{article.id}/conversion_reports/export.csv?report_type=weekly")
expect(page).to have_link("Export", href: /#{path}/)


first(:link, href: "http://eq8.eu").click
all(:link, href: "http://eq8.eu")
all(:link, href: nil)
click_link('Go to checkout')
find_link(title: 'Add User')
click_on('Save')
find(:link_or_button, 'go-back')

Match hidden elements


Capybara match only visible elements, If element has display: none prop you need to:

expect(page).to have_selector("input[type=submit]", visible: false)


Match Tailwind pseudo class


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

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

expect(comp).to have_selector(".checked\:tw-bg-primary-600") # double quotes won't work due to interpolation

Partial match using star 


<img src="https://eq8.eu/images/just_name.png?abc=123" alt="bla">

expect(page).to have_css(img[src*='just_name.png'][alt=bla]


Selectors


expect(page).to have_selector("[data-notification-type=notice]", text: "Element Must have selector + text")
expect(page).to have_selector("[data-notification-type=notice][role=alert]", text: "Element Must have both selectors + text")