Click Element failing when used in the middle of the code but working when used at the start

I want click on arrow buttons on ui page. There will be n number of arrows depending on the option selected so I stored it in a variable and i used following code

${arrows}   Get WebElement  ${arrow_xpath}
FOR  ${arrow}  IN  ${arrows}
     Wait Until Page Contains Element  ${arrow}
     Wait Until Element Is Clickable   ${arrow}
     Run Keyword Until Success   Click Element  ${arrow}
END  

this works perfectly fine when I’m using in start of the code but fails if i use in the middle of the code or anywhere after the code
I also tried with by giving the index position using FOR loop but still not working

When im not using above code at the start and using somewhere else in the code it shows error as :

Keyword 'Click Element' failed after retrying for 10 seconds. the last error was :  ElementClickInterceptedException: Message element click intercepted :  Element -------- (xpath)is not clickable at point (211,687). Other element would receive the click:  ---------(xpath)

Can anyone help or any suggestions as I tried by using all the waits? and also I dont want to use press keys in the code

Hi Leo,

This is probably the important part of the error:

For this you’ll need to look at the html and compare to what your ${arrow_xpath} selects, to what the element that’s in front of it is, some possibilities.

  • does your xpath select the arrow image?
  • is the arrow image wrapped in a <div>, <span>, <a> (link), something else?
  • is there a text <a> with padding that overlaps the arrow?

It’s possible (indeed common) for html elements to be transparent and overlay on top of an image, this is often done in menus to make an arrow or menu icon look clickable but what you actually click is the menu item link that often only has text within it.

Sometimes the “link” is not even a hyperlink (<a>) but rather another element like a <div> or similar with an onclick Event

Without seeing the page and being able to inspect it with devtools myself It’s pretty difficult to tell you exactly what the problems is beyond this generic information.

Hopefully this helps,

Dave.

<div class="d-flex cursor pointer py-2">
  <div class="d-flex short-view-icon align-items-centre">
    <i class="icon-arrow-up color-primary">
      ::before
    </i>
  </div>
</div>

HTML page looks something like that
we have to click on “icon-arrow-up color-primary”

Hi Leo,

As I mentioned before I need to be able to see what is being rendered to have any idea which element is causing you the issue, there is simply not enough information here to help you figure that out.

The error message is telling you there is another element that sits over the top of the <i class="icon-arrow-up color-primary"> element so when you try to click the <i> element the other element would receive the click.

In the error message did you change (xpath) from whatever xpath it was it was to (xpath)? If so you can use the second xpath, (the one after Other element would receive the click: ---------) to tell you which element is in front of the arrow, that is the element you need to click.

If you can’t give a link to the site for us to help, perhaps you can show my responses to your developers and they can help you identify the element that’s causing you this issue.

Dave.