Ruby Build a Todo List Application with Rails 4 Build a Todo List Application with Rails 4 Marking Todo Items Complete

Chris Buczkowski
Chris Buczkowski
3,939 Points

Receiving 'ambiguous match, found 2 elements matching css "h1"' - rspec test error

somewhere in the course of this video I'm introducing the error below into my test, but I'm unsure how to fix it. up to this point, I've been able to clear out all of the errors, and was only getting those that Jason is getting in the course videos (aside from the ul/li -->> table/tr/td change stuff he did in this video which caused errors which I was able to figure out and fix).

here's the failure:

Failures:

  1) Viewing todo items displays the title of the todo list
     Failure/Error: within("h1") do
     Capybara::Ambiguous:
       Ambiguous match, found 2 elements matching css "h1"
     # ./spec/features/todo_items/index_spec.rb:9:in `block (2 levels) in <top (required)>'

I was able to comment stuff out until I narrowed it down to this line in my application.html.erb file:

        <h1><%= link_to "Odot", root_path %></h1>

I'm not sure where I need to look.

one thing I did try was changing the tags there to h2 tags instead of h1, and that cleared up the testing error...

Finished in 0.96495 seconds
21 examples, 0 failures

but it causes the actual test criteria to fail (which I sort of vaguely grasp)

Failed examples:

rspec ./spec/features/todo_items/index_spec.rb:7 # Viewing todo items displays the title of the todo list

I think I kind of understand what's happening. there's just the one h1 tag in the application.html.erb file, but somewhere, another h1 tag is getting pulled into the page as well, from another file somewhere, but where I'm most lost (I think) is where that is pulling from, and how to correct it.

so I guess I have three questions...

first, where should I be looking to fix this (and more specifically, how)?

second, in the 'real world', would this be the sort of thing that would normally be handled by adding an id attribute to the html tag, in order to prevent the test from being confused as to which h1 element to look at?

third, why is it referencing CSS, and not HTML as the cause of the error?

Chris Buczkowski
Chris Buczkowski
3,939 Points

sorry, I just realized I posted this question to the wrong video. this is actually for the Writing Test Helpers video.

1 Answer

Maciej Czuchnowski
Maciej Czuchnowski
36,429 Points

Your second h1 is probably located in the todo_list show view or todo_items index view. Yes, normally you would add some unique id or at least a class to your elements to eliminate ambiguity. It references css because within can be used to look for DOM elements by their class and id as well. It is more common than using it only with an html tag, because it's very likely that there are more tags like this on the page which causes ambiguity errors ;).

Chris Buczkowski
Chris Buczkowski
3,939 Points

thanks Maciej! looks like it's in the todo_items index.html.erb file like you suggested. I tried swapping in h2 instead for that and get a different error, so that's got to be it.

but... does that mean I missed something in the course of this video (particularly in this file)? did he do anything to address this? it would have been much easier (for me, anyway) if he'd tested at the end.

here's my index.html.erb file.

<h1><%= @todo_list.title %></h1>

<table class="todo_items">
    <% @todo_list.todo_items.each do |todo_item| %>
    <tr id="<%= dom_id(todo_item) %>">
        <td><%= todo_item.content %></td>
        <td><%= link_to "Edit", edit_todo_list_todo_item_path(todo_item) %>
        <%= link_to "Delete", todo_list_todo_item_path(todo_item), method: :delete, data: { confirm: "Are you sure?"} %></td>
    </tr>
    <% end %>
</table>

<p>
    <%= link_to "New Todo Item", new_todo_list_todo_item_path %>
</p>
Chris Buczkowski
Chris Buczkowski
3,939 Points

so I just decided to move along regardless of the error, since I've been stuck on this silly point for days. I'm in the last video of the module (Viewing Todo Lists) and within the first minute he changes the h1 to an h2 tag, which should clear up the error. I suppose I should have just taken it on faith that the steps taken to that point were enough and anything else would be cleared up later. it's easy to drive oneself crazy when trying to be too careful, I guess. as always, appreciate the insight, Maciej!

Maciej Czuchnowski
Maciej Czuchnowski
36,429 Points

I had this type of problem a few times - I got an error, googled for answers, found a solution after a long time and then Jason fixed it in the video that followed ;).