Unable to click on element within iframe using Selenium Python-CodePudding

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

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:

enter image description here

And this is html code for the popup

<span data-v-4f1211ad="" data-v-34fa3c14="" data-dismiss="true"  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"  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"  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.

CodePudding user response：

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=/')
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=/')
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