Constructing Puppeteer Environment With Vagrant And Docker
Tags: javascript, node, docker, testing
Published: 2018-03-25 12:43:18

---
title: Constructing Puppeteer Environment With Vagrant And Docker
published: true
description: Using Puppeteer that is Node API from Google
tags: javascript,node,docker,testing
---

# Introduction

I constructed the environment in which Puppeteer can be executed with vagrant and docker because I did not want to install any program into my local develpment environment.

If you install Vagrant and VirtualBox, this environment will be constracted easily.

# What Is Puppeteer

[Puppeteer](https://github.com/GoogleChrome/puppeteer) is the library that is provided by Google and useful to headlessly testing browser.

Puppeteer can do ...
 + Screenshot
 + Create PDF
 + Scraping
 + Automating Type Form Test
 + Testing Javascript and the function of browser with Chrome

There was the problem about Web application with javascript like React, but Puppeteer resolve it by using latest Chrome Browser. If you do not have to do cross browser test, you should use not selenium but puppeteer.


# Prepareing
 + Installing [VartualBox](http://www.oracle.com/technetwork/server-storage/virtualbox/downloads/index.html)
 + Installing [Vagrant](https://www.vagrantup.com/)
 + Checking my preparing repository ([GitHub Repository](https://github.com/ikeryo1182/puppeteer_tutorial))

# Procedure

## 1.Git Clone
```console
user:~$ cd AnyFolder
user:AnyFolder$ git clone git@github.com:ikeryo1182/puppeteer_tutorial.git
```

## 2.Vagrant up + ssh
```console
user:AnyFolder$ cd puppeteer_tutorial/vagrant_puppeteer
user:vagrant_puppeteer$ vagrant up
user:vagrant_puppeteer$ vagrant ssh
```

In 'vagrant up', docker will be installed by provisioning.

## 3.Change Directory + Root
```console
[vagrant:localhost ~]$ cd puppeteer
[vagrant:localhost puppeteer]$ sudo su
```

## 4.Setting --selinux-enabled

```console:/etc/sysconfig/docker

- OPTIONS='--selinux-enabled --log-driver=journald --signature-verification=false'
+ OPTIONS='--selinux-enabled=false --log-driver=journald --signature-verification=false'
```

## 5.Docker Enable and Start

```
[root:localhost puppeteer]$ systemctl enable docker.service
[root:localhost puppeteer]$ systemctl start docker.service
```

## 6.Check Docker Status
```console
[root:localhost puppeteer]$ systemctl status -l docker
```

This is good if the message ( the folloing ) is displayed  

```console
--> Active: active (running) since xxx xxxx-xx-xx xx:xx:xx xxx; xxmin ago
```

## 7.Docker Build
```console
[root:localhost puppeteer]$ docker build -t puppeteer
```

If you want to see more detail, you should check Dockerfile. 

## 8.Docker Run
```console
[root:localhost puppeteer]$ docker run --rm -it -v $(pwd):/opt/data-volume -w /opt/data-volume puppeteer
```

## 9.Vagrant rsync back
```console
user:vagrant_puppeteer$ vagrant rsync-back
```

You can see the image results which is created by screenshot in script.js

![google_top.png](https://qiita-image-store.s3.amazonaws.com/0/192145/7901f54b-dc67-1376-eea7-844d76203036.png)

This is japanese page.
If you do not need japanese font, you should modify Dockerfile in which Japanese Font is installed. It is executed in Docker build.

## 10.Modify script.js
```javascript:~/puppeteer_tutorial/puppeteer/script.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  });
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.screenshot({ path: 'google_top.png' });

  browser.close();
})();
```

## Modify script.js and Scraping as you like !

```console
user:vagrant_puppeteer$ vagrant rsync
[root:localhost puppeteer]$docker build ~~~
[root:localhost puppeteer]$docker run ~~~
user:vagrant_puppeteer$ vagrant rsync-back
```

# Thanks
Thank you for reading

Reference: 
[Oparating Puppeteer On Docker Container](https://qiita.com/QUANON/items/59c468adfff0278f20bb)
[Manipulate Headless Chrome With Puppeteer](https://qiita.com/sand/items/b01d7d8f3d9c1642298b)

You can check the source in the folloing URL (JP)
[puppeteer_tutorial repository](https://github.com/ikeryo1182/puppeteer_tutorial)