Simple Webpage Screenshot

Using Express and Puppeteer to take screenshot of an URL and produce the image

Prerequisites

1. Node.js

Libraries

1. Puppeteer
2. express
3. Helmet
4. validator
5. Jest
6. Pixelmatch
7. pngjs
8. SuperTest

How to use

1. Clone the repository

2. Create a directory capture to for storing screenshots

3. Install the dependencies

   npm install

4. Start the app

   node index.js

5. Open a browser and go to http://localhost:3000

6. Enter an URL (e.g. http://www.google.com) you wish to take full screen screenshot

7. Click the Generate button

8. A screenshot (width: 980px) is produced

9. The screenshot can also be found in the capture directory

Testing

Piexlmatch is used to compare the pixels of the screenshot and the reference screenshot.

To run the tests, type the below command:

npm test

When running Jest with --coverage, error will be thrown by Puppeteer if the test uses page.$eval, page.$$eval or page.evaluate (https://jestjs.io/docs/en/puppeteer).

Error: Evaluation failed: ReferenceError: cov_2109gx1kfb is not defined
  at __puppeteer_evaluation_script__:3:7
  at ExecutionContext.evaluateHandle (D:\development\nodejs\simple-webpage-screenshot\node_modules\puppeteer\lib\ExecutionContext.js:121:13)

Reference

jestjs/jest#7962 (comment)

Docker

Build the image

docker build -t <tag> .

Start the container, bind port 3000 of the container to port 80

docker run -p 80:3000 -d <tag>

Visit the page at http://localhost

Stop the container

docker stop <container>

Notes

At this moment, we need to add the --no-sandbox argument to start Puppeteer to fix the below.

No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.

Also, by default, Docker runs a container with a /dev/shm shared memory space 64MB. This is typically too small for Chrome and will cause Chrome to crash when rendering large pages. Launch the browser with the --disable-dev-shm-usage flag:

const browser = await puppeteer.launch({
  args: ["--no-sandbox", "--disable-dev-shm-usage"]
});

However, running without a sandbox is strongly discouraged. Consider configuring a sandbox instead.

https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#setting-up-chrome-linux-sandbox

Jest Issue Reference

https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

https://jestjs.io/docs/en/getting-started.html

License