Question

I want to test the Heart icon- The method should click on the Heart 我正在使用水豚来测试最喜欢的功能（＆＃34; Heart icon＆＃34;）。我是水豚黄瓜的新手。所以想知道是否有任何方法可以点击capybara中的心形图标。

我正在使用此代码。

Then (/^I should see heart icon on every product$/) do
      Capybara.page.find('i.heart.icon-heart-outline').click
end

但这是一个错误。

Unable to find css "i.heart.icon-heart-outline" (Capybara::ElementNotFound)

HTML代码示例如下。

<favorite class="product-action ng-scope ng-isolate-scope" ng-if="!ui.showIpsaProductCell()" product="result"><a class="ng-scope not-active" ng-click="toggle(true)" active="::product.favoriting" ng-mouseenter="product.showList = true" ng-mousedown="product.favoriting = true">
  <i class="heart icon-heart-outline" ng-class="::{
    'icon-heart-filled':
      product.hasFavorite || !showCount || newProductPage,
    'icon-heart-outline':
      !product.hasFavorite &amp;&amp; showCount &amp;&amp; !newProductPage
  }"></i>
  <!-- ngIf: ::showCount --><span ng-if="::showCount" class="count ng-scope">
    1
  </span><!-- end ngIf: ::showCount -->
  <!-- ngIf: ::addToList && product.hasFavorite -->
</a>
</favorite>

Answer 1

您最有可能获得ElementNotFound，因为该元素在页面上不被视为可见。这可能是因为你用来显示图标的css最终是<i>元素的大小为0px×0px - 如果你可以调整css给它一些大小它应该工作，或者尝试点击包含i的<a>元素 - 比如

find(:xpath, ".//a[i[contains(@class, 'icon-heart-outline')]]").click

如果你得到不明确的匹配，那么你需要将查找范围限定在页面上的正确元素 - 查看你链接到的图像，如果每个块都是带有类项目的div，那么你可以做类似的事情

find('div.item', text: 'Baseball Cap').find(:xpath, ".//a[i[contains(@class, 'icon-heart-outline')]]").click

这样可以将第二个发现范围仅仅寻找具有棒球帽描述的区域内的心脏

Answer 2

find('only one class here').click

Capybara.page.find('.icon-heart-outline').click

如何使用capybara点击图标？

2 个答案: