CODEWITHSUNDEEP
selenium-webdriverprotractorselenium-chromedrivere2e-testing
MikeW
MikeW

Reputation: 1630

Why get "element not interactable" when mobile emulation AND multiple browsers protractor/selenium web driver?

I have a number of automated e2e tests which execute using protractor and selenium web drivers (specifically chromderiver version 83) that work fine if teh config is set to use chrome in desktop mode, or a single instance in mobile emulation mode. The problem comes when I configure to use multiple browser instances with at least one in mobile emulation mode. When I do this I am presented with the error 'element not interactable'.

My config looks like:

allScriptsTimeout: 60000,
SELENIUM_PROMISE_MANAGER: false,
baseUrl: testData.baseUrl,
seleniumAddress: "http://localhost:4444/wd/hub/",
specs: ["./src/**/*.spec.ts"],
multiCapabilities: [{
  browserName: "chrome",
  chromeOptions: {
    args: ["--window-size=1900,1024"], // THIS!
  },
  specs: ["./src/**/*.desktopspec.ts"],
},
{
  browserName: "chrome",
  chromeOptions: {
    mobileEmulation: {
      deviceName: "Nexus 5",
    },
    args: ["--touch-events=enabled"],
  },
  specs: ["./src/**/*.mobilespec.ts"],
  reportName: "nexus5",
},
{
  browserName: "chrome",
  chromeOptions: {
    mobileEmulation: {
      deviceName: "iPhone 6",
    },
    args: ["--touch-events=enabled"],
  },
  specs: ["./src/**/*.mobilespec.ts"],
}],
framework: "jasmine2",
jasmineNodeOpts: {
  showColors: true,
  defaultTimeoutInterval: 60000,
  keepAlive: true,
  print: function () {},
}

Specifically

In summary if I use multiple instances where any one of them uses mobile emulation then tests fail (for the mobile emulation run, but not the desktop runs) with an 'element not interactable' error the first time a click is attempted.

I have tried changing specs so that mobile runs use tap functionality browser.touchActions().tap(element).perform() bu this does not fix the problem.

Please can someone advise why mobile emulation only appears possible if it is the only browser instance in the test run?

Upvotes: 0

Views: 279

Answers (1)

Sergey Pleshakov
Sergey Pleshakov

Reputation: 8978

Oh that's simple.

Many webpages are being built separately for different OS. For instance, one app may have one set of elements for desktop browser's and another set for mobile devices. Then both sets have ng-if directive which says 'if the browser is chrome then display first set'. Example:

<html>
  <body>
    <div ng-if="$root.is_mobile">
      <! rest of the content>
    </div>
    <div ng-if="$root.is_desktop">
      <! rest of the content>
    </div>
  </body>
</html>

And only either set is displayed.

So you've written your protractor tests using locators of desktop specific elements. When you open the page in mobile device, those elements are present in the DOM but are hidden. This is what the error essentially means - element is there on the page, but how can you interact with an invisible element?..

P.S. Actually this is one a few possible reasons, but the most likely one

Upvotes: 0

Related Questions