How do I find an image on a page with Cucumber / Capybara in Rails 3

Question

I am using Cucumber / Capybara with Rails 3 and am trying to validate the existence of an image after upload. I'm not sure how to check the url of the image to validate it.

I have the following scenario:

Scenario: Create new listing
    Given I am on the new listing page
    When I fill in "listing_name" with "Amy Johnson Photography"
    And I attach the file "features/support/test_image.jpg" to "listing_images_attributes_0_photo" 

    And I press "Create"
    Then I should see "Amy Johnson Photography"
    And I should see the image "test_image.jpg"

Everything passes except the last step.

I've tried this for my step definition, which works great if it's text on the page, but doesn't for an image url:

Then /^I should see the image "(.+)"$/ do |image|
  if page.respond_to? :should
      page.should have_content(image)
    else
      assert page.has_content?(image)
    end
end

Then I've also tried something like this step definition instead:

Then /^I should see the image "(.+)"$/ do |image|
    html = Nokogiri::HTML(response.body)
    tags = html.xpath('//img[@src="/public/images/foo.png"]')
    # tags.length.should eql(num_of_images)
end

which causes the following error:

And I should see the image "test_image.jpg"                                                    # features/step_definitions/listing_steps.rb:41
      undefined method `body' for nil:NilClass (NoMethodError)
      ./features/step_definitions/listing_steps.rb:42:in `/^I should see the image "(.+)"$/'
      features/manage_listings.feature:24:in `And I should see the image "test_image.jpg"'

I'm assuming you need a nokogiri step to find this properly. Or if there's a better way, I'm open to suggestions. How can I validate that the image I just uploaded is on the page? Thanks.

Answer 1

The solution with Nokogiri should work fine. The only problem is that the Cabybara API is different to Webrat, so instead of response.body, you must use page.body.

But theres an even better way to test for the image with Cabybara :

Then /^I should see the image "(.+)"$/ do |image|
    page.should have_xpath("//img[@src=\"/public/images/#{image}\"]")
end

Answer 2

Hi I'm not good with XPATH but with CSS you can try :

  if page.respond_to? :should
    page.should have_selector("img[src$='#{imagename}']")
  else
    assert page.has_selector?("img[src$='#{imagename}']")
  end

wish helps ! jramby

Answer 3

You can test it in this way, and also not depending on the path:

Then /^I should see the image "(.+)"$/ do |image|
    page.should have_xpath("//img[contains(@src, \"#{image}\")]")
end