如何在 Rails 3 中使用 Cucumber / Capybara 找到页面上的图像答案

【问题标题】：How do I find an image on a page with Cucumber / Capybara in Rails 3如何在 Rails 3 中使用 Cucumber / Capybara 找到页面上的图像
【发布时间】：2011-01-27 04:02:38
【问题描述】：

我正在使用带有 Rails 3 的 Cucumber / Capybara 并尝试在上传后验证图像的存在。我不确定如何检查图像的 url 来验证它。

我有以下场景：

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"

除了最后一步，一切都通过了。

我已经为我的步骤定义尝试了此方法，如果它是页面上的文本，则效果很好，但不适用于图像 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 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

导致以下错误：

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"'

我假设您需要一个 nokogiri 步骤才能正确找到它。或者如果有更好的方法，我愿意接受建议。如何验证我刚刚上传的图片是否在页面上？谢谢。

【问题讨论】：

在您的步骤定义中，您遇到了一个常见的水豚错误。如果我没记错的话，尝试使用“page.body”而不是“response.body”。
我不知道您是否可以在 xpath 中使用正则表达式，但如果您可以访问您的 Listing 实例，您可以只使用字符串插值 "//img[@src='/public /images/#{@listing_id}/foo.png']"
此页面包含一个很好的 CSS3 选择器参考，它将帮助您：reference.sitepoint.com/css/css3attributeselectors

标签： ruby-on-rails cucumber paperclip

【解决方案1】：

Nokogiri 的解决方案应该可以正常工作。唯一的问题是 Cabybara API 与 Webrat 不同，因此您必须使用 page.body 而不是 response.body。

但还有一种更好的方法来使用 Cabybara 测试图像：

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

【讨论】：

谢谢。这很好用。还有一件事。我的文件夹名称是基于listing_id 的变量。如何在此处使用仅按图像名称（而不是整个 url）搜索的正则表达式？
XPath 支持通配符，所以在我脑海中，我想你可以这样写：page.should have_xpath("//img[@src=\"/*/*/#{image}\"]")
我似乎无法弄清楚如何让它与 Dragonfly 生成的 URL 一起工作。它们看起来像这样：/media/BAh_some_long_string_AwIw/12_11_52_810_5x5.jpg?s=7e360000，其中5x5.jpg 是我的文件名。我试过类似：//img[@src="/media/*/*#{image}?s=*"] 但它不起作用。有什么建议吗？
@Ramon，如果您还没有找到解决方案，这里是：stackoverflow.com/questions/5331231/…
我无法让正则表达式在图像源中工作。如果有人知道方法，请在此处添加。干杯。

【解决方案2】：

您好，我不擅长 XPATH，但您可以尝试使用 CSS：

如果 page.respond_to? ：应该 page.should have_selector("img[src$='#{imagename}']") 别的断言 page.has_selector?("img[src$='#{imagename}']") 结尾

希望有帮助！杰拉姆比

【讨论】：

这也可以：page.should have_css("img[src$='#{imagename}']")

【解决方案3】：

你可以这样测试，也不依赖路径：

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

【讨论】：

这用于保存在动态路径中的图像，例如回形针附件。

【解决方案4】：

page.should

现已弃用。改为使用

期望（页面）.to

完整示例：

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

【讨论】：

【解决方案5】：

这行得通吗？

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

【讨论】：

谢谢。这很好用。还有一件事。我的文件夹名称是基于listing_id 的变量。如何在此处使用仅按图像名称（而不是整个 url）搜索的正则表达式？

【解决方案6】：

如果您有很多想要测试的图像，您可以创建一个 has_image？ Capybara 的匹配器。

这很简单，这篇文章一步一步地解释它：Adding a has_image? Matcher to Capybara

【讨论】：

【解决方案7】：

是的，但是这些 xpath 测试无法处理...

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

...都是相同的图片有效链接。

【讨论】：

【解决方案8】：

这种语法对我有用，并且更具可读性。

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

【讨论】：