Add WebDriver Capability APIs to support launching browsers in "Responsive Design Mode"

[gwtuser]

🚀 Feature Proposal

Firefox and Chrome now have "responsive design" mode, which allows them to emulate specific handheld devices such as the iPhone. This is more than just using a specific screen size, as it involves touch and user agent emulation. Basically, the browser closely emulates how it would run on the selected device.

Motivation

This would allow cross-platform testing using a single test harness. Specifically, it would allow automation of tests that target mobile platforms. I've not had much luck sending key sequences to attempt to toggle Responsive Design Mode, and even if it worked, I'd have no way of selecting the device, as Selenium can't manipulate the "chrome" widgets that determine the device - browser controls outside the HTML.

Example

Some pseudocode for using the new APIs might be:

DesiredCapabilities capabilities = DesiredCapabilities.firefox();
capability.setResponsiveDesignPlatform(Platform.IPhone);
driver = new FirefoxDriver(capabilities);

Then, driver.get() would open the browser in responsive design mode.

[jimevans]

@gwtuser How do those browsers activate that mode? Is it via a profile setting? Is it via a command-line switch on the browser executable? Is it only done via some browser chrome or the developer tools?

[gwtuser]

From my understanding, responsive mode can be entered via a hotkey sequence or interaction with "browser chrome" in the developer tools, and then the target device must be selected via a "browser chrome" picker that appears on the original page (outside the page's HTML).

[wluu]

I would like to add a bit more to this thread:

While using Webdriver.io, adding this capability to emulate iPhone 6 in Chrome (latest) is working:

capabilities: [{
  browserName: 'chrome',
  'goog:chromeOptions': {
      mobileEmulation: {
          deviceName: 'iPhone 6'
      }
  }
}]

However, adding this capability to emulate iPhone 6 in Firefox (latest) is not working:

capabilities: [{
  browserName: 'firefox',
  'moz:firefoxOptions': {
      prefs: {
          'devtools.responsive.touchSimulation.enabled': true,
          'devtools.responsive.userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
          'devtools.responsive.viewport.pixelRatio': 2,
          'devtools.responsive.viewport.height': 667,
          'devtools.responsive.viewport.width': 375
      }
  }
}]

I've tried passing "args": ["-devtools"] under 'moz:firefoxOptions', but still won't launch Firefox in Responsive Design Mode; only devtools mode. Also, poured through about:config to see if there's any flag that I can use, but nothing.

[jpita]

any news on this?
I want to automate a kaios app, the dimensions of the device screen are 320×240 but when I try to set firefox to that size it refuses to be resized to less than 450 width.
any way I can do this?

[diemol]

For ChromeDriver there is a good starting point documented here. For GeckoDriver I could not find any documentation related to this, if someone is interested, please reach out to the https://github.com/mozilla/geckodriver project.

As mentioned in a previous comment, most of this is already possible through browser preferences, which is normally out of the scope of this project. This type of built-in features are better placed in a framework built on top of Selenium.