Trying to apply a selenium test on bootstrap modal using python

Question

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<div class="modal-content">
            <div class="modal-header">
                <h5 id="add-title" class="modal-title">Add a text</h5>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <section id="add-popup-card-body">
                <form id="add-form"><div class="sm-form modal-body">
<h6 id="add-popup-card-body-subtitle" class="card-subtitle mb-2 text-muted">Please enter text</h6>
<input type="text" id="add-input-form" class="sm-form modal-body form-control validate" pattern="\S+" style="text-transform:uppercase" maxlength="32" placeholder="tag" onkeyup="this.value = this.value.toUpperCase();" required="">
<div><small>*Spaces are not allowed</small></div>
</div>`enter code here`
<div class="modal-footer justify-content-center">
<input type="submit" class="btn btn-primary">
</div></form>
            </section>
        </div>
</body>
</html>

All that I need is to find a way to make Selenium test close the modal. I have tried these so far and none worked:

self.driver.findElement(By.className("close")).click()

self.driver.findElement(By.xpath("//button[@class = 'close']")).click()

self.driver.find_element(By.CSS_SELECTOR, 'button[class="close"]').click()

..\venv\lib\site-packages\selenium\webdriver\remote\errorhandler.py:247: ElementNotInteractableException — David, Dec 11 '21 at 03:01
@David : Check out the solution given below, and let me know the status. — cruisepandey, Dec 11 '21 at 05:03

score 0 · Answer 1 · answered Dec 11 '21 at 05:02

There are basically 4 ways to click in Selenium.

I will use this xpath

//button[@class='close' and @data-dismiss='modal' and text()='×']

Code trial 1:

time.sleep(5)
driver.find_element_by_xpath("//button[@class='close' and @data-dismiss='modal' and text()='×']").click()

Code trial 2:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[@class='close' and @data-dismiss='modal' and text()='×']"))).click()

Code trial 3:

time.sleep(5)
button = driver.find_element_by_xpath("//button[@class='close' and @data-dismiss='modal' and text()='×']")
driver.execute_script("arguments[0].click();", button)

Code trial 4:

time.sleep(5)
button = driver.find_element_by_xpath("//button[@class='close' and @data-dismiss='modal' and text()='×']")
ActionChains(driver).move_to_element(button).click().perform()

Imports:

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains

PS : Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.

Steps to check:

Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath and see, if your desired element is getting highlighted with 1/1 matching node.

score 0 · Answer 2 · answered Dec 11 '21 at 05:14

To click on the element you can use either of the following Locator Strategies:

Using css_selector:

driver.find_element(By.CSS_SELECTOR, "button.close[data-dismiss='modal']").click()

Using xpath:

driver.find_element(By.XPATH, "//button[@class='close' and @data-dismiss='modal'][text()='×']").click()

Ideally, as the desired element is a Modal Dialog Box to click on the clickable element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button.close[data-dismiss='modal']"))).click()

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[@class='close' and @data-dismiss='modal'][text()='×']"))).click()

Note: You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

score 0 · Answer 3 · edited Dec 13 '21 at 03:49

0

Thanks for the help. I have tried all the above solution but none worked. I was getting similar errors. After some reading I called an id that was above the "modal-content" and added 3 div . By using this code :

self.driver.find_element_by_xpath("//*[@id='add-tag popup']/div/div/div/button").click()

edited Dec 13 '21 at 03:49

Amila Senadheera

12,229
15
27
43

answered Dec 13 '21 at 01:59

David

25
3

Trying to apply a selenium test on bootstrap modal using python

3 Answers3