Unable to use browser.switchToFrame() on MS Edge

[ghost]

Environment :

• WebdriverIO version: ["webdriverio": "^5.7.15"]
• Mode: [WDIO Testrunner/BROWSERSTACK]
• If WDIO Testrunner, running sync/async: [sync]
• Node.js version: [v8.11.3]
• NPM version: [5.6.0]
• Browser name and version: [MS Edge v16, v17, v18]
• Platform name and version: [macOS Mojave 10.14.4]
• Additional wdio packages used (if applicable): Sample project with the same issue is hosted on GitHub

package.json

"dependencies": {
    "browserstack-local": "^1.3.7",
    "config": "^1.28.1",
    "uuid": "^3.1.0",
    "webdriverio": "^5.7.15"
  },
  "devDependencies": {
    "config": "^1.28.1",
    "@wdio/cli": "^5.7.15",
    "@wdio/local-runner": "^5.7.15",
    "@wdio/mocha-framework": "^5.7.14",
    "@wdio/sync": "^5.7.13"
  }

Config of WebdriverIO

exports.config = {
    user: process.env.BROWSERSTACK_USERNAME || 'XXX',
    key: process.env.BROWSERSTACK_ACCESS_KEY || 'YYY',
    specs: [
        './test/specs/**/*.js'
    ],
    // Patterns to exclude.
    exclude: [
        // 'path/to/excluded/files'
    ],
    maxInstances: 10,
    capabilities: [
        // Chrome and all other browsers work fine
        // {
        //     browser: 'Chrome',
        //     resolution: '1280x1024',
        //     os: 'Windows',
        //     os_version: '10',
        //     name: 'Chrome',
        //     project: 'TT UI',            
        //     'browserstack.networkLogs': true
        // },
        {
            browserName: 'Edge',
            browser_version: '18.0',
            resolution: '2048x1536',
            os: 'Windows',
            os_version: '10',
            name: 'Microsoft EDGE',
            project: 'TT UI',           
            'browserstack.networkLogs': true
        }
    ],
    // Level of logging verbosity: trace | debug | info | warn | error | silent
    logLevel: 'debug',
    waitforTimeout: 10000,
    connectionRetryTimeout: 90000,
    connectionRetryCount: 3,
    framework: 'mocha',
    mochaOpts: {
        ui: 'bdd',
        timeout: 60000
    }
}

Describe the bug
The command browser.switchToFrame() does not switch to iFrames on Microsoft Edge versions 16,17 and 18. The same command and code snippet (see To reproduce section) works on Chrome, FireFox, Safari and IE11.

To Reproduce

• Options 1 (Recommended)
  I've set both :
  • Example Repository (easy to set up/use) of the command : https://github.com/Amiiine/iFrameSwitch
  • Static page with iFrames : https://goofy-pasteur-93f74a.netlify.com/

npm run test:local Please ensure your browser driver is started
npm run test:remote Please ensure your you have inserted your BrowserStack user and key in wdio.remote.conf.js

Once the simple test is run, there is an error launched at browser.switchToFrame(parentFrame) with the following message ERROR webdriver: Request failed due to no such frame: The specified frame was not found in the current frame or window.

• Options 2

On Ms Edge -Preferably BrowserStack, but that shouldn't make any difference- run the command browser.switchToFrame(element) or browser.switchToFrame(element.elementId) and you have the same error described on option1

Expected behavior
The expected behaviour is the ability to switch into iFrame and be able to retrieve and locate elements inside it on MS Edge.

Log

Console logs and wdio logs are shared here gist

Additional context
Initially this question was asked in Gitter channel, and discussed with @christian-bromann today, and he recommended to create an issue here with more details.
Please note I also have checked this issue 3774 but it seems it's unrelated as the code I have shared on GitHub (See section above) works perfectly on all browsers except Edge

[amine-rouh]

I have found a workaround for this issue based on both :

• issue 3774
• Official documentation

This would work on Chrome,FireFox,Ms Edge, IE11 and Safari all under BrowserStack

let iFrame = $('//*[@name="iFrameSelector"]');
if (browser.capabilities.browserName === "MicrosoftEdge") iFrame = "iFrameSelector";
browser.switchToFrame(iFrame)

[ghost]

@christian-bromann I'm happy to close the issue as there is a working and tested workaround.
Thank you

[rangini1234]

I am not able to get this solution working for him. I tried using the class name directly on switchToFrame and still see the same issue The specified frame was not found in the current frame or window.. Just to understand you workaround solution correctly, should I give the classname or id directly in browser.switchToFrame(id or classname). Is that correct?

Update: this solution works for chrome, ie and edge. Does not work for safari