Puppeteer 1.0 で超簡単ヘッドレスブラウザ体験

Puppeteer 1.0が出た

なにこれ

ChromeのDevToolsチームが開発しているヘッドレスブラウザ。
ようするにサーバで実行されるNode.jsのJavaScriptで、目隠し状態Chromeを簡単に操作できるようにしたフレームワーク。
なんて読むのか知ってる人マジで教えてください。ぱぺってぃあ？

筆者は全然テスト自動化の経験とかないのですが、JavaScriptで動かせる、導入も楽そう、という二点が強烈だったのでポコポコ試してみた。

環境構築めっちゃ楽

node v6.4.0以上(aysnc/await使うなら7.6.0以上)で

npm i --save puppeteer

～fin～

書いてみる

もちろんjavascriptで書く。

APIはここ↓
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#
普通にChromeなので大抵のことはできる。

・公式のサンプル

const puppeteer = require('puppeteer');

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

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

ブラウザ立ち上げてexample.comにアクセスしてファイル名指定してスクショ。
直感的で良い。

書いてみた

・なんかしらのログイン画面でIDPW入力、ログインするスクリプト

login.js

let i = 1;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://example.com/dokokano/login/page'); // ページを指定

  // id入力
  const inputIdElement = await page.$('input[id=input_userid]'); // 入力フォームのエレメント取得
  await inputIdElement.focus(); // フォームにフォーカスを当てる

  // 文字入力
  await inputIdElement.press('u');
  await inputIdElement.press('s');
  await inputIdElement.press('e');
  await inputIdElement.press('r');
  await inputIdElement.press('i');
  await inputIdElement.press('d');
  await page.screenshot({path: `login_${i++}.png`});
  console.log('id entered.');

  // パスワード入力
  const inputPasswordElement = await page.$('input[id=input_password]');
  await inputPasswordElement.focus();
  await inputPasswordElement.press('p');
  await inputPasswordElement.press('a');
  await inputPasswordElement.press('s');
  await inputPasswordElement.press('s');
  await page.screenshot({path: `login_${i++}.png`});
  console.log('pass entered.');

  // ログインボタンクリック
  console.log('login start.');
  const loginButtonElement = await page.$('input[id=loginButton]');
  await loginButtonElement.click();
  // 処理、画面遷移を待つ
  await page.waitFor(3000);
  await page.screenshot({path: `login_${i++}.png`});
  console.log('login executed.');

  // 終了
  await browser.close();
})();

入力系はもっといい書き方がある気がする。いや絶対ある。
ご教授いただけると幸いです。

動かしてみる

もちろんNodeなので、上記ファイルを動かす場合は以下コマンド。

node login.js

console.logはそのままコンソールに表示される。
スクショは上記ファイルの書き方だとlogin.jsと同じディレクトリに保存される。

puppeteer_test
  ├login.js
  ├login_1.png
  ├login_2.png
  └login_3.png

login_3.pngがログイン後の画面のスクショならOK :D

つかいみち

仕事での実運用とかテスト自動化とかを考えると、まだまだSeleniumに軍配あがります。クロスブラウザだし。ぱぺってぃあChromeだし。

しかしこの手軽さは良いです。特に普段JS書いてる人ならなんの抵抗もなく書けると思います。
無限に回して10分に一回スクショとか、該当する画面に遷移して期待する要素がなかったらログ吐くとか、簡単なテストは本記事で紹介した程度の知識でもすぐ書けますね。

なによりChrome謹製なので、今後に期待です。