ブラウザ自動操作で楽したいならPuppeteerを使おう

ブラウザ操作の自動化に興味を持ったことはありませんか。

仕事のテストだったり、プライベートだったり、どちらにしても定期的にWebサイトで繰り返し同じ操作をするのって面倒なので自動化したいですよね

また、最近のシステムはユーザとのやり取りをWeb経由で行なっていることも多く、ブラウザの自動操作は知っておくと便利です。

もしあなたがNode.jsを使っていてブラウザ自動化に興味があるなら絶対にPuppeteerを使うべきです。

Node.jsのライブラリなので、導入が容易ですし、公式サイトにサンプルコードがあるので誰でも簡単に動かせます。

ちょっと興味はあったけどどうやったらいいかわからない、といった方も習得することができます。

この記事では、Puppeteerの始め方を解説します。

Contents

1 使えるシーン
2 最低限必要なスキル
3 使い方
4 まとめ

使えるシーン

メインの用途としてテスト自動化で使えます。
ブラウザ操作を自動化することで画面を自動で動かしていってスクリーンショットを撮ったりできます。

もちろんテストでけではなくPuppeteerの画面遷移機能を使ってWebスクレイピングすることもできます。
毎日ブラウザで同じような動作をしている時はその動作を自動化できちゃいます。

例えば、以下のような条件で使えると思います。
毎日の定常作業がなくなるので実装できるとめちゃくちゃ楽です。

毎日ネット証券会社で同じ条件で株を買う
毎日同じサイトから新規公開株式（IPO）の情報が出てないかチェックする
ゲームのフレンド募集掲示板で毎日同じ時刻に同じ募集文面を出す

ただし、機械学習用途で画像を大量に集めることは苦手なようです。
（画像を取得する機能が少ない）
この用途だけは別の方法で実現する必要があります。

最低限必要なスキル

Node.jsに触ったことがある人であれば導入は簡単です。
npmのようなパッケージ管理ツールからインストールできます。

また、Puppeteerの公式サイトでサンプルコードがあるので、Googleの画面に遷移してスクリーンショットをとるところまではHello World!の感覚でいけます。

念のためGoogle Chromeのみ動作するので環境制約がある方は注意。メモリもそこそこ必要です。

使い方

Puppeteer公式サイトが参考になります。

Puppeteerをインストール

npm i puppeteer

スクリーンショットを取得（公式サンプルを参考に作成）

一番簡単なサンプルです。この例では、「node screenshot.js」で実行すると「https://www.kennejs.com」に遷移してスクリーンショットをとります。

これをベースに自分のやりたいことができるようにコードを追記していきましょう。
困った時はPuppeteer APIが参考になります。

//screenshot.js
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.kennejs.com');
  await page.screenshot({path: 'kennejs.png'});
  await browser.close();
})();

Webアプリにログインするサンプルとおすすめの初期設定

架空のWebアプリにログインするサンプルコードを以下に載せておきます。

await page.goto()など、awaitがついているところはPuppeteer提供の機能です。

見たことはないと思いますが、処理を待機させたり、文字入力をしたり、直感的にわかりやすいのではないでしょうか。

const puppeteer = require('puppeteer');
// headless:falseにしておくとChromeが動いているところが見えて動作確認しやすいです。
//サーバとか参照しない環境の際は{args: ['--no-sandbox', '--disable-setuid-sandbox']}を設定しておいてください
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
// デフォルトだと画面が小さいのでwidth, heightを適当に設定します
await page.setViewport({ width: 1500, height: 800 });
await page.goto('https://xxx.co.jp/');
//画面描写されるまでpage.waitFor(xxx)でxxxミリ秒待ちます。
await page.waitFor(2000);
//ここからはF12デベロッパーツール等でhtmlを見ながらコードを書いていきます。
//ログインIDがinputタグでその属性としてname="login"の入力フォームに"kensuke"を入れる
await page.type('input[name="login"]', "kensuke");
//パスワードがinputタグでその属性としてname="password"の入力フォームに"passw0rd"を入れる
await page.type('input[name="password"]', "passw0rd");
//ログインボタンを押してログインする
//ログインボタンを定義して、click()で押します。ログインボタンがaタグでclass="loginbotton"の場合
const loginButton = await page.$('a.loginbotton');
await loginButton.click();
//画面描写が入るので待機を忘れずに
await page.waitFor(2000);
//画面が表示される
~~~処理を書いていく~~~