Question

我的应用程序需要测试任何产品的最爱功能。Products List & UI

当用户点击代码段中显示的心形图标时，它会将该产品添加到“收藏夹”列表中。我想知道点击心脏图标的Capybara / 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)

收藏夹图标的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>

Answer 1

由于您有多个“收藏”图标，因此您需要在给定的父容器中找到您的图标，而无法查看完整的html页面类似的东西：

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

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

1 个答案: