Search code examples
selenium-webdriverwebdriver-iowdio

webdriverio - Switching frames when using Page Object Model

I am using Webdriver IO with Mocha.

I am using Page Object model.

I have set up my frame css selector as follows:

get loginIFrame() {
        return $('iframe[title="Test"]');
      }

I want to switch frames using that element from the Page Object Model.

I have tried the following:

await browser.switchToFrame(this.loginIFrame);

and:

let iframe = this.loginIFrame;
await browser.switchToFrame(iframe);

They don't work.

This DOES work:

const iframe = await browser.findElement('css selector', 'iframe[title="Test"]')
await browser.switchToFrame(iframe);

However this is NOT using the selector from the Page Object model and I don't want to have the selector duplicated in the code.

How can I switch frames using the element/selector in the Page Object Model?

Solution

  • I have a feeling that $('iframe[title="Test"]'); is async, so when you call

    let iframe = this.loginIFrame;
await browser.switchToFrame(iframe);

    you are getting not frame, but Promise in pending status.

    It worth to try

    let iframe = await this.loginIFrame();
await browser.switchToFrame(iframe);