Interacting with React dropdowns using Selenium (Java): "other element would receive the click"

Question

I'm having some difficulty on interacting with a React applications dropdown boxes.

I need to simply select a dropdown by locator and then check and uncheck various checkboxes.

The following snippet is an example of 1 of 5 of such boxes:

<div class="MuiFormControl-root jss55" xpath="1">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined" data-shrink="false" for="sectorDescription">Sector</label>
<div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl">
    <div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSelect MuiOutlinedInput-inputSelect MuiSelect-outlined" tabindex="0" role="button" aria-haspopup="listbox"><span>&#8203;</span></div>
    <input type="hidden" id="sectorDescription" value="">
    <svg class="MuiSvgIcon-root MuiSelect-icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
        <path d="M7 10l5 5 5-5z"></path>
    </svg>
    <fieldset aria-hidden="true" class="jss131 MuiOutlinedInput-notchedOutline" style="padding-left: 8px;">
        <legend class="jss132" style="width: 0.01px;"><span>&#8203;</span></legend>
    </fieldset>
</div>

So, to select this first checkbox, I first need to click. I have tried selectors: css:

label[for='sectorDescription']

xpath:

//label[contains(text(),'Sector')]

My code:

//Test script    
pricesPage.selectSectorDropDown();

//Page Object
public void selectSectorDropDown(){
waitForIsClickable(sectorDropDown, 20);
click(sectorDropDown);
}

//BasePage
protected Boolean waitForIsClickable(By locator, Integer... timeout) {
    try {
        waitFor(ExpectedConditions.elementToBeClickable(locator),
                (timeout.length > 0 ? timeout[0] : null));
    } catch (org.openqa.selenium.TimeoutException exception) {
        return false;
    }
    return true;
}

Both of which yield:

element click intercepted: Element <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined" data-shrink="false" for="sectorDescription">...</label> is not clickable at point (157, 273). Other element would receive the click:

I am using a custom written Wait method to ensure the element is clickable. I need another strategy but am unsure where to go with this because I'm not sure why the element is not clickable?

yes, this is a dupe, my apologies - I had not found the answer listed — Steerpike, Oct 01 '19 at 09:56

score 0 · Answer 1 · answered Oct 01 '19 at 09:38

Looks like the element that you're trying to click at is partially hidden behind other element. Selenium clicks at certain coordinates of the element. You should analyze which element overlaps your target one and for which area. Then:

As overlapping elements might be caused by a small viewport either try to increase window size if possible (e.g. maximize)
Or check if there is a part of your target element that is not covered with other one, move cursor to that part (you will have to evaluate required offset) and click in chain of Actions.

thank you @Alexey R. I think I have solved using Actions class — Steerpike, Oct 01 '19 at 09:41

Interacting with React dropdowns using Selenium (Java): "other element would receive the click"

1 Answers1