I am trying to automate clicking on the play button of an embedded iframe music player on a webpage, I am coding using python 3 and Selenium to select the element to click.
When the user-agent is changed to replicate a mobile device, a wrapper layer then obscures the button that I can normally click, it asks if I want to listen on the main site or in the browser. I want to listen in the browser, but so far everything I have tried to click the correct element to achieve that, has failed.
I believe I am clicking on the wrong part but cannot find a way to access the correct part.
The inspect window of the browser shows the below for the part of the wrapper I need to click on:
<a class="mobilePrestitial__link sc-font-light" href="#">
Listen in browser
</a>
::before
"
Listen in browser
"
/a>
When I hover over the ::before part it highlights the part in the browser that I believe I need to click, but using right-click to inspect ::before just says 'scroll in view' so I cannot copy whatever the element represents.
My current code is this:
driver.switch_to.default_content()
driver.switch_to.frame(driver.find_element_by_partial_link_text('Listen in browser'))
element = WebDriverWait(driver, 10).until(
EC.element_to_be_clickable((By.XPATH, '//a[@class="mobilePrestitial__link"]'))
)
element.click()
But it errors without a message, I suspect I need to be clicking on the element presented by ::before but cannot figure how to do that.
I found a workaround and solved this by hiding the wrapper overlay using Selenium in python script to make a Javascript call
driver.execute_script('document.getElementsByClassName("mobilePrestitial")[0].style.display=\"none\"')
once the overlay is hidden with the above code, the original button is accessible in the browser