Puppeteerの基本操作

1 1.Puppeteerとは
2 2.Puppetterの特徴
3 3.動かしてみる
4 4.よく使うAPI

1.Puppeteerとは

日本語で人形使いという意味です。
Chromeブラウザを操作できるnodeのライブラリで、Chrome DevToolsのチームが開発を行っています。

2.Puppetterの特徴

ブラウザ操作ができるツールとしては、Selenium Webdriverが有名です。
Selenium Webdriverとの違いは、Puppeteerはヘッドレスブラウザを使うことができるので、高速に動作させることができます。
また、PuppeteerはChromeのブラウザしか操作ができません。

3.動かしてみる

導入（node.jsが動く環境が必要です。）

npm init -y
npm i puppeteer

テストしてみる
下記はGoogleのトップページに遷移して、画面のスクリーンショットを撮るテストシナリオです。

const puppeteer = require('puppeteer');

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

  await browser.close();
})();

テストを実行

node test.js

スクリーンショットがちゃんととれているので動作確認できました。

4.よく使うAPI

指定したURLにアクセスする

page.goto('https://www.google.com/');

クリック

page.click('input[type="submit"]');

クリックする要素の指定には、CSSセレクタを使用します。

フォーム操作

<form method="post" action="/update">
  <label for="name">名前</label>
  <input type="text" name="name" id="name">
  <label for="email">メールアドレス</label>
  <input type="text" name="email" id="email">
  <label for="gender">性別</label>
  <select id="gender" name="gender">
    <option value="m">男性</option>
    <option value="f">女性</option>
  </select>
  <label for="inquire">問い合わせの内容</label>
  <input type="radio" name="inquire" value="1" id="inquire_1"> 商品に関する問い合わせ
  <input type="radio" name="inquire" value="2" id="inquire_2"> その他
  <input type="submit" value="送信">
</form>

例えば上記のフォームを操作するAPIは以下のとおりです。

// テキストフィールドに値を設定する
page.type('input[name="name"]', 'kanoe');
page.type('input[name="email"]', 'kanoe@xxxx.xxx');
// プルダウンから選択する
page.select('#gender', 'f');
// ラジオボタンを選択する
page.click('#inquire_1');

デバイス切り替え

Puppeteerには既にデバイスのリストを定義しているので、そちらを使って切り替えると便利です。
定義されているデバイスは下記コードから確認できます。
https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
// iPhone6を指定してみる
const iPhone = devices['iPhone 6'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.ozmall.co.jp/');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

デバイスを指定する方法以外にも、page.setUserAgentを使うことでUserAgentを直接指定することも可能です。

page.setUserAgent('Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30');

待機

用途としては、JavaScriptのeventが起きるまで待機するために使うことが多いAPIです。

// imgタグが見つかるまで待機、見つかったらconsoleにログを出力する
page.waitFor('img')
    .then(() => console.log('gazou attayo!'));
// 1s待機
page.waitFor(1000)

画面のキャプチャ

// fullPageのオプションを指定すると、フルページでスクリーンショットが撮れる
page.screenshot({path: 'example.png', fullPage: true});

特定の要素に対して操作する

特定の１要素だけ取得して操作する場合は、page.$evalを使います。

// itemクラスを持つ最初の要素のテキストを取得する
const tab = await page.$eval('.item', el => el.textContent);

ページ内のセレクタを全て取得したい場合は、page.$$evalを使う必要があります。

// ページ内の複数のセレクタの内、特定の要素だけをクリックする
page.$$eval('#nav > .item', tabs => {
  tabs.filter(tab => tab.textContent === 'Contact')[0].click();
});