4

I need to identify "X" (cancel) button. HTML looks like this:

<div class="ingredients-container-header">
<div class="ingredients-container-header-name">Ingredients:</div>
<div class="ingredients-container-header-close">
<span class="material-icons cancel-icon " style="color: rgba(0, 0, 0, 0.87); position: relative; font-size: 24px; display: inline-block; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;">cancel</span></div></div>

Tried doing it directly by span but it does not work (the problem might be that, it's not unique (many cancel button has the same span)

driver.FindElement(By.XPath("//span[@class ='material-icons cancel-icon')]"));

The thing which needs to be done, is to go by the class: "ingredients-container-header-close" and then somehow "go down" to the span. Can someone tell me how it can be done? (1 parent element and than few child elements, choosing that child one)

Ixi11
  • 219
  • 2
  • 14

2 Answers2

3

You can use this Xpath : 

//div[text()='Ingredients:']/following-sibling::div/span[contains(@class,'cancel-icon')]

cssSelector would be : 

div[class^='ingredients-container']+div>span

try out one of these !

cruisepandey
  • 28,520
  • 6
  • 20
  • 38
  • Did you try out this cssSelector or Xpath ? – cruisepandey Apr 18 '18 at 07:31
  • @cruisespandey - thank you, xpath works correctly: First of all we're going for the header div (looking for the text inside) then we're using /"following-siblings::div/span[contains(@class, ....) - I don't get that one, siblings are elements on the same level? Also what "::" means? Thank you. – Ixi11 Apr 18 '18 at 07:35
  • following-siblings means siblings that are just after the current node – cruisepandey Apr 18 '18 at 07:42
  • Yes siblings are elements at the same level but here we have preceding-sibling and following-sibling in Xpath. – cruisepandey Apr 18 '18 at 07:43
  • Refer this link for Xpath and clarity about :: : https://www.w3schools.com/xml/xpath_axes.asp – cruisepandey Apr 18 '18 at 07:46
2

Your experession must be //div[@class='ingredients-container-header-close']/span[@class='material-icons cancel-icon ']. You have extra space in class name.

Stanislav Machel
  • 349
  • 2
  • 20