How to handle Iframe content using webdriverIO js and mocha

Question

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-component 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: &quot;trebuchet ms&quot;, helvetica, sans-serif; width: auto; background: rgb(0, 115, 197);"
>
    Agree
</button>

not sure what is `getHighlightedText` in your code. It's a bit difficult to guess without details like WebdriverIO version you have and the website you use. — Mike G., Jan 25 '21 at 15:05

score 4 · Answer 1 · answered Jan 26 '21 at 22:06

4

Thanks 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();

answered Jan 26 '21 at 22:06

sitaram

51
1
6

how you are verify does context switch to right iframe ? – Vaibhav Jagdale Aug 08 '22 at 14:30
You can accept your own answer to resolve your open question. – Cees Timmerman Apr 03 '23 at 15:03

score 0 · Answer 2 · edited Dec 12 '22 at 20:17

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

How to handle Iframe content using webdriverIO js and mocha

2 Answers2

Linked