How to click on an element identical to another element using selenium in python?

Question

I want to click on a button element which is identical to another button element on the same page but one is in the front and one is at the back(see pic). how can I do this? the first x button's html code is like:

 <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>

second x button's html code is:

<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>

this is my code using selenium in python:

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.maximize_window()
#wait = WebDriverWait(driver, 1)
driver.get("https://student.amizone.net")
# 3 | type | name=_UserName | 7071804 | 
driver.find_element(By.NAME, "_UserName").send_keys("username")
# 4 | type | name=_Password | 62ae6f | 
driver.find_element(By.NAME, "_Password").send_keys("password")
# 9 | click | css=#loginform .login100-form-btn |  | 
driver.find_element(By.CSS_SELECTOR, "#loginform .login100-form-btn").click()
driver.implicitly_wait(10)
driver.find_element(By.CLASS_NAME, "close").click()

it gives this error:

Traceback (most recent call last):
  File "amizone_automated_login.py", line 36, in <module>
    driver.find_element(By.CLASS_NAME, "close").click()
  File "/home/manik/anaconda3/lib/python3.7/site-packages/selenium/webdriver/remote/webelement.py", line 80, in click
    self._execute(Command.CLICK_ELEMENT)
  File "/home/manik/anaconda3/lib/python3.7/site-packages/selenium/webdriver/remote/webelement.py", line 633, in _execute
    return self._parent.execute(command, params)
  File "/home/manik/anaconda3/lib/python3.7/site-packages/selenium/webdriver/remote/webdriver.py", line 321, in execute
    self.error_handler.check_response(response)
  File "/home/manik/anaconda3/lib/python3.7/site-packages/selenium/webdriver/remote/errorhandler.py", line 242, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
  (Session info: chrome=79.0.3945.88)

this is the page:

I think the error is coming because it's clicking the x button behind the pop-up because it comes first in the html script. is there a way of clicking the x button in the front?

Sameer Arora · Answer 1 · 2019-12-28T20:09:18.937

Instead of direct fetching the element by classname you should fetch the using by id in the xpath because id of both the windows are different.
You can close the first window by using:

driver.find_element(By.XPATH, "//div[@id='ModalPopAmityHostel']//button[@class='close']").click()

And after clicking on first Close button you can click on the second close button in the similar fashion, you just need to replace id by StudentSatisfactionPop

score 0 · Answer 2 · answered Dec 28 '19 at 20:39

z-index

The z-index CSS property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. So overlapping elements with a larger z-index cover those with a smaller one.

Comparing both the HTMLs you have provided the following element have a larger z-index and hence covers the other element.

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

So you need to identify and click the x button of the above mentioned element first.

Solution

As the desired element is a Modal Dialog Box so to locate and click() on the desired element you have 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, "div#ModalPopAmityHostel div.modal-content>div.modal-header>button.close[data-dismiss='modal']"))).click()

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='ModalPopAmityHostel']//div[@class='modal-content']/div[@class='modal-header']/button[@class='close' and @data-dismiss='modal']"))).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

How to click on an element identical to another element using selenium in python?

2 Answers2

z-index

Solution