Selenium - cannot click on an element inside a modal

Question

I am using Selenium and java and I cannot click on an element inside a modal. The scenario is this: after clicking on an item inside a frame, it opens up a modal and I need to click on an element inside this modal but I cannot get it.

I already tried with:

js.executeScript("document.getElementById('saveexit').scrollIntoView(true);");

I also tried with switchTo() this way:

while (itr.hasNext()) {
    String popup =  itr.next();
    System.out.println("itr: " + popup);
    driver.switchTo().window(popup);
}

Here is the html of my modal:

<div class="modal-dialog">

    <div class="modal-content modal-custom-content">
        <div class="modal-header">
            ...
        </div>
        <div class="modal-body">
            <form id="formTo" class="form-container">
                <div class="row">
                    ...
                </div>
                <div class="small-space"></div>
                <input ...>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        ...
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        ...
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        ...
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        ...
                    </div>
                </div>
                <div class="small-space"></div>
                <div class="row"> 
                    ...
                </div> 
            </form> 
        </div>
        <div class="small-space"></div>
        <div class="modal-footer">
            <div class="row text-center"> 
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <button class="btn modal-button full-btn" id="saveexit" type="button">SAVE AND EXIT</button>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

this is the CSS Path as taken from firefox dev tool:

html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is‌-opened div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12 button#saveexit.btn.modal-button.full-btn

the object is never found.

Question 1: if an element is inside a modal has to be managed differently?
Question 2: How to finally have the click on the button saveexit working?

here is shared a code snippet of the html: https://codeshare.io/arLW9q

Here is the java code:

wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[@id=\"saveexit\"]")))

I have also tried with:

cssSelector: #saveexit
cssPath: html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened 
div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12 
button#saveexit.btn.modal-button.full-btn
xpath: //*[@id="saveexit"]

Please note: if I run document.getElementById('saveexit').click(); from browser's console it works out

A modal isn't a window that can be switched to. It's just HTML on the page. What Java code have you tried and what was the result? Error messages, etc. — JeffC, Dec 22 '17 at 19:31
The Java code I tried is js.executeScript... the result is Simply an error saying that saveexit does not exist — eeadev, Dec 23 '17 at 18:02

score 1 · Answer 1 · answered Dec 23 '17 at 09:10

1

As you are using the Selenium-Java clients as per best practices the first and foremost trial must be with invoking the highly efficient and proven click() method. Depending on the errors resulting out of click() method we can work on other alternate solutions.

As I can see from your code trials with JavascriptExecutor and switchTo().window(), you havn't identified the WebElement representing the SAVE AND EXIT button well.

To click on the SAVE AND EXIT button you can use the following code block :

new WebDriverWait(driver, 5).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[@class='modal-dialog']//div[@class='modal-footer']//button[@class='btn modal-button full-btn' and @id='saveexit']"))).click();

answered Dec 23 '17 at 09:10

undetected Selenium

183,867
41
278
352

Thanks Deb, I Will try It ASAP and accept if It works – eeadev Dec 23 '17 at 18:04
it does not work, having this "Expected condition failed: waiting for visibility of element located by By.xpath:..." – eeadev Dec 27 '17 at 11:21
Show us a bit more of the `outerHTML`. Possible element is within an `iframe` or `xpath` is not unique. – undetected Selenium Dec 27 '17 at 11:29
this is the CSS Path as taken from firefox dev tool: html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12 button#saveexit.btn.modal-button.full-btn – eeadev Dec 27 '17 at 11:51
Update the main question with the info for SO volunteers to help you out. – undetected Selenium Dec 27 '17 at 11:55

score 0 · Accepted Answer · answered Jan 11 '18 at 16:11

0

I fixed it using jquery inside my script;

here is the linecode:

js.executeScript("$('#saveexit').trigger('click');");

I hope it can help someone in future.

I dont know why plain javascript was not working...

answered Jan 11 '18 at 16:11

eeadev

3,662
8
47
100

Selenium - cannot click on an element inside a modal

2 Answers2

Linked