Selenium element being blocked by non-existent element

Question

I'm trying to run some Selenium tests in Java but some fields are being blocked by another one and aren't clickable. The problem is, that other field doesn't actually exist in the page source.

The error is: Element <select id="pets" class="sumo form-control SumoUnder" name="pets"> is not clickable at point (1025.833351135254,677.4000244140625) because another element <span> obscures it

There is no element that doesn't have other tags (id, class, etc.) with it. So what is this mysterious field?

Interestingly, if I try to access some other fields first, I get different obscuring fields, which ALSO don't exist on the page. Such as:

<p class="CaptionCont SelectBox">

Watching the test interactively doesn't help; there's nothing visible that's blocking the elements when the error's thrown.

Where are these phantom fields coming from, and how do I stop them from blocking my fields?

EDIT: I have found that these fields are being added by SumoSelect. They don't show up when you view the source of the page, but they're there if you save the page and open it locally.

<div class="col form-group">
  <label for="pets">Pets</label>
  <div class="SumoSelect sumo_pets" tabindex="0" role="button" aria-expanded="false">
    <select id="pets" name="pets" class="sumo form-control SumoUnder" tabindex="-1">
      <option value="">Select</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <p class="CaptionCont SelectBox" title="Select">
      <span class="placeholder">Select</span>
      <label><i></i></label>
    </p>
    <div class="optWrapper">
      <ul class="options">
          <li class="opt"><label>Select</label></li>
          <li class="opt"><label>1</label></li>
          <li class="opt"><label>2</label></li>
          <li class="opt"><label>3</label></li>
        </ul>
    </div>
  </div>
</div>

Try to wait until element is clickable, how to do it you can find [here](https://stackoverflow.com/questions/16057031/webdriver-how-to-wait-until-the-element-is-clickable-in-webdriver-c-sharp/16057521) — Sers, Sep 21 '18 at 21:08
How long do you think I should try? Because I've tried that for 5 minutes, but the field never becomes clickable. — Saul, Sep 21 '18 at 22:13
Does any of this help you: https://stackoverflow.com/a/19763087/3124333 ? If not, you will need to post a [mcve]. — SiKing, Sep 21 '18 at 23:54
I've added some info. I discovered the page (I didn't write it) is using SumoSelect, which is creating the problem fields. — Saul, Sep 23 '18 at 03:44

score 0 · Answer 1 · answered Sep 25 '18 at 09:57

0

if not clickable, may be selectable.

Select pets = new Select(driver.findElement(By.id("pets")));
pets.selectByIndex(1);

answered Sep 25 '18 at 09:57

pburgr

1,722
1
11
26

score 0 · Answer 2 · answered Sep 25 '18 at 10:15

0

When you are using a JS library to enhance the Select - you need to see the final DOM created by the JS library. In the case of SumoSelect - the CSS for the select box itself is:

<p class="CaptionCont SelectBox" title=" Volvo">
   <span> Volvo</span>
   <label><i></i></label>
</p>

See the span there? If you want to click the dropdown - you need to click that span.

answered Sep 25 '18 at 10:15

Dakshinamurthy Karra

5,353
1
17
28

Thanks! That let me click it, but then how do I select the index I want to? It won't let me put the span in a new Select() to use selectByIndex. – Saul Oct 01 '18 at 14:15
I guess you need to click the corresponding labels in the optWrap div. – Dakshinamurthy Karra Oct 01 '18 at 17:26

score 0 · Answer 3 · answered Sep 25 '18 at 10:36

0

Try to click using JavaScript Executor.

Reference Link:- http://learn-automation.com/click-in-selenium-webdriver-using-java-script/

answered Sep 25 '18 at 10:36

Amit Joshi

57
3

Selenium element being blocked by non-existent element

3 Answers3