27 October, 2022

Integration Test with Puppeteer

Setup Project

npm init -y
npm i -D jest @types/jest ts-jest puppeteer ts-node typescript @types/puppeteer @types/node
tsc --init

Update package.json and change index.js to index.ts.

Add a tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": [ "es2015" ],                             /* Specify library files to be included in the compilation:  */
    /* Strict Type-Checking Options */
    "strict": true,                            /* Enable all strict type-checking options. */
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src",
    "node_modules/@types/puppeteer/index.d.ts"
  ]
}

In VS Code Run | Add Configuration .. and choose Node.js

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Puppeteer Test",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\src\\main.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": [
        "${workspaceFolder}/out/**/*.js"
      ]
    }
  ]
}

Create Test

Add the following in to the debug console to get mouse coordinates:

document.onmousemove = function(e){
  var x = e.pageX;
  var y = e.pageY;
  e.target.title = "X is "+x+" and Y is "+y;
};