angular-cli, firebase-tools, puppeteer docker image

docker image with: Angular CLI Firebase Tools Google Puppeteer screenshots scripts

docker tags

• latest

install

docker pull robertbaker/docker-angular-firebase-puppeteer:latest
# OR
docker pull robertbaker/docker-angular-firebase-puppeteer:2.0.0
# OR
docker pull robertbaker/docker-angular-firebase-puppeteer:2

before usage

angular cli project

1. Edit src/karma.config

process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function(config) {
    config.set({
        browsers: ['ChromeHeadless']
        ...
    });
};

1. you should pass --no-sandbox args when launch browser

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();

  const page = await browser.newPage();

  await page.goto('https://www.google.com/', { waitUntil: 'networkidle2' });

  browser.close();
})();

2. if you got page crash with BUS_ADRERR (chromium issue), increase shm-size on docker run with --shm-size argument

docker run --shm-size 1G --rm -v <path_to_script>:/app/index.js robertbaker/docker-angular-firebase-puppeteer:latest

3. If you're seeing random navigation errors (unreachable url) it's likely due to ipv6 being enabled in docker. Navigation errors are caused by ERR_NETWORK_CHANGED (-21) in chromium. Disable ipv6 in your container using --sysctl net.ipv6.conf.all.disable_ipv6=1 to fix:

docker run --shm-size 1G --sysctl net.ipv6.conf.all.disable_ipv6=1 --rm -v <path_to_script>:/app/index.js robertbaker/docker-angular-firebase-puppeteer:latest

4. add --enable-logging for chrome debug logging http://www.chromium.org/for-testers/enable-logging

const puppeteer = require('puppeteer');

(async() => {

    const browser = await puppeteer.launch({args: [
        // debug logging
        '--enable-logging', '--v=1'
    ]});

usage

mount your script to /app/index.js

docker run --shm-size 1G --rm -v <path_to_script>:/app/index.js robertbaker/docker-angular-firebase-puppeteer:latest

custom script from dir

docker run --shm-size 1G --rm \
 -v <path_to_dir>:/app \
 robertbaker/docker-angular-firebase-puppeteer:latest \
 node my_script.js

screenshots tools

simple screenshot tools in image

docker run --shm-size 1G --rm -v /tmp/screenshots:/screenshots \
robertbaker/docker-angular-firebase-puppeteer:latest \
 <screenshot,full_screenshot,screenshot_series,full_screenshot_series> 'https://www.google.com' 1366x768

screenshot tools syntax

<tool> <url> <width>x<height> [<delay_in_ms>]

• delay_in_ms: is optional (defaults to 0)
  • Waits for delay_in_ms milliseconds before taking the screenshot

screenshot

docker run --shm-size 1G --rm -v /tmp/screenshots:/screenshots \
 robertbaker/docker-angular-firebase-puppeteer:latest \
 screenshot 'https://www.google.com' 1366x768

output: one line json

{
    "date":"2017-09-01T05:03:27.464Z",
    "timestamp":1504242207,
    "filename":"screenshot_1366_768.png",
    "width":1366,
    "height":768
}

got screenshot in /tmp/screenshots/screenshot_1366_768.png

full_screenshot

save full screenshot of page

docker run --shm-size 1G --rm -v /tmp/screenshots:/screenshots \
 robertbaker/docker-angular-firebase-puppeteer:latest \
 full_screenshot 'https://www.google.com' 1366x768

screenshot_series, full_screenshot_series

adds datetime in ISO format into filename

useful for cron screenshots

docker run --shm-size 1G --rm -v /tmp/screenshots:/screenshots \
 robertbaker/docker-angular-firebase-puppeteer:latest \
 screenshot_series 'https://www.google.com' 1366x768

docker run --shm-size 1G --rm -v /tmp/screenshots:/screenshots \
 robertbaker/docker-angular-firebase-puppeteer:latest \
 full_screenshot_series 'https://www.google.com' 1366x768

2017-09-01T05:08:55.027Z_screenshot_1366_768.png
# OR
2017-09-01T05:08:55.027Z_full_screenshot_1366_768.png