How to click on elements blocked by pop up using selenium python?

Question

I want to click open the options in the menu on the left but they are blocked by the pop-up. How can I do that? here is what I have tried:

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
chromedriver = "/usr/share/chromedriver/chromedriver"
driver = webdriver.Chrome(chromedriver)
driver.get("https://student.amizone.net")
driver.find_element(By.NAME, "_UserName").send_keys("username")
driver.find_element(By.NAME, "_Password").send_keys("password")
driver.find_element(By.CSS_SELECTOR, "#loginform .login100-form-btn").click()
driver.implicitly_wait(10)
#11 | click | id=ModalPopAmityHostel |  
driver.find_element(By.ID, "ModalPopAmityHostel").click()
# 11 | click | id=StudentSatisfactionPop |  | 
driver.find_element(By.ID, "StudentSatisfactionPop").click()

this code closes the 1st pop-up but doesn't close the 2nd pop-up. In the code first I login to the website https://student.amizone.net i have not shown my username and password(obviously). after that driver.find_element(By.ID, "ModalPopAmityHostel").click() is supposed to click outside the pop-up which closes the pop-up. similarly driver.find_element(By.ID, "StudentSatisfactionPop").click() is supposed to close the 2nd pop-up.

this is the snippet of html code of the pop up elements:

<form action="/PopUp/Home/SANGATHANQuizpopupSave" data-ajax="true" data-ajax-loading="#lodingDiv" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success=" $('#SANGATHANQuizpop').modal('hide');$('.modal-backdrop').remove();$(document.body).removeClass('modal-open');alertify.alert('Successfully Saved.'); " data-ajax-update="#Div_Partial" id="form0" method="post"></form>

<div id="StudentSatisfactionPop" class="modal fade in" role="dialog" aria-hidden="false" style="display: block; padding-right: 15px;">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">STUDENT SATISFACTION SURVEY </h4>
            </div>


            <div class="modal-body">
                <div>

                    <p>
                        <b>Dear Mr MANIK RAINA  </b> 
                    </p>
                    <p>
                        Please tell us about you!  Office of Research, Planning &amp; Statistical Services, Amity University Uttar Pradesh is conducting a survey of its students. This survey asks your opinion on many items relevant to examining the impact of college.  It asks about your transition to university, your academic habits and experiences, your interaction with peers and faculty, your involvement in campus activities and programs, and how you spend your time.

                    </p>
                    <p>Results from this survey will be used by us to understand and improve your experiences. Data received from your responses will be analyzed and interpreted batch wise only, and at no time the responses be linked with an individual. Data will be used for revision and improvement of resource planning for better learning experiences of students of future batches. Be assured that your responses will remain confidential.</p>
                    <p>We would very much appreciate you taking a few moments to fill out the Survey Questionnaire.</p>
                <p><b>
    To Start the survey :
    <a data-ajax="true" data-ajax-begin="$('#sidebar').removeClass('display');" data-ajax-loading="#lodingDiv" data-ajax-mode="replace" data-ajax-success=" $('#StudentSatisfactionPop').modal('hide');$('.modal-backdrop').remove();$(document.body).removeClass('modal-open');" data-ajax-update="#Div_Partial" href="/Survey/StudentSatisfaction" id="12" rel="0">Click Here</a>. 
</b></p>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" id="btnClosevoter" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>


        </div>

    </div>
</div>        <script>

            $(document).ready(function () {

                $('#StudentSatisfactionPop').modal('show');

            });
        </script>

    <script>

        $(document).ready(function () {

            $('#ModalPopAmityHostel').modal('show');

        });
    </script>
    <div id="ModalPopAmityHostel" class="modal fade in" role="dialog" aria-hidden="false" style="display: block;">
        <div class="modal-dialog " style="z-index:104546464; ">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Amity Hostel</h4>
                </div>

                <div class="modal-body">
                    <p class="text-center">

                        “A few hostel seats (A/C and Non A/C) are available for allocation. Students desirous of availing the seats may apply on Amizone and also contact hostel office. Allocation of seats will be done on ‘first come, first served’ basis.”
                    </p>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    <h4 class="modal-title"></h4>
                </div>

            </div>

        </div>
    </div>

Have you tried switching to alert and accept. You can use Javascript to click the overlapped element, but I would recommend to accept the alert first and then interact with the elements. — supputuri, Dec 28 '19 at 19:32

Sers · Accepted Answer · 2019-12-29T08:28:05.017

1

You can close popups by clicking on close buttons. In your code you click to the div instead of close buttons, that's why popups do not close (see correct locators for the close buttons).

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

chromedriver = "/usr/share/chromedriver/chromedriver"
driver = webdriver.Chrome(chromedriver)
wait = WebDriverWait(driver, 10)

driver.get("https://student.amizone.net")

driver.find_element(By.NAME, "_UserName").send_keys("username")
driver.find_element(By.NAME, "_Password").send_keys("password")
driver.find_element(By.CSS_SELECTOR, "#loginform .login100-form-btn").click()

wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "#ModalPopAmityHostel button.btn"))).click()
driver.execute_script("arguments[0].click()", driver.find_element_by_css_selector("#StudentSatisfactionPop button.btn"))
# wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "#StudentSatisfactionPop button.btn"))).click()

edited Dec 29 '19 at 08:28

answered Dec 28 '19 at 21:10

Sers

10,960
2
8
25

when i login to the site i close the pop ups by clicking in the blocked area and they closed. I recorded the commands using selenium IDE but only one pop-up closes. I don't know why it's not working in Selenium. I never had to click on the close buttons because it was easier to click anywhere outside the pop-up. – Manik Dec 29 '19 at 06:27
I tried your solution but still the second pop-up doesn't close. – Manik Dec 29 '19 at 06:54
1

Try it with JS click using `execute_script`. See answer update. – Sers Dec 29 '19 at 08:28
It worked! but do you know why was the second popup not getting clicked by `CSS_SELECTOR`? – Manik Dec 29 '19 at 09:21

DebanjanB · Answer 2 · 2019-12-28T21:32:15.540

As the <button> tags with text as Close are with in Modal Dialog Box so to locate and click() on the desired elements you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

Using CSS_SELECTOR:

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

options = webdriver.ChromeOptions() 
options.add_argument("start-maximized")
options.add_experimental_option("excludeSwitches", ["enable-automation"])
options.add_experimental_option('useAutomationExtension', False)
driver = webdriver.Chrome(options=options, executable_path=r'C:\WebDrivers\chromedriver.exe')
driver.get('https://student.amizone.net')
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "form#loginform input[name='_UserName']"))).send_keys("7071804")
driver.find_element_by_css_selector("form#loginform input[name='_Password']").send_keys("62ae6f")
driver.find_element_by_css_selector("form#loginform button[type='submit']").click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div#ModalPopAmityHostel div.modal-footer button.btn.btn-primary[data-dismiss='modal']"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div#StudentSatisfactionPop div.modal-footer button.btn.btn-default[data-dismiss='modal']"))).click()

Using XPATH:

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

options = webdriver.ChromeOptions() 
options.add_argument("start-maximized")
options.add_experimental_option("excludeSwitches", ["enable-automation"])
options.add_experimental_option('useAutomationExtension', False)
driver = webdriver.Chrome(options=options, executable_path=r'C:\WebDrivers\chromedriver.exe')
driver.get('https://student.amizone.net')
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//form[@id='loginform']//input[@name='_UserName']"))).send_keys("7071804")
driver.find_element_by_xpath("//form[@id='loginform']//input[name='_Password']").send_keys("62ae6f")
driver.find_element_by_xpath("//form[@id='loginform']//button[type='submit']").click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='ModalPopAmityHostel']//div[@class='modal-footer']//button[@class='btn btn-primary' and @data-dismiss='modal']"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='StudentSatisfactionPop']//div[@class='modal-footer']//button[@class='btn btn-default' and @data-dismiss='modal']"))).click()

How to click on elements blocked by pop up using selenium python?

2 Answers2