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

Answer 4

page.should

is now deprecated. Use instead

expect(page).to

Full example :

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

Answer 5

这有用吗？

page.should have_xpath('//img[@src="/public/images/foo.png"]')

Answer 6

If you have a lot of images that you would like to test you could create a has_image? matcher for Capybara.

It is easy and this post explains it step-by-step: Adding a has_image? Matcher to Capybara

Answer 7

Yes, but these xpath tests won't deal with the fact that...

/public/images/foo.jpg
public/images/foo.jpg
http://mydomain.com/public/images/foo.jpg

...are all the same valid link to the image.

Answer 8

this syntax worked for me and is more readable.

page.should have_css("img", :src => "/public/images/foo.png")