Capybara detecting CSS ID model ID with find('')

Question

I am currently working on an intranet for work which will include creating invoices.

While writing tests I am using Rspec and Capybara for testing and while running a request test I want to create an invoice and add a couple of items to make sure the vat is calculated correctly.

However I seem to be having an issue where Capybara finds the first #item_price and tries to match that instead of the newly created item.

Below is some of the code in my request test.

...
...
# Laptop for 369.96 inc vat
click_link "Add Item"
fill_in "Quantity", :with => 1
fill_in "Price", :with => 369.96
fill_in "Description", :with => "laptop for 369"
click_button "Create Item"
page.should have_content("Item was successfully created")

find('#item_quantity').should have_content(1)
find('#item_price').should have_content(369.96)
find('#item_description').should have_content("laptop for 369")
find('#item_total').should have_content(369.96)

find('#invoice_subtotal').should have_content(308.30)
find('#invoice_vat').should have_content(61.66)
find('#invoice_total').should have_content(369.96)

# Laptop for 337.53 inc vat
click_link "Add Item"
fill_in "Quantity", :with => 1
fill_in "Price", :with => 337.53
fill_in "Description", :with => "laptop for 337"
click_button "Create Item"
page.should have_content("Item was successfully created")

find('#item_quantity').should have_content(1)
### the offending code below
find('#item_price').should have_content(337.53)
###
find('#item_description').should have_content("laptop for 337")
...
...

I would like to be able to add #item_price_2 where 2 would be the item ID. When doing this and changing find('#item_price').should have_content(337.53) to find('#item_price_#{invoice.id}').should have_content(337.53) I get the exception:

Nokogiri::CSS::SyntaxError:
unexpected '#' after '[#<Nokogiri::CSS::Node:0x007f991889f270 @type=:CONDITIONAL_SELECTOR, @value=[#<Nokogiri::CSS::Node:0x007f991889f3d8 @type=:ELEMENT_NAME, @value=["*"]>, #<Nokogiri::CSS::Node:0x007f991889f9c8 @type=:ID, @value=["#item_price_"]>]>]'

Also changing it to double quotes "#item_price_{invoice.id}" gives me this exception:

undefined local variable or methodinvoice' for #

I'm guessing this is because I'm not using FactoryGirl so invoice isn't set as a method yet. I'm not using FactoryGirl in this occasion because I would like to test how the user would interact with the invoice and items forms.

What would be the best way to fix this problem? Is there a better way of doing what I am trying to do?

Many thanks in advance!

Answer 1

Your guess about invoice not being set yet is correct. After your form is submitted you could set it:

invoice = Invoice.last

Then your specs should pass.