Angularjs 如何在不使用xpath的情况下使用Cucumber单击元素？

我的应用程序需要测试任何产品的常用功能

当用户单击代码段中显示的心脏图标时，它会将该产品添加到收藏夹列表中。我想知道水豚/黄瓜点击心脏图标的方法

我尝试过使用XPATH，但它似乎不起作用。我尝试的代码如下

When(/^I click on the favourite icon on the first product$/) do
    find(:xpath,'/html/body/div[1]/div[2]/div/div/div/span/div/div/div/div[3]/div[1]/span[1]/div/div/div/div/div[4]/div[2]/div/favorite/a').click
end

我还尝试了使用XPATH遵循capybara方法。它也不起作用

When(/^I click on the favourite icon on the first product$/) do
    find(:xpath,'//a[contains(., "#heart")]).click 
end

另外，我尝试了下面的代码，它抛出了一个错误

When(/^I click on the favourite icon on the first product$/) do
  within("div.search-results-wrapper") do
    find(first('a.ng-scope')).trigger(:mouseover)
  end
end

错误：

  The given selector #<Capybara::Node::Element:0x007fd18d841690> is either invalid or does not result in a WebElement. The following error occurred:
      InvalidSelectorError: An invalid or illegal selector was specified (Selenium::WebDriver::Error::InvalidSelectorError)

给定的选择器#无效或未生成WebElement。发生以下错误：
InvalidSelectorError:指定的选择器无效或非法（Selenium:：WebDriver:：Error:：InvalidSelectorError）

收藏夹图标的HTML代码如下所示：

<favorite product="result" ng-if="!ui.showIpsaProductCell()" class="product-action ng-scope ng-isolate-scope"><a ng-mousedown="product.favoriting = true" ng-mouseenter="product.showList = true" active="::product.favoriting" ng-click="toggle(true)" class="ng-scope active">
  <i ng-class="::{
    'icon-heart-filled':
      product.hasFavorite || !showCount || newProductPage,
    'icon-heart-outline':
      !product.hasFavorite &amp;&amp; showCount &amp;&amp; !newProductPage
  }" class="heart icon-heart-filled"></i>
  <!-- ngIf: ::showCount --><span class="count ng-scope" ng-if="::showCount">
    1
  </span><!-- end ngIf: ::showCount -->
  <!-- ngIf: ::addToList && product.hasFavorite --><div component="add-to-list" ng-if="::addToList &amp;&amp; product.hasFavorite" class="ng-scope">
  <!-- ngInclude: '/modules/components/add-to-list/add-to-list.tpl.html' --><span ng-include="'/modules/components/add-to-list/add-to-list.tpl.html'" ng-controller="AddToListCtrl" class="ng-scope"><div ng-mouseleave="product.showList = false" class="add-to-list-desktop ng-scope">
  <!-- ngIf: product.showList -->
  <!-- ngIf: product.showListMenu && product.showList -->
</div>
</span></div><!-- end ngIf: ::addToList && product.hasFavorite -->
</a></favorite>

1.

由于您有多个“喜爱的”图标，您需要在给定的父容器中查找您的图标，如果无法查看完整的html页面，可能会出现如下情况：

within(".myParentContainer") do
   find(".icon-heart-filled").click
end

---

当你说“不工作”时，请给出你得到的实际错误。此外，页面上是否有多个常用元素？此元素与其他元素的区别是什么？如果它是唯一一个，那么需要单击哪个包含的元素？只是查找（'favorite a'）。单击（）对您有用吗？谢谢您回答我的问题。`查找（'favorite'）。单击（）`会导致不明确的错误。我几乎什么都试过了，但都找不到正确的方法。好吧，这意味着有多个“最爱”“页面上的元素--它们有什么不同--它们是否在您可以查看的特定部分中？它们各自有不同的内容吗？您可能需要显示更多没有不同内容的页面。我可以用这种方法来确定它们的范围。当（/^I单击第一个产品上的收藏夹图标时，$/）do in（“div.search-results-wrapper”）do find（first（'a.ng-scope'））.trigger（：mouseover）end endok——你是说有一个搜索结果列表——每个搜索结果都包含一个具有ng作用域类的

元素——那么do

find（“div.search-results-wrapper”）.首先（'a.ng-scope'，最小值：1）。单击（）