Enable device emulation, network throttling, and disable disk cache. #90

Merged
merged 3 commits into from Mar 29, 2016

Projects

None yet

3 participants

@paulirish
Member

This follows the specs from #33.

Device

  • Nexus 5X screensize, DPR, etc.
  • Nexus 5X UA spoofing
  • Touch events
  • Overlay scrollbars, viewport emulation, etc, etc

Network

  • 150ms latency, 1.6Mbps throughput down, 768Kbps up
  • Cache disabled.

This PR depends on #88, so here's a cleaner diff between the two:
paulirish@paulirish:cri-encapsulate...emulation

Also now that all this works, we can load m.flipkart successfully, so I've switched the default to that. Results are already interesting. :)

@paulirish paulirish Enable device emulation, network throttling, and disable disk cache.
2586e69
@brendankenny brendankenny and 1 other commented on an outdated diff Mar 28, 2016
helpers/emulation.js
+ screenWidth: 412,
+ screenHeight: 732,
+ width: 412,
+ height: 732,
+ positionX: 0,
+ positionY: 0,
+ scale: 1,
+ deviceScaleFactor: 2.625,
+ fitWindow: false,
+ screenOrientation: {
+ angle: 0,
+ type: 'portraitPrimary'
+ }
+};
+
+const DEVICE_EMULATION_USERAGENT = {
@brendankenny
brendankenny Mar 28, 2016 Member

is there going to be a good way to keep this in sync with shipping Chrome?

@paulirish
paulirish Mar 28, 2016 Member

I hope so, though devtools project hasnt found a good way, yet. :)

For us, we could do something along the lines of pinging the omahaproxy API every week

@brendankenny brendankenny commented on an outdated diff Mar 28, 2016
helpers/emulation.js
+ offline: false
+};
+
+function enableNexus5X(driver) {
+ driver.sendCommand('Emulation.setDeviceMetricsOverride', DEVICE_EMULATION_METRICS);
+ driver.sendCommand('Network.setUserAgentOverride', DEVICE_EMULATION_USERAGENT);
+ driver.sendCommand('Emulation.setTouchEmulationEnabled', {
+ enabled: true,
+ configuration: 'mobile'
+ });
+
+ // from emulation/TouchModel.js
+ /* eslint-disable no-proto */ /* global window, document */
+ const injectedFunction = function() {
+ const touchEvents = ['ontouchstart', 'ontouchend', 'ontouchmove', 'ontouchcancel'];
+ var recepients = [window.__proto__, document.__proto__];
@brendankenny brendankenny commented on the diff Mar 28, 2016
helpers/emulation.js
@@ -0,0 +1,90 @@
+/**
@brendankenny
brendankenny Mar 28, 2016 Member

we're going to have to restructure helpers/ soon

@brendankenny brendankenny commented on an outdated diff Mar 28, 2016
@@ -16,7 +16,7 @@
*/
'use strict';
-const defaultUrl = 'https://voice-memos.appspot.com';
+const defaultUrl = 'https://m.flipkart.com';
@brendankenny
brendankenny Mar 28, 2016 Member

do we want m.flipkart.com or allow it to redirect from flipkart.com if it wants to?

@brendankenny brendankenny added the +1 label Mar 28, 2016
@paulirish
Member

review?

@brendankenny
Member

you'll have to fix your merge conflicts

@paulirish paulirish Merge branch 'master' into emulation
28d0680
@paulirish
Member
paulirish commented Mar 29, 2016 edited

fixed

@samccone samccone commented on the diff Mar 29, 2016
helpers/browser/driver.js
@@ -265,6 +269,15 @@ class ChromeProtocol {
});
});
}
+
+ beginEmulation() {
+ return new Promise((resolve, reject) => {
+ emulation.enableNexus5X(this);
+ emulation.enableNetworkThrottling(this);
+ emulation.disableCache(this);
+ this.pendingCommandsComplete().then(_ => resolve());
@paulirish paulirish merged commit d0ed321 into GoogleChrome:master Mar 29, 2016

2 checks passed

cla/google All necessary CLAs are signed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@paulirish paulirish deleted the paulirish:emulation branch Apr 24, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment