Merge pull request #3 from jxmot/20210519-add_devices

jxmot · web-flow · commit 7a07cabeb1af · 2021-05-19T21:45:40.000-05:00
Can select Puppeteer devices for snapshots
diff --git a/README.md b/README.md
@@ -59,7 +59,9 @@ module.exports = {
         {width:1440, height:900},
         // extras, some smaller sizes...
         {width:1100, height:900},
-        {width:825, height:900}
+        {width:825, height:900},
+        // can also select from Puppeteer's devices
+        {device:'Nexus 6P'}
     ],
     // these are optional, and can be omitted or
     // commented out. The folders in imgpath must
@@ -99,6 +101,8 @@ They are in order of most to least popular according to the following sources -
 * <https://www.w3schools.com/browsers/browsers_display.asp>
 * <https://gs.statcounter.com/screen-resolution-stats/desktop/north-america>
 
+**NOTE**: A device can be added to the `views[]` array with `{device:'device name here'}`.
+
 ### Run-time Results
 
 * Creates an image for each entry in `views[]`
@@ -118,11 +122,13 @@ queuing: target = https://example.com/   name = example-1536x864
 queuing: target = https://example.com/   name = example-1440x900
 queuing: target = https://example.com/   name = example-1100x900
 queuing: target = https://example.com/   name = example-825x900
+queuing: target = https://example.com/   name = example-Nexus_6P
 snap shots are in the queue...
 saved - example-1024x768.png
 saved - example-1280x800.png
 saved - example-1440x900.png
 saved - example-825x900.png
+saved - example-Nexus_6P.png
 saved - example-1920x1080.png
 saved - example-1366x768.png
 saved - example-1536x864.png
@@ -135,5 +141,11 @@ For additional information about *logging* in this application see:
   * github: <https://github.com/jxmot/simple-text-log>
   * npmjs: <https://www.npmjs.com/package/simple-text-log>
 
+## Get the Puppeteer Device List
+
+The `listdevices.js` application will create a list of Puppeteer devices. Unfortunately their documentation does not contain one and they direct you to the TypeScript source file where the devices are contained. I wanted a handy device list so I created this small app. 
+
+After [Installation](#installation) you can the get list with `node listdevices.js`. A file named `devicelist.txt` will be created and the list is written to the console.
+
 ---
 <img src="http://webexperiment.info/extcounter/mdcount.php?id=webpage-snapshot-tool">
diff --git a/devicelist.txt b/devicelist.txt
@@ -0,0 +1,77 @@
+Blackberry PlayBook - 600 X 1024
+Blackberry PlayBook landscape - 1024 X 600
+BlackBerry Z30 - 360 X 640
+BlackBerry Z30 landscape - 640 X 360
+Galaxy Note 3 - 360 X 640
+Galaxy Note 3 landscape - 640 X 360
+Galaxy Note II - 360 X 640
+Galaxy Note II landscape - 640 X 360
+Galaxy S III - 360 X 640
+Galaxy S III landscape - 640 X 360
+Galaxy S5 - 360 X 640
+Galaxy S5 landscape - 640 X 360
+iPad - 768 X 1024
+iPad landscape - 1024 X 768
+iPad Mini - 768 X 1024
+iPad Mini landscape - 1024 X 768
+iPad Pro - 1024 X 1366
+iPad Pro landscape - 1366 X 1024
+iPhone 4 - 320 X 480
+iPhone 4 landscape - 480 X 320
+iPhone 5 - 320 X 568
+iPhone 5 landscape - 568 X 320
+iPhone 6 - 375 X 667
+iPhone 6 landscape - 667 X 375
+iPhone 6 Plus - 414 X 736
+iPhone 6 Plus landscape - 736 X 414
+iPhone 7 - 375 X 667
+iPhone 7 landscape - 667 X 375
+iPhone 7 Plus - 414 X 736
+iPhone 7 Plus landscape - 736 X 414
+iPhone 8 - 375 X 667
+iPhone 8 landscape - 667 X 375
+iPhone 8 Plus - 414 X 736
+iPhone 8 Plus landscape - 736 X 414
+iPhone SE - 320 X 568
+iPhone SE landscape - 568 X 320
+iPhone X - 375 X 812
+iPhone X landscape - 812 X 375
+iPhone XR - 414 X 896
+iPhone XR landscape - 896 X 414
+iPhone 11 - 414 X 828
+iPhone 11 landscape - 828 X 414
+iPhone 11 Pro - 375 X 812
+iPhone 11 Pro landscape - 812 X 375
+iPhone 11 Pro Max - 414 X 896
+iPhone 11 Pro Max landscape - 896 X 414
+JioPhone 2 - 240 X 320
+JioPhone 2 landscape - 320 X 240
+Kindle Fire HDX - 800 X 1280
+Kindle Fire HDX landscape - 1280 X 800
+LG Optimus L70 - 384 X 640
+LG Optimus L70 landscape - 640 X 384
+Microsoft Lumia 550 - 640 X 360
+Microsoft Lumia 950 - 360 X 640
+Microsoft Lumia 950 landscape - 640 X 360
+Nexus 10 - 800 X 1280
+Nexus 10 landscape - 1280 X 800
+Nexus 4 - 384 X 640
+Nexus 4 landscape - 640 X 384
+Nexus 5 - 360 X 640
+Nexus 5 landscape - 640 X 360
+Nexus 5X - 412 X 732
+Nexus 5X landscape - 732 X 412
+Nexus 6 - 412 X 732
+Nexus 6 landscape - 732 X 412
+Nexus 6P - 412 X 732
+Nexus 6P landscape - 732 X 412
+Nexus 7 - 600 X 960
+Nexus 7 landscape - 960 X 600
+Nokia Lumia 520 - 320 X 533
+Nokia Lumia 520 landscape - 533 X 320
+Nokia N9 - 480 X 854
+Nokia N9 landscape - 854 X 480
+Pixel 2 - 411 X 731
+Pixel 2 landscape - 731 X 411
+Pixel 2 XL - 411 X 823
+Pixel 2 XL landscape - 823 X 411
diff --git a/index.js b/index.js
@@ -112,17 +112,36 @@ for(let idx = 0; idx < targetopt.views.length; idx++) {
             name = target.split('//')[1].split('/')[0];
         }
     }
-    // add the viewport dimensions to the name
-    name = name + '-' + targetopt.views[idx].width + 'x' + targetopt.views[idx].height;
-    log(`queuing: target = ${target}   snapshot file = ${imgpath}${name}${imgextn}`);
+
+    /*
+        targetopt.views[] can contain either viewport dimensions:
+            {width:950, height:1080}
+
+        OR device names:
+            {device:'Nexus 6P'}
+    */
+    if(targetopt.views[idx].width) {
+        // add the viewport dimensions to the name
+        name = name + '-' + targetopt.views[idx].width + 'x' + targetopt.views[idx].height;
+        log(`queuing: target = ${target}   snapshot file = ${imgpath}${name}${imgextn}`);
+    }
+
+    if(targetopt.views[idx].device) {
+        // add the device name to the file name
+        name = name + '-' + targetopt.views[idx].device.replace(/ /g,'_');
+        log(`queuing: target = ${target}   snapshot file = ${imgpath}${name}${imgextn}`);
+    }
 
     (async () => {
         const browser = await puppeteer.launch({headless:true});
         const page = await browser.newPage();
         // ONLY has mobile emulation!!!
-        //  await page.emulate(puppeteer.devices['iPhone 6']);
-        // the alternative is to provide our own views...
-        await page.setViewport(targetopt.views[idx]);
+        if(targetopt.views[idx].device) {
+            await page.emulate(puppeteer.devices[targetopt.views[idx].device]);
+        } else {
+            // the alternative is to provide our own views...
+            await page.setViewport(targetopt.views[idx]);
+        }
         // get the page and wait for things to settle
         await page.goto(target,{waitUntil:'networkidle0'});
         // give time for page load and render
diff --git a/listdevices.js b/listdevices.js
@@ -0,0 +1,25 @@
+'use strict';
+/*
+    List all devices that Puppeteer contains:
+
+        node listdevices.js
+
+    Creates a text file listing all of the device names 
+    and their dimensions:
+
+        Nexus 6P - 412 X 732
+*/
+// set up run-time logging first...
+const Log = require('simple-text-log');
+const logOut = new Log({logfile:'./devicelist.txt',logsize:0});
+// optionally also write to the console
+const logcon = true;
+function log(payload) {
+    if(logcon) console.log(payload);
+    logOut.write(payload);
+};
+const puppeteer = require('puppeteer');
+Object.keys(puppeteer.devices).forEach((key, idx) => {
+    let dev = puppeteer.devices[key];
+    log(`${dev.name} - ${dev.viewport.width} X ${dev.viewport.height}`);
+});
diff --git a/puppeteer-device_list-20210517.json b/puppeteer-device_list-20210517.json
@@ -1,4 +1,4 @@
-'{
+{
   "Blackberry PlayBook": {
     "name": "Blackberry PlayBook",
     "userAgent": "Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML like Gecko) Version/7.2.1.0 Safari/536.2+",
@@ -923,4 +923,4 @@
       "isLandscape": true
     }
   }
-}'
+}
diff --git a/puppeteer-device_list-20210517.md b/puppeteer-device_list-20210517.md
@@ -0,0 +1,77 @@
+Blackberry PlayBook - 600 X 1024
+Blackberry PlayBook landscape - 1024 X 600
+BlackBerry Z30 - 360 X 640
+BlackBerry Z30 landscape - 640 X 360
+Galaxy Note 3 - 360 X 640
+Galaxy Note 3 landscape - 640 X 360
+Galaxy Note II - 360 X 640
+Galaxy Note II landscape - 640 X 360
+Galaxy S III - 360 X 640
+Galaxy S III landscape - 640 X 360
+Galaxy S5 - 360 X 640
+Galaxy S5 landscape - 640 X 360
+iPad - 768 X 1024
+iPad landscape - 1024 X 768
+iPad Mini - 768 X 1024
+iPad Mini landscape - 1024 X 768
+iPad Pro - 1024 X 1366
+iPad Pro landscape - 1366 X 1024
+iPhone 4 - 320 X 480
+iPhone 4 landscape - 480 X 320
+iPhone 5 - 320 X 568
+iPhone 5 landscape - 568 X 320
+iPhone 6 - 375 X 667
+iPhone 6 landscape - 667 X 375
+iPhone 6 Plus - 414 X 736
+iPhone 6 Plus landscape - 736 X 414
+iPhone 7 - 375 X 667
+iPhone 7 landscape - 667 X 375
+iPhone 7 Plus - 414 X 736
+iPhone 7 Plus landscape - 736 X 414
+iPhone 8 - 375 X 667
+iPhone 8 landscape - 667 X 375
+iPhone 8 Plus - 414 X 736
+iPhone 8 Plus landscape - 736 X 414
+iPhone SE - 320 X 568
+iPhone SE landscape - 568 X 320
+iPhone X - 375 X 812
+iPhone X landscape - 812 X 375
+iPhone XR - 414 X 896
+iPhone XR landscape - 896 X 414
+iPhone 11 - 414 X 828
+iPhone 11 landscape - 828 X 414
+iPhone 11 Pro - 375 X 812
+iPhone 11 Pro landscape - 812 X 375
+iPhone 11 Pro Max - 414 X 896
+iPhone 11 Pro Max landscape - 896 X 414
+JioPhone 2 - 240 X 320
+JioPhone 2 landscape - 320 X 240
+Kindle Fire HDX - 800 X 1280
+Kindle Fire HDX landscape - 1280 X 800
+LG Optimus L70 - 384 X 640
+LG Optimus L70 landscape - 640 X 384
+Microsoft Lumia 550 - 640 X 360
+Microsoft Lumia 950 - 360 X 640
+Microsoft Lumia 950 landscape - 640 X 360
+Nexus 10 - 800 X 1280
+Nexus 10 landscape - 1280 X 800
+Nexus 4 - 384 X 640
+Nexus 4 landscape - 640 X 384
+Nexus 5 - 360 X 640
+Nexus 5 landscape - 640 X 360
+Nexus 5X - 412 X 732
+Nexus 5X landscape - 732 X 412
+Nexus 6 - 412 X 732
+Nexus 6 landscape - 732 X 412
+Nexus 6P - 412 X 732
+Nexus 6P landscape - 732 X 412
+Nexus 7 - 600 X 960
+Nexus 7 landscape - 960 X 600
+Nokia Lumia 520 - 320 X 533
+Nokia Lumia 520 landscape - 533 X 320
+Nokia N9 - 480 X 854
+Nokia N9 landscape - 854 X 480
+Pixel 2 - 411 X 731
+Pixel 2 landscape - 731 X 411
+Pixel 2 XL - 411 X 823
+Pixel 2 XL landscape - 823 X 411
diff --git a/target-example.js b/target-example.js
@@ -22,7 +22,9 @@ module.exports = {
         {width:1440, height:900},
         // extras, some smaller sizes...
         {width:1100, height:900},
-        {width:825, height:900}
+        {width:825, height:900},
+        // can also select from Puppeteer's devices
+        {device:'Nexus 6P'}
     ],
     // these are optional, and can be omitted or
     // commented out. The folders in imgpath must

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-'{`
	`1`	`+{`
`2`	`2`	`"Blackberry PlayBook": {`
`3`	`3`	`"name": "Blackberry PlayBook",`
`4`	`4`	`"userAgent": "Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML like Gecko) Version/7.2.1.0 Safari/536.2+",`
`@@ -923,4 +923,4 @@`
`923`	`923`	`"isLandscape": true`
`924`	`924`	`}`
`925`	`925`	`}`
`926`		`-}'`
	`926`	`+}`