Unable to click on element within iframe using Selenium Python

Question

I'm trying to make bot click on X to close a popup but nothing happens, I tried using different elements to target the popup close button but nothing seems to work.

URL of the website is: https://vb.rebelbetting.com/login?r=%2f

Code trials:

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
import time

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.remote.webelement import WebElement

username = 'username'
password = 'password'

chrome_options = Options()
chrome_options.add_experimental_option("detach", True)

driver = webdriver.Chrome(options=chrome_options)

driver.get('link/')
driver.maximize_window()
time.sleep(2)

driver.find_element("id", "inputEmail").send_keys(username)
driver.find_element("id", "inputPassword").send_keys(password)
driver.find_element('id', 'inputPassword').send_keys("\n")
time.sleep(5)
driver.find_element("id", "close").click()

I also tried using xpath and tried it on everything that is related to the X button itself:

driver.find_element("xpath", "//*[@id='backdrop']/div/span").click()

Snapshot of the element:

And this is html code for the popup

<span data-v-4f1211ad="" data-v-34fa3c14="" data-dismiss="true" class="close top-right" style="color: rgb(111, 181, 36); font-size: 2em; width: 1em; height: 1em; line-height: 1em; display: block; position: absolute;"><svg data-v-4f1211ad="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" id="close" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" style="stroke: rgb(0, 0, 0);"><line data-v-4f1211ad="" x1="18" y1="6" x2="6" y2="18"></line><line data-v-4f1211ad="" x1="6" y1="6" x2="18" y2="18"></line></svg></span>

<svg data-v-4f1211ad="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" id="close" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" style="stroke: rgb(0, 0, 0);"><line data-v-4f1211ad="" x1="18" y1="6" x2="6" y2="18"></line><line data-v-4f1211ad="" x1="6" y1="6" x2="18" y2="18"></line></svg>

<line data-v-4f1211ad="" x1="18" y1="6" x2="6" y2="18"></line>
<line data-v-4f1211ad="" x1="6" y1="6" x2="18" y2="18"></line>

I'm tried to make bot click on X to close a popup but nothing happens, I tried using different elements to target the popup close button but nothing seems to work.

Answer 1

The X element is within an <iframe> so you have to:

• Induce WebDriverWait for the desired frame to be available and switch to it.

• Induce WebDriverWait for the desired element to be clickable.

• You can use either of the following locator strategies:

  • Using CSS_SELECTOR:

    driver.get('https://vb.rebelbetting.com/login?r=%2f')
    WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR,"iframe[title='usercom widget']")))
    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "span.close.top-right"))).click()
    

  • Using XPATH:

    driver.get('https://vb.rebelbetting.com/login?r=%2f')
    WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[@title='usercom widget']")))
    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[@class='close top-right']"))).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