Set display resolution trough BROWSERSTACK_DISPLAY_RESOLUTION (#44)

Author: AndreyBelym

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 node_js:
   - stable
-  - '4'
+  - '6'

README.md

@@ -62,5 +62,10 @@ Browserstack offers two APIs for browser testing:
  TestCafe uses the JS Testing API by default. In order to use Browserstack Automate, 
  set the `BROWSERSTACK_USE_AUTOMATE` environment variable to `1`.
 
+## Setting display resolution
+
+To set the display resolution, use the `BROWSERSTACK_DISPLAY_RESOLUTION` environment variable.
+Valid resolutions can be found [here](https://github.com/browserstack/api#resolution).
+
 ## Author
 Developer Express Inc. (https://devexpress.com)

package.json

@@ -4,7 +4,7 @@
   "description": "browserstack TestCafe browser provider plugin.",
   "repository": "https://github.com/DevExpress/testcafe-browser-provider-browserstack",
   "engines": {
-    "node": ">=4.0.0"
+    "node": ">=6.0.0"
   },
   "homepage": "https://github.com/DevExpress/testcafe-browser-provider-browserstack",
   "author": {
@@ -48,7 +48,7 @@
     "chai": "^3.5.0",
     "del": "^2.2.2",
     "execa": "^0.9.0",
-    "gulp": "^3.9.0",
+    "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
     "gulp-eslint": "^3.0.1",
     "gulp-sequence": "^0.4.6",

src/index.js

@@ -6,10 +6,6 @@ import JSTestingBackend from './backends/js-testing';
 import AutomateBackend from './backends/automate';
 import BrowserProxy from './browser-proxy';
 
-
-const BUILD_ID     = process.env['BROWSERSTACK_BUILD_ID'];
-const PROJECT_NAME = process.env['BROWSERSTACK_PROJECT_NAME'];
-
 const ANDROID_PROXY_RESPONSE_DELAY = 500;
 
 function isAutomateEnabled () {
@@ -30,6 +26,21 @@ export default {
     platformsInfo: [],
     browserNames:  [],
 
+    _addEnvironmentPreferencesToCapabilities (capabilities) {
+        const BUILD_ID           = process.env['BROWSERSTACK_BUILD_ID'];
+        const PROJECT_NAME       = process.env['BROWSERSTACK_PROJECT_NAME'];
+        const DISPLAY_RESOLUTION = process.env['BROWSERSTACK_DISPLAY_RESOLUTION'];
+
+        if (PROJECT_NAME)
+            capabilities.project = PROJECT_NAME;
+
+        if (BUILD_ID)
+            capabilities.build = BUILD_ID;
+
+        if (DISPLAY_RESOLUTION)
+            capabilities.resolution = DISPLAY_RESOLUTION;
+    },
+
     _getConnector () {
         this.connectorPromise = this.connectorPromise
             .then(async connector => {
@@ -157,11 +168,7 @@ export default {
             pageUrl = 'http://' + browserProxy.targetHost + ':' + browserProxy.proxyPort + parsedPageUrl.path;
         }
 
-        if (PROJECT_NAME)
-            capabilities.project = PROJECT_NAME;
-
-        if (BUILD_ID)
-            capabilities.build = BUILD_ID;
+        this._addEnvironmentPreferencesToCapabilities(capabilities);
 
         capabilities.name            = `TestCafe test run ${id}`;
         capabilities.localIdentifier = connector.connectorInstance.localIdentifierFlag;

test/mocha/browser-names-test.js

@@ -27,7 +27,7 @@ describe('Browser names', function () {
                     'ie@9.0:Windows 7',
                     'ie@10.0:Windows 8',
                     'ie@11.0:Windows 8.1',
-                    'edge@14.0:Windows 10',
+                    'edge@15.0:Windows 10',
                     'iPhone 6@8.3',
                     'iPhone SE@11.2',
                     'iPad Pro@11.2',

test/mocha/change-resolution-test.js

@@ -0,0 +1,58 @@
+const expect  = require('chai').expect;
+const createTestCafe = require('testcafe');
+
+
+const NULL_STREAM     = { write: () => {}, end: () => {} };
+const LOW_RESOLUTION  = '1024x768';
+const HIGH_RESOLUTION = '1920x1080';
+
+
+describe('Resolution Changing', function () {
+    this.timeout(2 * 60 * 1000);
+
+    let testcafe = null;
+
+    const prevDisplayResolution = process.env.BROWSERSTACK_DISPLAY_RESOLUTION;
+
+    function runTest (testName) {
+        return testcafe
+            .createRunner()
+            .browsers('browserstack:chrome')
+            .src('test/mocha/data/change-resolution-fixture.js')
+            .filter(currentTestName => currentTestName === testName)
+            .reporter('minimal', NULL_STREAM)
+            .run();
+    }
+
+    before(function () {
+        return createTestCafe()
+            .then(function (tc) {
+                testcafe = tc;
+            });
+    });
+
+    after(function () {
+        if (prevDisplayResolution)
+            process.env.BROWSERSTACK_DISPLAY_RESOLUTION = prevDisplayResolution;
+        else
+            delete process.env.BROWSERSTACK_DISPLAY_RESOLUTION;
+
+        return testcafe.close();
+    });
+
+    it('Should change the VM display resolution according to the BROWSERSTACK_DISPLAY_RESOLUTION environment variable', function () {
+        process.env.BROWSERSTACK_DISPLAY_RESOLUTION = LOW_RESOLUTION;
+
+        return runTest('Low resolution')
+            .then(failedCount => {
+                expect(failedCount).eql(0);
+
+                process.env.BROWSERSTACK_DISPLAY_RESOLUTION = HIGH_RESOLUTION;
+
+                return runTest('High resolution');
+            })
+            .then(failedCount => {
+                expect(failedCount).eql(0);
+            });
+    });
+});

test/mocha/data/change-resolution-fixture.js

@@ -0,0 +1,14 @@
+import { ClientFunction } from 'testcafe';
+
+fixture `Changing resolution`
+    .page `example.com`;
+
+const getAvailWidth = ClientFunction(() => window.screen.availWidth);
+
+test('Low resolution', async t => {
+    await t.expect(getAvailWidth()).eql(1024);
+});
+
+test('High resolution', async t => {
+    await t.expect(getAvailWidth()).eql(1920);
+});