如何使用水豚点击图标？

Question

I want to test the Heart icon- The method should click on the Heart 我正在使用水豚测试最喜欢的功能 ("Heart icon")。我是水豚黄瓜的新手。所以想知道有没有点击水豚心形图标的方法

我正在使用此代码。

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

find('only one class here').click

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

Answer 2

您得到 ElementNotFound 的可能性很大，因为该元素在页面上不可见。这可能是因为您用来显示图标的 css 最终 <i> 元素的大小为 0px x 0px -- 如果您可以调整 css 以提供它的大小应该可以工作，或者尝试单击包裹 i 的 <a> 元素 - 类似于

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

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

的事情

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

这将使第二个发现的范围仅限于在其中有棒球帽描述的方块内寻找心脏

如何使用水豚点击图标？

How can I click on an icon using capybara?

ruby-on-rails

cucumber

capybara

angularjs