Merge pull request #784 from gmetais/viewport

Add support for viewport option
macbre · Oct 5, 2020 · 497b21e · 497b21e
2 parents 288be32 + d95fd45
commit 497b21e
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
diff --git a/extensions/viewport/viewport.js b/extensions/viewport/viewport.js
@@ -0,0 +1,36 @@
+/**
+ * Provides the --viewport option to set any device resolution and pixel density ratio.
+ * If the user sets a viewport size as well as a device option (--phone, --tablet, ...),
+ * we assume that he/she wants to overwrite the device values.
+ *
+ * Two syntaxes are supported:
+ *  - 1200x800 will set a 1x pixel density ratio
+ *  - 1200x800x2 will set the given ratio (float values such as 1.5 are accepted)
+ */
+'use strict';
+
+module.exports = function(phantomas) {
+
+    const viewport = phantomas.getParam('viewport');
+
+    if (viewport === undefined) {
+        phantomas.log('No viewport option specified, will use the device default viewport');
+        return;
+    }
+
+    phantomas.log('Viewport: %s provided', viewport);
+
+    const viewportValues = viewport.split('x');
+    const options = {
+        width: parseInt(viewportValues[0], 10),
+        height: parseInt(viewportValues[1], 10),
+        deviceScaleFactor: parseFloat(viewportValues[2]) || 1
+    };
+
+    phantomas.on('init', async page => {
+
+        // @see https://github.com/puppeteer/puppeteer/blob/v1.11.0/docs/api.md#pagesetviewportviewport
+        await page.setViewport(options);
+        phantomas.log('page.setViewport() called with options %j', options);
+    });
+};
diff --git a/test/integration-spec.yaml b/test/integration-spec.yaml
@@ -636,6 +636,33 @@
     userAgent: 'Mozilla/5.0 (Linux; U; en-us; KFAPWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true'
     viewport: '1280x800'
 
+# viewport
+- url: "/viewport.html"
+  label: "/viewport.html (with --viewport 1100x700)"
+  options:
+    viewport: '1100x700'
+  metrics:
+    viewport: '1100x700'
+    devicePixelRatio: 1
+
+# viewport
+- url: "/viewport.html"
+  label: "/viewport.html (with --viewport 1100x700x2)"
+  options:
+    viewport: '1100x700x2'
+  metrics:
+    viewport: '1100x700'
+    devicePixelRatio: 2
+
+# viewport
+- url: "/viewport.html"
+  label: "/viewport.html (with --viewport 1100x700x2.5)"
+  options:
+    viewport: '1100x700x2.5'
+  metrics:
+    viewport: '1100x700'
+    devicePixelRatio: 2.5
+
 # https and webfonts
 - url: "/https-fonts.html"
   options:

diff --git a/test/webroot/viewport.html b/test/webroot/viewport.html
@@ -0,0 +1,9 @@
+<body>
+    <script>
+        (phantomas => {
+            phantomas.setMetric('userAgent', navigator.userAgent);
+            phantomas.setMetric('viewport', window.innerWidth + 'x' + window.innerHeight);
+            phantomas.setMetric('devicePixelRatio', window.devicePixelRatio);
+        })(window.__phantomas);
+    </script>
+</body>