Trying to apply a selenium test on bootstrap modal using python-CodePudding

Here is the HTML:

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

<div >
            <div >
                <h5 id="add-title" >Add a text</h5>
                <button type="button"  data-dismiss="modal">×</button>
            </div>
            <section id="add-popup-card-body">
                <form id="add-form"><div >
<h6 id="add-popup-card-body-subtitle" >Please enter text</h6>
<input type="text" id="add-input-form"  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 >
<input type="submit" >
</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[]').click()

CodePudding user response：

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.

CodePudding user response：

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