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(); })();

Decide to use TypeScript on HTML5 + JavaScript

I decide to give my big data project a new face. A HTML5 face, not WPF or SilverLight.

Continue from the previous post about HTML5/JavaScript, I decide to spend several hours on a new tool to write JavaScript. I compared Dart and TypeScript. As a long time C# developer, I feel it will be easier to follow another Andres's language. One advance for TypeScript can host the JavaScript code and this can help me to learn JavaScript as well.

After I install the TypeScript in VS2012, I have to reboot my computer. It was a little surprise as I did not expect a preview language needs reboot my computer while VS SP1 does not requires a reboot. But anyway, it does not take long.

I created the first TypeScript project and the sample code helps me understand what is going on. The first small project I did is a small animation on the Canvas. The following code is located in app1.ts which will be compiled to app1.js. In the HTML page, I have a canvas whose id is "canvas0".

 var c = <HTMLCanvasElement> document.getElementById("canvas0");  
 var ctx = c.getContext("2d");  
 setInterval(() =>  
 {  
   var i = new Date().getSeconds() % 10 / 10;  
   var width = c.width  
   var height = c.height  
   // Create gradient  
   var grd = ctx.createLinearGradient(0, 0, width, 0);  
   grd.addColorStop(0, "red");  
   grd.addColorStop(i, "yellow");  
   // Fill with gradient  
   ctx.fillStyle = grd;  
   ctx.fillRect(0, 0, width, height);  
 }, 500)  

In order to make the debug work, you have to use IE as default browser. Adding a new item does not work well, I have to manually add a .ts file and fix the project file.