Webdriver.IO[7] : SwitchToFrame with css selector is not working

Question

I want to click web element inside the iframe and trying to switch to respective iframe before clicking to web element. browser.switchToFrame(number) - switch to iframe with number is working but unable switch to iframe with css selector.

I have tried below code.

 await $('.framed_view').waitForDisplayed({ timeout: 5000 });
 const iframe = $('.framed_view');
 await browser.switchToFrame(iframe);

Answer 1

Because it only accepts ID of the element. This method doesn't work the same way as usual $ calls.

See: webdriver.io/docs/api/jsonwp/#switchtoframe

Tbh, I had issues with switching to frames via this or similar wdio methods myself and never managed to get it working.

Answer 2

You can also use xpath to select Iframe. This worked for me

get mainFrame() {
    return $("//devsite-iframe/iframe");
}
async switchFrame () {
    await this.mainFrame.waitForExist({ timeout: 3000 });
    await browser.switchToFrame(await this.mainFrame); 
}