staticディレクトリのhtmlファイルのスクリーンショットをとる

README.txt

こんな感じのディレクトリ構成になる。

.
├── package.json
├── reg.json
├── screenshots
│   └── xxx.html.png
├── src
│   └── main.ts
├── static
│   ├── xxx.html
│   ├── css
│   │   └── xxx.css
├── tsconfig.json
└── yarn.lock

main.ts

import puppeteer from 'puppeteer';
import fs from 'fs';


function getStaticHtmls() {
    return fs.readdirSync(`${__dirname}/../static`)
        .filter(file => /html$/.test(file))
        ;
}

async function main() {
    const browser = await puppeteer.launch();
    try {
        const page = await browser.newPage();
        const files = getStaticHtmls();

        for (const file of files) {
            await page.goto(`file://${__dirname}/../static/${file}`);
            /* 画面をフルサイズで撮る */
            await page.screenshot({ path: `./screenshots/${file}.png`, fullPage: true });
        }
    } catch (e) {
        console.log(e);
    } finally {
        browser.close();
    }
}

main();

package.json

{
  "name": "screenshot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "yarn diff-report && yarn see-report",
    "capture-image": "ts-node ./src/main.ts",
    "diff-report": "reg-cli ./screenshots/after ./screenshots/before ./screenshots/diff -R ./screenshots/index.html -U",
    "see-report": "http-server ./screenshots",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^1.14.0",
    "ts-node": "^8.1.0"
  },
  "devDependencies": {
    "@types/puppeteer": "^1.12.3",
    "reg-cli": "^0.14.1",
    "typescript": "^3.4.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",        /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",   /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "strict": true,         /* Enable all strict type-checking options. */
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  }
}