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

個人的によく使っているPuppeteer(伸ばさずにパペティアって読みます)の紹介記事です。
Webスクレイピングでブラウザの自動遷移とかができます。

使えるシーン

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

chroniumというGoogle Chromeライクなブラウザをインストールして使うことになります。

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

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

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

最低限必要なスキル

Node.jsに触ったことがある人であれば導入は簡単かなと思います。
サンプルのコピペでもそこそこ動くものが作れます。
念のためGoogle Chromeのみ動作するので環境制約がある方は注意。メモリもそこそこ必要です。

使い方

Puppeteer公式サイト

Puppeteerをインストール

npm i puppeteer

スクリーンショットを取得(公式サンプル)

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();
})();

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

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

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

login.js

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);

//画面が表示される
~~~処理を書いていく~~~

node login.jsと実行するとログインができました。最初がしんどいですが、慣れると単純作業で自動化コードを書いていけます。
ハマったこともいくつかあるのでそれについては今後書いていこうと思います。

使おうか悩んでいる方はぜひ挑戦してみてください。

英会話