3

I am writing a program using Selenium in Java to scrape a website (I would share the website, but you need an account so I don't think it would be helpful). I am using the chrome driver. I am getting stuck on trying to figure out how to click the "Run now" button on a page (html code snippet below). Selenium complains the button is unclickable even though I do an explicit wait until the button is clickable.

Here is my code:

public String getReport() {
    wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//*[@id='QTF_AdminTab']/a")));
    driver.get("theurl");
    wait.until(ExpectedConditions.urlToBe("theurl"));

    String oldtab = driver.getWindowHandle();
    wait.until(ExpectedConditions.elementToBeClickable(By.xpath("/html/body/div[1]/div[2]/div/div[1]/div/div/div[1]/div[4]/button[@class='_widget-form-run mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary']/span")));
    driver.findElement(By.xpath("/html/body/div[1]/div[2]/div/div[1]/div/div/div[1]/div[4]/button[@class='_widget-form-run mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary']/span")).click();
    //... I don't think the rest is relevant since the above line (line 114 in the log) is the one causing the trouble 
}

My xpath goes up to the <span> since the log statement says something with a wanted to get clicked. If I delete the span from the xpath, nothing changes.

Here is the log:

Starting ChromeDriver 83.0.4103.39 (ccbf011cb2d2b19b506d844400483861342c20cd-refs/branch-heads/4103@{#416}) on port 41202
Only local connections are allowed.
Please see https://chromedriver.chromium.org/security-considerations for suggestions on keeping ChromeDriver safe.
ChromeDriver was started successfully.
Jul 10, 2020 5:36:00 PM org.openqa.selenium.remote.ProtocolHandshake createSession
INFO: Detected dialect: W3C
Exception in thread "main" org.openqa.selenium.ElementClickInterceptedException: element click intercepted: Element <span class="mdl-button__ripple-container">...</span> is not 
clickable at point (796, 183). Other element would receive the click: <span class="mdl-button__ripple-container">...</span>
  (Session info: chrome=83.0.4103.116)
Build info: version: '4.0.0-alpha-6', revision: '5f43a29cfc'
System info: host: '______', ip: '_______', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '11.0.7'
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities {acceptInsecureCerts: false, browserName: chrome, browserVersion: 83.0.4103.116, chrome: {chromedriverVersion: 83.0.4103.39 (ccbf011cb2d2b..., userDataDir: C:\Users\______\AppData\Loca...}, goog:chromeOptions: {debuggerAddress: localhost:56109}, javascriptEnabled: true, networkConnectionEnabled: false, pageLoadStrategy: normal, platform: WINDOWS, platformName: WINDOWS, proxy: Proxy(), setWindowRect: true, strictFileInteractability: false, timeouts: {implicit: 0, pageLoad: 300000, script: 30000}, unhandledPromptBehavior: dismiss and notify, webauthn:virtualAuthenticators: true}
Session ID: e2b8ff1a23cd9b0932c00af2b1ffd2b5
        at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
        at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
        at java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
        at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:490)
        at org.openqa.selenium.remote.codec.w3c.W3CHttpResponseCodec.createException(W3CHttpResponseCodec.java:196)
        at org.openqa.selenium.remote.codec.w3c.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:129)
        at org.openqa.selenium.remote.codec.w3c.W3CHttpResponseCodec.decode(W3CHttpResponseCodec.java:53)
        at org.openqa.selenium.remote.HttpCommandExecutor.execute(HttpCommandExecutor.java:160)
        at org.openqa.selenium.remote.service.DriverCommandExecutor.execute(DriverCommandExecutor.java:83)
        at org.openqa.selenium.remote.RemoteWebDriver.execute(RemoteWebDriver.java:582)
        at org.openqa.selenium.remote.RemoteWebElement.execute(RemoteWebElement.java:316)
        at org.openqa.selenium.remote.RemoteWebElement.click(RemoteWebElement.java:85)
        at reliant.abusescanner.PCCclient.getReport(PCCclient.java:114)
        at reliant.abusescanner.Main.main(Main.java:72)

Here is the html code for the button:

<div class="flex-actions">
                <button class="_widget-form-run mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" data-upgraded=",MaterialButton,MaterialRipple">Run now<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                <!--<button class="_component-save mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--secondary" style="display:none">Save</button>-->
                <button class="_component-saveAs mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--secondary" style="" data-upgraded=",MaterialButton,MaterialRipple">Save As<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                <!--<button class="_component-delete mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--secondary" disabled>Delete</button>-->

                <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--secondary configMenuBtn" id="demo-menu-lower-right" data-upgraded=",MaterialButton,MaterialRipple">
                    More Actions <i class="material-icons configMenuList">arrow_drop_down</i>
                <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                <div class="mdl-menu__container is-upgraded"><div class="mdl-menu__outline mdl-menu--bottom-right"></div><ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events" for="demo-menu-lower-right" data-upgraded=",MaterialMenu,MaterialRipple">
                    
                    <li class="mdl-menu__item _component-save mdl-js-ripple-effect" tabindex="-1" data-upgraded=",MaterialRipple" style="display: none;">Save<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li>
                    <li disabled="disabled" class="mdl-menu__item _component-delete mdl-js-ripple-effect" tabindex="-1" data-upgraded=",MaterialRipple">Delete<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li>
                </ul></div>
            </div>

Here is a much larger segment of the html code (that includes the above), in case it would help you answer the question:

<div class="mdl-body">
    <div class="onboarding-report-section">
        Reduce the time it takes to setup and run a report.
        <a href="#" class="_onboarding-report-setup-details">Click here to learn more</a>
    </div>
    
    <h1>24 Hour Summary Report</h1>
    <div class="_form"><div class="_widget-root mdl-form">
        
            <div class="_widget-section mdl-form-section">
                <div class="_widget-fields"><div class="_form-field-save_config mdl-field saveConfigurationComponent">
        <div class="mdl-field-input">
            <div class="mdl-form-label flex-label">My saved settings</div>
            <div class="_publishOverlayPlaceholder"></div>
            <div class="_component-dropdown flex-dropdown"><span class="_catalyst-flyoutList-select dropdown-anchor-input " tabindex="0" style="width:300px;">
        <span class="dropdown-legend"></span>
        <span class="dropdown-label">
            
                    
                        
                            Unsaved
                            
                        
                    
                    
                    
            
        </span>
        <i class="material-icons dropdown-arrow">arrow_drop_down</i>
    </span></div>
            <div class="flex-actions">
                <button class="_widget-form-run mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" data-upgraded=",MaterialButton,MaterialRipple">Run now<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                <!--<button class="_component-save mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--secondary" style="display:none">Save</button>-->
                <button class="_component-saveAs mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--secondary" style="" data-upgraded=",MaterialButton,MaterialRipple">Save As<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                <!--<button class="_component-delete mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--secondary" disabled>Delete</button>-->

                <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--secondary configMenuBtn" id="demo-menu-lower-right" data-upgraded=",MaterialButton,MaterialRipple">
                    More Actions <i class="material-icons configMenuList">arrow_drop_down</i>
                <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                <div class="mdl-menu__container is-upgraded"><div class="mdl-menu__outline mdl-menu--bottom-right"></div><ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events" for="demo-menu-lower-right" data-upgraded=",MaterialMenu,MaterialRipple">
                    
                    <li class="mdl-menu__item _component-save mdl-js-ripple-effect" tabindex="-1" data-upgraded=",MaterialRipple" style="display: none;">Save<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li>
                    <li disabled="disabled" class="mdl-menu__item _component-delete mdl-js-ripple-effect" tabindex="-1" data-upgraded=",MaterialRipple">Delete<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li>
                </ul></div>
            </div>
        </div>
        <div class="_setting-instructions"></div>
        <div class="_component-field-error mdl-field-errors"></div>
    </div></div>
            </div>
        
            <div class="_widget-section mdl-form-section">
                <div class="_widget-fields"><div class="_form-field-dateEnding mdl-field">
        <div class="mdl-field-input datePickerComponent unSavedConfigField">
            <div class="mdl-field-header">
                <div class="mdl-form-label">Date (Ending)<span class="unSavedConfiglabelDisplay">(Date (Ending) won't be saved in the setting)</span></div>
                
             </div>
            <span class="_toggleRange" style="display: none;">From </span>
            <input class="_fromDate catalyst-datepicker" style="margin-right:25px;">
            <span class="_toggleRange" style="display: none;">
                To <input class="_toDate catalyst-datepicker">
            <input type="hidden" value="2020-07-10" name="end_date"></span>
        <input type="hidden" value="2020-07-10" name="start_date"></div>
        <div class="_component-field-error mdl-field-errors"></div>
    </div><div class="_form-field-unit mdl-field">
        <div class="mdl-field-input genericComponent">
         <div class="mdl-field-header">
            <div class="mdl-form-label">Unit</div>
            
         </div>
            
            <div class="_dropdown"><span class="_catalyst-flyoutList-select dropdown-anchor-input " tabindex="0" style="width:315px;">
        <span class="dropdown-legend"></span>
        <span class="dropdown-label">
            
                    
                        
                            All
                            
                        
                    
                    
                    
            
        </span>
        <i class="material-icons dropdown-arrow">arrow_drop_down</i>
    </span></div>
        </div>
        <div class="_component-field-error mdl-field-errors"></div>
    </div><div class="_form-field-floor mdl-field">
        <div class="mdl-field-input genericComponent">
         <div class="mdl-field-header">
            <div class="mdl-form-label">Floor</div>
            
         </div>
            
            <div class="_dropdown"><span class="_catalyst-flyoutList-select dropdown-anchor-input " tabindex="0" style="width:315px;">
        <span class="dropdown-legend"></span>
        <span class="dropdown-label">
            
                    
                        
                            All
                            
                        
                    
                    
                    
            
        </span>
        <i class="material-icons dropdown-arrow">arrow_drop_down</i>
    </span></div>
        </div>
        <div class="_component-field-error mdl-field-errors"></div>
    </div><div class="_form-field-timeEnding mdl-field">
        <div class="mdl-field-input hourMinuteTimeComponent">
            <div class="mdl-field-header">
                <div class="mdl-form-label">Ending Time</div>
            </div>
            <div class="_nestedContent">
                <div class="_nestedHours"><span class="_catalyst-flyoutList-select dropdown-anchor-input " tabindex="0" style="width:50px;">
        <span class="dropdown-legend"></span>
        <span class="dropdown-label">
            
                    
                        
                            13
                            
                        
                    
                    
                    
            
        </span>
        <i class="material-icons dropdown-arrow">arrow_drop_down</i>
    </span></div>
                <div class="_nestedMinutes"><span class="_catalyst-flyoutList-select dropdown-anchor-input " tabindex="0" style="width:50px;">
        <span class="dropdown-legend"></span>
        <span class="dropdown-label">
            
                    
                        
                            00
                            
                        
                    
                    
                    
            
        </span>
        <i class="material-icons dropdown-arrow">arrow_drop_down</i>
    </span></div>
            </div>
        </div>
        <div class="_component-field-error mdl-field-errors"></div>
    </div><div class="_form-field-summaryInterval mdl-field">
        <div class="catalyst-field-input">
            <div class="mdl-field-header">
                <div class="mdl-form-label">Summary Interval</div>
                
            </div>
            
            

            

            

            
                
                    
                        
                            <label class="_mdl-radio mdl-radio mdl-js-radio mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events is-upgraded" for="formObj_summaryInterval_8" data-upgraded=",MaterialRadio,MaterialRipple">
        <input type="radio" class="mdl-radio__button" id="formObj_summaryInterval_8" name="summaryInterval" value="8">
        <span class="mdl-radio__label">Last 8 hours</span>
    <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span><span class="mdl-radio__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple"><span class="mdl-ripple"></span></span></label>
                        
                    
                        
                            <label class="_mdl-radio mdl-radio mdl-js-radio mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events is-upgraded is-checked" for="formObj_summaryInterval_24" data-upgraded=",MaterialRadio,MaterialRipple">
        <input type="radio" class="mdl-radio__button" id="formObj_summaryInterval_24" name="summaryInterval" value="24">
        <span class="mdl-radio__label">Last 24 hours</span>
    <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span><span class="mdl-radio__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple"><span class="mdl-ripple"></span></span></label>
                        
                    
                        
                            <label class="_mdl-radio mdl-radio mdl-js-radio mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events is-upgraded" for="formObj_summaryInterval_72" data-upgraded=",MaterialRadio,MaterialRipple">
        <input type="radio" class="mdl-radio__button" id="formObj_summaryInterval_72" name="summaryInterval" value="72">
        <span class="mdl-radio__label">Last 72 hours</span>
    <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span><span class="mdl-radio__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple"><span class="mdl-ripple"></span></span></label>
                        
                    
                
            

        </div>
        <div class="_component-field-error mdl-field-errors"></div>
    </div><div class="_form-field-includeDraftProgressNotes mdl-field">
        <div class="catalyst-field-input">
            <div class="mdl-field-header">
                <div class="mdl-form-label">Include draft progress notes on report</div>
                
            </div>
            
            

            

            

            
                
                    
                        
                            <label class="_mdl-radio mdl-radio mdl-js-radio mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events is-upgraded is-checked" for="formObj_includeDraftProgressNotes_true" data-upgraded=",MaterialRadio,MaterialRipple">
        <input type="radio" class="mdl-radio__button" id="formObj_includeDraftProgressNotes_true" name="includeDraftProgressNotes" value="true">
        <span class="mdl-radio__label">Yes</span>
    <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span><span class="mdl-radio__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple"><span class="mdl-ripple"></span></span></label>
                        
                    
                        
                            <label class="_mdl-radio mdl-radio mdl-js-radio mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events is-upgraded" for="formObj_includeDraftProgressNotes_false" data-upgraded=",MaterialRadio,MaterialRipple">
        <input type="radio" class="mdl-radio__button" id="formObj_includeDraftProgressNotes_false" name="includeDraftProgressNotes" value="false">
        <span class="mdl-radio__label">No</span>
    <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span><span class="mdl-radio__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple"><span class="mdl-ripple"></span></span></label>
                        
                    
                
            

        </div>
        <div class="_component-field-error mdl-field-errors"></div>
    </div><div class="_form-field-sortBy mdl-field">
        <div class="catalyst-field-input">
            <div class="mdl-field-header">
                <div class="mdl-form-label">Sort Residents By</div>
                
            </div>
            
            

            

            

            
                
                    
                        
                            <label class="_mdl-radio mdl-radio mdl-js-radio mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events is-upgraded" for="formObj_sortBy_-1" data-upgraded=",MaterialRadio,MaterialRipple">
        <input type="radio" class="mdl-radio__button" id="formObj_sortBy_-1" name="sortBy" value="-1">
        <span class="mdl-radio__label">Last Name</span>
    <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span><span class="mdl-radio__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple"><span class="mdl-ripple"></span></span></label>
                        
                    
                        
                            <label class="_mdl-radio mdl-radio mdl-js-radio mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events is-upgraded is-checked" for="formObj_sortBy_1" data-upgraded=",MaterialRadio,MaterialRipple">
        <input type="radio" class="mdl-radio__button" id="formObj_sortBy_1" name="sortBy" value="1">
        <span class="mdl-radio__label">Location</span>
    <span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span><span class="mdl-radio__ripple-container mdl-js-ripple-effect mdl-ripple--center" data-upgraded=",MaterialRipple"><span class="mdl-ripple"></span></span></label>
                        
                    
                
            

        </div>
        <div class="_component-field-error mdl-field-errors"></div>
    </div></div>
            </div>
        
    </div></div>
    <div class="_meadcoSection"></div>

</div>

Please let me know if there is anything I can do to make this question easier to answer. Thank you in advance!

Edit: I censored some of the personal information (with "____"). Hope that's alright

1
  • Also note that I do not use implicit waits anywhere Commented Jul 11, 2020 at 1:22

3 Answers 3

1

If you look at elementToBeClickable(..) method you will see that "clickable" means "visible and enabled".

The message you can see means that some element overlaps your target one. Changing your XPath will not help.

Often that happens because the application layout is designed to be displayed in a certain screen resolution but the tests are running with smaller resolution so that elements become intersecting each other.

P.S. - wait.until(..) returns the element that was located by the condition so that no need to look up it again. You can do something like:

WebElement element = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("/blah blah"));
Sign up to request clarification or add additional context in comments.

7 Comments

Interesting. So what do I do to fix this?
First of all try to maximize your window before the test starts. Like driver.manage().window().maximize();
Unfortunately, that didn't work - the same thing happened, the program still crashed. I probably should have mentioned that if I make the program sleep for 10 seconds before trying the "wait-until-clickable" then it works, so perhaps the problem is that the page isn't loaded?
Probably there is the overlay that is covering your button while some loading process is in progress. Like a waiter animation or so. Try to check how you dom changes when you manually do the steps. And then wait for that covering element becomes disappeared.
Yes, it was! Thank you so much! Basically, there were three buttons, but only two start off visible (the first button starts off on top of the 2nd buttons). The 2nd button becomes visible later, so I just had it wait until the second button became visible and then it worked like magic! Also, I put this comment here because I think summarizing what I did to make it finally work could be useful to others
|
1

The method takes a Web Element as a parameter.

List cccc = driver.findElements(By.xpath("//div[contains(@id,'loadmask')]"));

This checks if the loading of some JavaScript WebElement is complete .It is storing all elements that the error said would receive the click in my case the message had something with loadmask . In your it will be around <span class="mdl-button__ripple-container">

boolean pageload = wait.until(ExpectedConditions.invisibilityOfAllElements(cccc));

Checks if the list element cccc is invisible

if (pageload) {
            wait.until(ExpectedConditions.elementToBeClickable(element));
        }

// If the element is not visible it is waiting until the element provided in the parameter is clickable

Few Troubleshooting steps;

You can pause your dom(Google it) before your element is being clicked and see what is going on in your specific case. In my case, the culprit was this element load mask which was some JS loaded which was causing my test to fail. So I went in and paused the dom right before my actual click and see what was going on. You could try this and see if it helps.

Your case might not be same as mine but if you refer here, there are tons of ways on how you can implement expected conditions

https://www.selenium.dev/selenium/docs/api/java/org/openqa/selenium/support/ui/ExpectedConditions.html

Comments

0

Waits can be tricky, just to troubleshoot use thread.sleep(15000) and see if the element is clickable. the time I had similar error - Other element would receive the click:, it meant the page was still loading, I solved my issue by implementing of these two methods depending on this issue, however , I was always able to click the element without these custom methods by using thread.sleep(15000) so I would suggest try that first to single out the issue, here is what my wait method looked like,

public void isDisplayed(WebElement element) { try {

        WebDriverWait wait = new WebDriverWait(driver, 90);

        List<WebElement> cccc = driver.findElements(By.xpath("//div[contains(@id,'loadmask')]"));

        boolean pageload = wait.until(ExpectedConditions.invisibilityOfAllElements(cccc));

        // boolean pageload=
        // wait.until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//div[contains(@id,'loadmask-')]")));

        System.out.println(a);
        if (pageload) {
            wait.until(ExpectedConditions.elementToBeClickable(element));
        }

    } catch (org.openqa.selenium.NoSuchElementException exception) {

    }
}

//second method

public void elementwaitClick(WebElement waitForelement) {

    WebDriverWait wait = new WebDriverWait(driver, 30);
    WebElement element = wait.until(ExpectedConditions.elementToBeClickable(waitForelement));
    element.click();

2 Comments

You are right, I should have mentioned that if I make it sleep for 10 seconds before trying to click then it works. I just didn't want to use a manual sleep because that's not an ideal solution. Would you mind explaining what your first method does?
Hi, perhaps I wasn't clear in asking my follow up. To be specific, would you mind explaining what "//div[contains(@id,'loadmask')]" means/matches and why you wait for the invisibility of all elements?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.