[FIXED] Selenium webdriver chrome, unable to locate button using CSS selector or XPath

Issue

I am using python3 and webdriver to load this page:

driver.get("https://epaper.handelsblatt.com")

A cookie-window is appearing, and I want to locate and click the button "Zustimmen" to close it. Previously I used ActionChains to press TAB until the button is selected and then enter (not beautiful, but got the job done). Now Chrome is skipping the buttons (even when using TAB manually) I mention this because it might be related to my inability to locate the button using selenium.

ActionChains(driver).send_keys(Keys.TAB *2, Keys.RETURN).perform() #close popup by two tabs and one enter 

So tried to locate the button using CSS selector or XPath. But I'm unable to.

HTML code of the button:

<div class="message-component message-row" style="padding: 15px 0px; margin: 0px; border-width: 0px; border-color: rgb(0, 0, 0); border-radius: 0px; border-style: solid; width: calc(100% - 0px); height: auto; justify-content: center; align-items: center;"><button title="EINSTELLUNGEN" class="message-component message-button no-children focusable sp_choice_type_12" style="padding: 15px; margin: 10px 5px 10px 10px; border-width: 1px; border-color: rgb(102, 102, 102); border-radius: 0px; border-style: solid; font-size: 16px; font-weight: 500; color: rgb(102, 102, 102); font-family: arial, helvetica, sans-serif; width: calc(100% - 45px); background: rgb(255, 255, 255);">EINSTELLUNGEN</button><button title="ZUSTIMMEN" class="message-component message-button no-children focusable sp_choice_type_11" style="padding: 15px; margin: 10px 10px 10px 5px; border-width: 0px; border-color: rgb(0, 0, 0); border-radius: 0px; border-style: solid; font-size: 16px; font-weight: 500; color: rgb(255, 255, 255); font-family: arial, helvetica, sans-serif; width: calc(100% - 45px); background: rgb(239, 124, 0);">ZUSTIMMEN</button></div>

I tried CSS Selector:

cookie = driver.find_element_by_css_selector("#notice > div:nth-child(3) > div > div.message-component.message-row > button.message-component.message-button.no-children.focusable.sp_choice_type_11")

XPath:

cookie = driver.find_element_by_xpath("/html/body/div[2]/div[2]/div[2]/div/div[4]/div[2]/div/div[11]/div[1]")

I even tried locating it with the text of the button.

cookie = driver.find_element_by_xpath('//button[text()="ZUSTIMMEN"]')

I appreciate any help!

Solution

This element is inside an iframe. So before interacting with that element, you will need to switch to that iframe, or else it will not work. You can see in the dom that there is an iframe with the title "Iframe title" available.

driver.get("https://epaper.handelsblatt.com/storefront/11")
WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR,"#sp_message_iframe_648626")))
print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//button[@title='ZUSTIMMEN']"))).text)
WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//button[@title='ZUSTIMMEN']"))).click()
sleep(10)
driver.quit()

Imports:

from time import sleep
from selenium.webdriver.common.by import By
from selenium import webdriver
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

Answered By - QualityMatters