javascript - How to handle Iframe content using webdriverIO js and mocha - Stack Overflow

admin管理员组

文章数量:1356595

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

• javascript
• mocha.js
• webdriver-io
• mochawesome
• webdriver-io-v4

Share Improve this question Follow edited Jan 24, 2021 at 14:50 juliomalves 50.6k2323 gold badges178178 silver badges169169 bronze badges asked Jan 23, 2021 at 21:52 sitaramsitaram 6111 gold badge11 silver badge66 bronze badges 1

• 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. Commented Jan 25, 2021 at 15:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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

本文标签： javascriptHow to handle Iframe content using webdriverIO js and mochaStack Overflow