Merge pull request #405 from GuillaumeGomez/device-pixel-ratio

Add device-pixel-ratio command and improve UI test execution speed

Author: GuillaumeGomez

goml-script.md

@@ -115,6 +115,7 @@ Here's the command list:
  * [`css`](#css)
  * [`debug`](#debug)
  * [`define-function`](#define-function)
+ * [`device-pixel-ratio`](#device-pixel-ratio)
  * [`drag-and-drop`](#drag-and-drop)
  * [`emulate`](#emulate)
  * [`fail`](#fail)
@@ -959,6 +960,23 @@ So in this case, here is what will happen:
  6. `assert-attribute` is called.
  7. `assert-position` is called.
 
+#### device-pixel-ratio
+
+**device-pixel-ratio** commands allows you to change the device scale factor. You can find more information about it [here](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). It expected a positive non-null number (can be a float). Example:
+
+```
+device-pixel-ratio: 1 // the default value
+device-pixel-ratio: 0.5
+```
+
+You can check its value like this:
+
+```
+// We use `STARTS_WITH` because otherwise the check would very likely fail
+// because of floating numbers rounding.
+assert-window-property: ({"devicePixelRatio": "0.5"}, [STARTS_WITH])
+```
+
 #### drag-and-drop
 
 **drag-and-drop** command allows to move an element to another place (assuming it implements the necessary JS and is draggable). It expects a tuple of two elements. Each element can be a position or a CSS selector or an XPath. Example:

src/commands.js

@@ -44,6 +44,7 @@ const ORDERS = {
     'compare-elements-text-false': commands.parseCompareElementsTextFalse,
     'css': commands.parseCss,
     'debug': commands.parseDebug,
+    'device-pixel-ratio': commands.parseDevicePixelRatio,
     'define-function': commands.parseDefineFunction,
     'drag-and-drop': commands.parseDragAndDrop,
     'emulate': commands.parseEmulate,
@@ -94,6 +95,7 @@ const FATAL_ERROR_COMMANDS = [
     'call-function',
     'click',
     'css',
+    'device-pixel-ratio',
     'drag-and-drop',
     'emulate',
     'focus',
@@ -102,6 +104,7 @@ const FATAL_ERROR_COMMANDS = [
     'move-cursor-to',
     'screenshot',
     'scroll-to',
+    'size',
     'store-property',
     'store-value',
     'text',

src/commands/all.js

@@ -53,6 +53,7 @@ module.exports = {
     'parseCss': dom_modifiers.parseCss,
     'parseDebug': context_setters.parseDebug,
     'parseDefineFunction': functions.parseDefineFunction,
+    'parseDevicePixelRatio': emulation.parseDevicePixelRatio,
     'parseDragAndDrop': input.parseDragAndDrop,
     'parseEmulate': emulation.parseEmulate,
     'parseFail': context_setters.parseFail,

src/commands/emulation.js

@@ -12,7 +12,9 @@ function parseSize(parser) {
     if (elems.length === 0) {
         return {'error': 'expected `([number], [number])`, found nothing'};
     } else if (elems.length !== 1 || elems[0].kind !== 'tuple') {
-        return {'error': `expected \`([number], [number])\`, found \`${parser.getRawArgs()}\``};
+        return {
+            'error': `expected \`([number], [number])\`, found \`${parser.getRawArgs()}\``,
+        };
     }
     const ret = checkIntegerTuple(elems[0], 'width', 'height', true);
     if (ret.error !== undefined) {
@@ -21,7 +23,36 @@ function parseSize(parser) {
     const [width, height] = ret.value;
     return {
         'instructions': [
-            `await page.setViewport({width: ${width}, height: ${height}})`,
+            `\
+const viewport = page.viewport();
+viewport.width = ${width};
+viewport.height = ${height};
+await page.setViewport(viewport);`,
+        ],
+    };
+}
+
+// Possible inputs:
+//
+// * number
+function parseDevicePixelRatio(parser) {
+    const elems = parser.elems;
+
+    if (elems.length === 0) {
+        return {'error': 'expected a number, found nothing'};
+    } else if (elems.length !== 1 || elems[0].kind !== 'number') {
+        return {'error': `expected a number, found \`${parser.getRawArgs()}\``};
+    }
+    const ratio = elems[0].getRaw();
+    if (Math.ceil(ratio) <= 0) {
+        return {'error': 'device pixel ratio cannot be less than or equal to 0'};
+    }
+    return {
+        'instructions': [
+            `\
+const viewport = page.viewport();
+viewport.deviceScaleFactor = ${ratio};
+await page.setViewport(viewport);`,
         ],
     };
 }
@@ -158,6 +189,7 @@ function parseFontSize(parser) {
 }
 
 module.exports = {
+    'parseDevicePixelRatio': parseDevicePixelRatio,
     'parseEmulate': parseEmulate,
     'parseFontSize': parseFontSize,
     'parseGeolocation': parseGeolocation,

tests/test-js/api.js

@@ -5844,6 +5844,24 @@ local-storage: "ab"`,
     });
 }
 
+function checkDevicePixelRatio(x, func) {
+    x.assert(func(''), {'error': 'expected a number, found nothing'});
+    x.assert(func('hello'), {'error': 'expected a number, found `hello`'});
+    x.assert(func('0.'), {'error': 'device pixel ratio cannot be less than or equal to 0'});
+    x.assert(func('-1.2'), {'error': 'device pixel ratio cannot be less than or equal to 0'});
+
+    x.assert(func('1.2'), {'instructions': [`\
+const viewport = page.viewport();
+viewport.deviceScaleFactor = 1.2;
+await page.setViewport(viewport);`,
+    ]});
+    x.assert(func('0.2'), {'instructions': [`\
+const viewport = page.viewport();
+viewport.deviceScaleFactor = 0.2;
+await page.setViewport(viewport);`,
+    ]});
+}
+
 function checkDragAndDrop(x, func) {
     // check tuple argument
     x.assert(func('true'), {
@@ -6860,12 +6878,27 @@ function checkSize(x, func) {
     x.assert(func('(-1.0,2)'), {'error': 'expected integer for width, found float: `-1.0`'});
     x.assert(func('(1,2.0)'), {'error': 'expected integer for height, found float: `2.0`'});
     x.assert(func('(1,-2.0)'), {'error': 'expected integer for height, found float: `-2.0`'});
-    x.assert(func('(1,2)'), {'instructions': ['await page.setViewport({width: 1, height: 2})']});
 
-    x.assert(func('(1,2,)'), {'instructions': ['await page.setViewport({width: 1, height: 2})']});
+    x.assert(func('(1,2)'), {'instructions': [`\
+const viewport = page.viewport();
+viewport.width = 1;
+viewport.height = 2;
+await page.setViewport(viewport);`,
+    ]});
+    x.assert(func('(1,2,)'), {'instructions': [`\
+const viewport = page.viewport();
+viewport.width = 1;
+viewport.height = 2;
+await page.setViewport(viewport);`,
+    ]});
     // Multiline
     x.assert(func('(1,\n-2.0)'), {'error': 'expected integer for height, found float: `-2.0`'});
-    x.assert(func('(1\n,2)'), {'instructions': ['await page.setViewport({width: 1, height: 2})']});
+    x.assert(func('(1\n,2)'), {'instructions': [`\
+const viewport = page.viewport();
+viewport.width = 1;
+viewport.height = 2;
+await page.setViewport(viewport);`,
+    ]});
 }
 
 function checkStoreAttribute(x, func) {
@@ -8792,6 +8825,11 @@ const TO_CHECK = [
         'func': checkDefineFunction,
         'toCall': (e, o) => wrapperDefineFunction(parserFuncs.parseDefineFunction, e, o),
     },
+    {
+        'name': 'device-pixel-ratio',
+        'func': checkDevicePixelRatio,
+        'toCall': (e, o) => wrapper(parserFuncs.parseDevicePixelRatio, e, o),
+    },
     {
         'name': 'drag-and-drop',
         'func': checkDragAndDrop,

tests/test-js/ui.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const os = require('os');
 const process = require('process');
 
 const utils = require('../../src/utils.js');
@@ -15,6 +16,30 @@ async function wrapRunTests(options = new Options()) {
     return ret[0];
 }
 
+function runAsyncUiTest(x, file, output, tests_queue) {
+    const options = new Options();
+    options.parseArguments(['--variable', 'DOC_PATH', 'tests/html_files',
+        '--test-files', file]);
+    let testOutput = '';
+
+    const callback = x.assertTryUi(
+        wrapRunTests,
+        [options],
+        output.replaceAll('$CURRENT_DIR', utils.getCurrentDir()),
+        file,
+        false,
+        s => testOutput += s,
+    ).finally(() => {
+        print(`Finished testing "${file}"`);
+        if (testOutput.length > 0) {
+            print(testOutput);
+        }
+        // We now remove the promise from the tests_queue.
+        tests_queue.splice(tests_queue.indexOf(callback), 1);
+    });
+    tests_queue.push(callback);
+}
+
 // This test ensures that the outputs looks as expected.
 async function compareOutput(x) {
     const filesToTest = [];
@@ -26,6 +51,11 @@ async function compareOutput(x) {
         }
         filesToTest.push(curPath.toString());
     });
+
+    const cpuCount = os.cpus().length / 2 + 1;
+    process.setMaxListeners(cpuCount);
+    const tests_queue = [];
+
     for (let i = 0; i < filesToTest.length; ++i) {
         const file = filesToTest[i];
         const outputFile = file.replace('.goml', '.output');
@@ -38,17 +68,13 @@ async function compareOutput(x) {
             continue;
         }
 
-        const options = new Options();
-        options.parseArguments(['--variable', 'DOC_PATH', 'tests/html_files',
-            '--test-files', file]);
-
-        await x.assertTryUi(
-            wrapRunTests,
-            [options],
-            output.replaceAll('$CURRENT_DIR', utils.getCurrentDir()),
-            file,
-            false,
-        );
+        runAsyncUiTest(x, file, output, tests_queue);
+        if (tests_queue.length >= cpuCount) {
+            await Promise.race(tests_queue);
+        }
+    }
+    if (tests_queue.length > 0) {
+        await Promise.all(tests_queue);
     }
 }
 

tests/test-js/utils.js

@@ -33,13 +33,13 @@ function plural(x, nb) {
     return x;
 }
 
-function printDiff(i, value) {
+function printDiff(i, value, out) {
     let s = '=> ';
     for (let count = 0; count < 34 && i < value.length; ++count) {
         s += value[i];
         i += 1;
     }
-    print(s);
+    print(s, out);
 }
 
 class Assert {
@@ -48,7 +48,7 @@ class Assert {
     }
 
     // `extraInfo` is used as an additional message in case the test fails.
-    assert(value1, value2, pos, extraInfo, toJson = true) {
+    assert(value1, value2, pos, extraInfo, toJson = true, out = undefined) {
         this._addTest();
         if (typeof value2 !== 'undefined') {
             if (toJson === true) {
@@ -60,20 +60,20 @@ class Assert {
                     pos = getStackInfo(new Error().stack);
                 }
                 if (typeof extraInfo === 'undefined') {
-                    print(`[${pos.file}:${pos.line}] failed:`);
+                    print(`[${pos.file}:${pos.line}] failed:`, out);
                 } else {
-                    print(`[${pos.file}:${pos.line}] failed (in ${extraInfo}):`);
+                    print(`[${pos.file}:${pos.line}] failed (in ${extraInfo}):`, out);
                 }
-                print(`EXPECTED: \`${value2}\`\n===============\n   FOUND: \`${value1}\``);
+                print(`EXPECTED: \`${value2}\`\n===============\n   FOUND: \`${value1}\``, out);
                 for (let i = 0; i < value1.length && i < value2.length; ++i) {
                     if (value1[i] !== value2[i]) {
                         i -= 8;
                         if (i < 0) {
                             i = 0;
                         }
-                        print('|||||> Error happened around there:');
-                        printDiff(i, value2);
-                        printDiff(i, value1);
+                        print('|||||> Error happened around there:', out);
+                        printDiff(i, value2, out);
+                        printDiff(i, value1, out);
                         break;
                     }
                 }
@@ -84,7 +84,7 @@ class Assert {
             if (typeof pos === 'undefined') {
                 pos = getStackInfo(new Error().stack);
             }
-            print(`[${pos.file}:${pos.line}] failed: \`${value1}\` is evalued to false`);
+            print(`[${pos.file}:${pos.line}] failed: \`${value1}\` is evalued to false`, out);
             this._incrError();
             return false;
         }
@@ -133,7 +133,7 @@ class Assert {
     }
 
     // Same as `assertTry` but handle some corner cases linked to UI tests.
-    async assertTryUi(callback, args, expectedValue, extraInfo, toJson = true) {
+    async assertTryUi(callback, args, expectedValue, extraInfo, toJson = true, out = undefined) {
         const pos = getStackInfo(new Error().stack, 2);
         try {
             const ret = await callback(...args);
@@ -153,9 +153,9 @@ class Assert {
                 }
                 return true;
             }
-            return this.assert(ret, expectedValue, pos, extraInfo, toJson);
+            return this.assert(ret, expectedValue, pos, extraInfo, toJson, out);
         } catch (err) {
-            return this.assert(err.message, expectedValue, pos, extraInfo, toJson);
+            return this.assert(err.message, expectedValue, pos, extraInfo, toJson, out);
         }
     }
 

tests/ui-tests/device-pixel-ratio.goml

@@ -0,0 +1,9 @@
+// Check that the `device-pixel-ratio` command is working as expected.
+goto: "file://" + |CURRENT_DIR| + "/" + |DOC_PATH| + "/elements.html"
+device-pixel-ratio: 1.2
+assert-window-property: ({"devicePixelRatio": "1.2"}, [STARTS_WITH])
+device-pixel-ratio: 1.5
+assert-window-property: ({"devicePixelRatio": "1.5"}, [STARTS_WITH])
+device-pixel-ratio: -2
+// It should not run the next command.
+assert: ".whatever"

tests/ui-tests/device-pixel-ratio.output

@@ -0,0 +1,6 @@
+=> Starting doc-ui tests...
+
+device-pixel-ratio... FAILED
+[ERROR] line 7: device pixel ratio cannot be less than or equal to 0 (from command `-2`)
+
+<= doc-ui tests done: 0 succeeded, 1 failed

tests/ui-tests/size.goml

@@ -0,0 +1,9 @@
+// Check that the `size` command is working as expected.
+goto: "file://" + |CURRENT_DIR| + "/" + |DOC_PATH| + "/elements.html"
+size: (670, 650)
+assert-window-property: {"innerWidth": "670", "innerHeight": "650"}
+size: (610, 600)
+assert-window-property: {"innerWidth": "610", "innerHeight": "600"}
+size: (-10, 0.2)
+// It should not run the next command.
+assert: ".whatever"