2

My application requires to test favorite feature for any product.Products List & UI

When a user click on the heart icon shown in the snippet, it will add that product into Favorites list. I would like to know about the Capybara/Cucumber method to click on the heart icon.

I have tried using XPATH but it seems not working. The code that I tried is as follow.

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

I have also tried following capybara method using XPATH. It is also not working.

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

Also, I tried following code which is throwing out an error.

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

Error: 

  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)

The HTML code for the Favorite icon is as follow:

<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>
Chints Vadgama
  • 93
  • 11
  • When you say "not working" please give the actual errors you're getting. Also, are there multiple favorite elements on the page? What differentiates this element from the others? If it's the only one, which contained element needs to be clicked on? Does just find('favorite a').click() work for you? – Thomas Walpole Jan 23 '16 at 01:28
  • Thanks for replying to my question. ` find('favorite').click()` results into ambiguous error. I have tried almost everything but could not figure out the right way. – Chints Vadgama Jan 23 '16 at 01:33
  • ok -- that means there are multiple 'favorite" elements on the page -- what is different about them -- are they inside specific sections that you can scope to? do they each have different contents? You may need to show more of the pages html – Thomas Walpole Jan 23 '16 at 01:34
  • They don't have different contents. I can scope them in this way. 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 – Chints Vadgama Jan 23 '16 at 01:36
  • ok -- so you're saying theres a list of search results - with each containing an `` element with a class of ng-scope -- so do `find("div.search-results-wrapper").first('a.ng-scope', minimum:1).click()` – Thomas Walpole Jan 23 '16 at 01:39
  • also - the xpath in your first example is way too long to be useful -- even if it works it's going to very brittle to page changes, much better to scope it to an identifiable section (like the search-results-wrapper) than use an xpath that maps out the entire page. – Thomas Walpole Jan 23 '16 at 01:52

1 Answers1

1

Since you have multiple "favourite" icons you would need to find your icon within a given parent container, not being able to see the full html page it would go something like:

within(".myParentContainer") do
   find(".icon-heart-filled").click
end
Mantas
  • 3,179
  • 4
  • 20
  • 32