feat: add deviceMetricsOverride option to support #4

README.md

@@ -31,6 +31,7 @@ see more demo in [unit test](test/index.test.js)
 - `useReady`: `boolean` whether use `window.isPageReady=1` to notify chrome-render page has ready. default is false chrome-render use `domContentEventFired` as page has ready.
 - `script`: `string` is an option param. inject script source to evaluate when page on load
 - `renderTimeout`: `number` in ms, `render()` will throw error if html string can't be resolved after `renderTimeout`, default is 5000ms.
+- `deviceMetricsOverride`: `object` overrides the values of device screen dimensions for responsive websites, detail use see [here](https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDeviceMetricsOverride)
 
 all request from chrome-render will take with a HTTP header `x-chrome-render:${version}`
 

index.d.ts

@@ -41,6 +41,10 @@ export default class ChromeRender {
      * `number` in ms, `render()` will throw error if html string can't be resolved after `renderTimeout`, default is 5000ms.
      */
     renderTimeout?: number,
+    /**
+     * `object` Overrides the values of device screen dimensions, same as https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDeviceMetricsOverride
+     */
+    deviceMetricsOverride?: object,
   }): Promise<string>;
 
   /**

index.js

@@ -23,11 +23,11 @@ class ChromeRender {
    * @return {Promise.<ChromeRender>}
    */
   static async new(params = {}) {
-    const { maxTab} = params;
+    const { maxTab } = params;
     const chromeRender = new ChromeRender();
     chromeRender.chromePoll = await ChromePoll.new({
       maxTab,
-      protocols: ['Page', 'DOM', 'Network', 'Console'],
+      protocols: ['Page', 'DOM', 'Network', 'Console', 'Emulation'],
     });
     return chromeRender;
   }
@@ -42,6 +42,7 @@ class ChromeRender {
    *      useReady: `boolean` whether use `window.chromeRenderReady()` to notify chrome-render page has ready. default is false chrome-render use `domContentEventFired` as page has ready.
    *      script: inject script to evaluate when page on load
    *      renderTimeout: `number` in ms, `render()` will throw error if html string can't be resolved after `renderTimeout`, default is 5000ms.
+   *      deviceMetricsOverride: `object` Overrides the values of device screen dimensions, same as https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDeviceMetricsOverride
    * }
    * @returns {Promise.<string>} page html string
    */
@@ -50,7 +51,7 @@ class ChromeRender {
     return await new Promise(async (resolve, reject) => {
       let hasFailed = false;
       let timer;
-      let { url, cookies, headers = {}, useReady, script, renderTimeout = 5000 } = params;
+      let { url, cookies, headers = {}, useReady, script, renderTimeout = 5000, deviceMetricsOverride } = params;
 
 
       // params assert
@@ -63,7 +64,7 @@ class ChromeRender {
 
       // open a tab
       client = await this.chromePoll.require();
-      const { Page, DOM, Console, Network, } = client.protocol;
+      const { Page, DOM, Console, Network, Emulation } = client.protocol;
 
       // add timeout reject
       timer = setTimeout(() => {
@@ -145,6 +146,12 @@ Object.defineProperty(window, 'isPageReady', {
         Page.domContentEventFired(resolveHTML);
       }
 
+      // override device metrics
+      if (deviceMetricsOverride && typeof deviceMetricsOverride === 'object') {
+        // https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDeviceMetricsOverride
+        Emulation.setDeviceMetricsOverride(deviceMetricsOverride);
+      }
+
       // to go page
       await Page.navigate({
         url,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-render",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "General server render base on chrome",
   "keywords": [
     "headless",

test/index.test.js

@@ -2,6 +2,8 @@
 const assert = require('assert');
 const ChromeRender = require('../index');
 
+process.on('unhandledRejection', console.trace);
+
 describe('#ChromeRender', function () {
   this.timeout(10000);
 
@@ -106,4 +108,32 @@ describe('#ChromeRender', function () {
     await chromeRender.destroyRender();
   });
 
+  it('#render() use mobile to visit by set deviceMetricsOverride', async function () {
+    const chromeRender = await ChromeRender.new();
+
+    // mobile version
+    let html = await chromeRender.render({
+      url: 'https://www.google.com',
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0 like Mac OS X) AppleWebKit/602.1.38 (KHTML, like Gecko) Version/10.0 Mobile/14A300 Safari/602.1',
+      },
+      deviceMetricsOverride: {
+        width: 100,
+        height: 200,
+        deviceScaleFactor: 0,
+        fitWindow: true,
+        mobile: true,
+      }
+    });
+    assert(html.indexOf('apple-touch-icon') > 0, `visit mobile version should has apple-touch-icon, html:${html}`);
+
+    // desktop version
+    html = await chromeRender.render({
+      url: 'https://www.google.com',
+    });
+    assert(html.indexOf('apple-touch-icon') === -1, `default is visit desktop version should not has apple-touch-icon, html:${html}`);
+
+    await chromeRender.destroyRender();
+  });
+
 });