I want to be able to click on Agree button to give my consent for cookies on a website, I know how to do this in selenium webdriver, however, I have no idea on how to do this using js and mocha as I am trying to learn any help is appreciated.
I tried
browser.switchToFrame($('#sp_message_iframe_207015'));
$(getHighlightedText('Agree')).click();
But no use
Basically, I launch the site and I get a popup asking to Agree cookies and manage cookies/preferences, I just want to be able to click on Agree
#sp_message_iframe_207015 is the Id of the Iframe
Agree element looks like this
<button
tabindex="0"
title="Agree"
aria-label="Agree"
class="message-ponent message-button no-children"
path="[0,4,1]"
style="padding: 10px 50px; margin: 10px; border-width: 1px; border-color: rgb(0, 115, 197); border-radius: 20px; border-style: solid; font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); font-family: "trebuchet ms", helvetica, sans-serif; width: auto; background: rgb(0, 115, 197);"
>
Agree
</button>
I want to be able to click on Agree button to give my consent for cookies on a website, I know how to do this in selenium webdriver, however, I have no idea on how to do this using js and mocha as I am trying to learn any help is appreciated.
I tried
browser.switchToFrame($('#sp_message_iframe_207015'));
$(getHighlightedText('Agree')).click();
But no use
Basically, I launch the site and I get a popup asking to Agree cookies and manage cookies/preferences, I just want to be able to click on Agree
#sp_message_iframe_207015 is the Id of the Iframe
Agree element looks like this
<button
tabindex="0"
title="Agree"
aria-label="Agree"
class="message-ponent message-button no-children"
path="[0,4,1]"
style="padding: 10px 50px; margin: 10px; border-width: 1px; border-color: rgb(0, 115, 197); border-radius: 20px; border-style: solid; font-size: 14px; font-weight: 600; color: rgb(255, 255, 255); font-family: "trebuchet ms", helvetica, sans-serif; width: auto; background: rgb(0, 115, 197);"
>
Agree
</button>
-
not sure what is
getHighlightedTextin your code. It's a bit difficult to guess without details like WebdriverIO version you have and the website you use. – Mike G. Commented Jan 25, 2021 at 15:05
2 Answers
Reset to default 5Thanks all
I have managed to get it working with the following
let frame= browser.$('#sp_message_iframe_207015');
browser.pause(5000);
browser.switchToFrame(frame);
browser.setTimeout({ 'implicit': 10000 })
let clickAgree = $('button[title="Agree"]');
clickAgree.click();
browser.switchToParentFrame();
The scenario is like following:
- Make sure the iframe exist
- Switch to iframe with browser.switchToFrame
- If there are nested iframe(s) repeat steps 1 - 2
- Look for an element within iframe
As far as I have no access to your app, let imagine the DOM structure
body
h1
iframe id="main"
h2
<button title="Agree">Agree</button>
div
// switch to iframe
const mainIframe = $('#main')
expect(mainIframe).toExist()
browser.switchToFrame(mainIframe)
// interact with element within iframe
const agreeButton = $('button[title="Agree"]')
expect(agreeButton).toBeClickable()
agreeButton.click()
// switch back to parent frame
browser.switchToParentFrame()
Here is an example of accepting cookies and switching to iframe using webdriverio browser object how to check video is playing or not