Automation with NodeJS-Puppeteer & Visual Studio Code

I saw many attempts to automate the processing using commercial software. However, I do not see this is necessary if this task is not that huge. When more and more application is moving to the web-based. Automation of the Chrome browser will automate most of the scenarios. Therefore, I feel 90% of those cases won't need to pay and still get the job done.

First, we need to set up IDE. There are three files needs to be updated and placed in the place. Please make sure you put launch.json and tasks.json are under .vscode folder. 

• launch.json: it is used to launch the application with predefined tasks such as Typescript build. 
• tsconfig.json is to used to build the application using Puppeteer
• tasks.json is to define the Typescript build process

The content of these three files

• launch.json

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "sourceMaps": true, "preLaunchTask": "TSC", "program": "${workspaceFolder}/app.ts", "outFiles": [ "${workspaceFolder}/**/*.js" ] } ] }'

• tasks.json

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

{ // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "TSC", "type": "typescript", "tsconfig": "tsconfig.json", "problemMatcher": [ "$tsc" ], "group": { "kind": "build", "isDefault": true } } ] }

• tsconfig.json

1 2 3 4 5 6 7 8 9 10 11 12

{ "compilerOptions": { "target": "es5", "module": "commonjs", "lib": ["es2015", "dom"], "sourceMap": true }, "include": [ "src", "node_modules/@types/puppeteer/index.d.ts" ] }

The node_modules folder is created from the npm command provided by the NodeJS framework. The command to run is listed the following. The first line is to install TypeScript compiler which is not installed by default with VS Code. The second line is to install Puppeteer. The last line is to install the library for Typescript to work with Puppeteer.

1 2 3

npm i -g typescript npm i --save puppeteer npm i --save-dev @types/puppeteer

The last file is the Puppeteer file:

1 2 3 4 5 6 7 8 9 10

import * as puppeteer from 'puppeteer' (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('http://www.google.com'); await page.screenshot({path: 'example.png'}); await browser.close(); })();