Finding a specific row in a table using capybara - html

Question

I have a users table that list out the users' ID, name, email and username. What I am attempting to do is verify that a specific entry is in that table.
So essentially what I would like to do is find the row that has ID = 22, then verify that name = John Smith, email = john#smith.com and username = jsmith. The able is setup as show below. What I don't understand is a couple of things...
How do I get a row with specific text, I.E. that as user.id = 22.
Once I have that row, how do I use it get each of the elements.
I thought I could do a sort of for loop but can't figure out how to set the has_selector? condition. (below is pseudocode)
page.all('tr').each do |tr|
next unless tr.has_selector?('td.id = 22') #psuedocode
expect(tr.get('td.name').to eq("John Smith")
#other expects here...
end
Table code
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<% #users.each do |user| %>
<tr>
<td class="id"><%= user.id %></td>
<td class="name"><%= link_to user.name, user %></td>
<td class="email"><%= user.base_name %></td>
<td class="username"><%= user.username %></td>
</tr>
<% end %>
</tbody>
</table>

Answer 1

A nice clean approach would be to add a "data-user-id" attribute to each tr element and then find the row you want with tr = find('tr[data-user-id="22"]'), but if that's not an option there are a number of ways to do this. Either of
td = page.find(:css, 'td.id', text: /^22$/) # find the id td with text of exactly 22
tr = td.find(:xpath, './parent::tr') # get the parent tr of the td
expect(tr).to have_css('td.name', text: 'John Smith')
or finding the row using just an xpath like
tr = page.find(:xpath, ".//tr[./td[#class='id'][text()='22']]")
expect(tr).to have_css('td.name', text: 'John Smith')
should do what you want. If you want to stick with the looping approach (not recommended because it will be slow - and the way your loop is structured it could just not verify anything) it would be
page.all('tr').each do |tr|
next unless tr.has_css?('td.id', text: /^22$/)
expect(tr).to have_css('td.name', text: "John Smith")
#other expects here...
end

Answer 2

Why not just do like this?:
feature "index users" do
let!(:user) { create(:user, name: "John Smith") }
it "shows users" do
visit users_path
within ".name_#{user.id}" do
expect(page).to have_content("John Smith")
end
end
end

Answer 3

This is not so much a technical answer as it is an alternative approach to avoid the need to write what could be brittle, and overly-complicated tests.
Often times, I am just verifying that some object appeared on the page by looking for some clever text. Maybe it is in a table, or maybe it is in a responsive grid... If I make my test care about the UI implementation, it could break when something changes in the UI.
My "trick" is to use some really unusual text for the test. While "John Smith" should work, you can use "John Zebra" and you will definitely not accidentally have that text appearing on the page.
But when I do need to care about data appearing in a table, I use dom_id for each row. In this example of a list of orgs for the super admin, the reseller org name appears in two rows -- the first being the reseller org's row, and he seond being in the reseller column for a referral org:
The table view code snippet...
%table.orgs-list.stripe
%thead
%tr
%th Created
%th Name
%th Reseller
...
%tbody
- organizations.each do |org|
%tr{id: dom_id(org)}
%td= org.created_at....
%td= link_to org.name, org
%td= org.reseller.try(:name)
...
And the cucumber test code snippet:
Then(/^I should see "([^"]*)" showing "([^"]*)" as the reseller$/) do |org_name, reseller_name|
org = Organization.where( name: org_name).first
reseller = Organization.where( name: reseller_name).first
dom_id = "organization_#{org._id}"
within("tr##{dom_id}") do
expect(page).to have_text(reseller.name)
end
end

Answer 4

def row_containing_cell_with_text(text, exact = false)
find('td,th', text: text, exact: exact).ancestor('tr')
end