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>

Answer 1

The scenario is like following:

1. Make sure the iframe exist
2. Switch to iframe with browser.switchToFrame
3. If there are nested iframe(s) repeat steps 1 - 2
4. 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

Answer 2

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