おためしpuppeteer

お久しぶりでございます。

本来のアップ予定であった、水曜日をおとし今この時間にやっと投稿させていただいた、

季節外れのインフルエンザ（A型）にやられてしまった、scalaでバックエンドを開発しているaxtstar(@axtstart)です。

まだ出勤するのは、はばかられる状態なので、リモートワーク中です。

実は何気に（前職も通して）初めてのリモートワークだったりして、新鮮というか、なんというか、

ただ、slackで仕事のやり取りを普段からしているためか、それほどの差は感じないですね。

社会の進化を感じます。

さて今回なのですが、だいぶ前の回で、phantomJS の話を書いたかと思うのですが、

その関連というか、headless chromeをあやつる、nodeJSで書かれたpuppeteerというののちょっとした紹介です。 github.com

背景

現在プロジェクトで使用している自動化ツールは、PhantomJSなのですが、

諸事情で他の自動化ツールを探している状態です。

こちらはそのあたりの、味見的な記事になります。

また、NodeJSのバージョンの高いものを利用するため、Ecmascriptのバージョンも新しく、

モダンな開発手法が可能ではないかという期待もあって、試してみました。

PhantomJSは独自実装のため、NodeJSができることができるとはならず、かつESの新しい機能はトランスパイルの必要がありました

Install

npm install puppeteer

でchroniumを含めてインストールしてくれます。

※↑Mac OS X

ただし、私のUbuntuでの動作には追加で以下の内容が必要でした。

sudo apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

curl -O https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

sudo dpkg -i google-chrome-stable_current_amd64.deb

サンプル（公式そのまま）

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

こちらは、公式ページからコピペしたスクリプトです。 これを、nodejsで動かせば、example.comを開いて、スクリーンショットを保存します。

ソースをご覧いただいてわかる通り、async,awaitというES7からのpromiseの糖衣構文を利用してかなり簡潔に記載できるようになっています。

※公式にも記載がある通り、上記のサンプルはNodeJSのv7.6.0以降が必要です。

実際の挙動

puppeteerのlauch時に、headlessをfalseにできたり、

キーボードの文字を打つスピードを調整できたりします。

  const browser = await puppeteer.launch({
    headless: false,
    slowMo: 50 // slow down by 50ms
  });

ページの生成とエラーハンドリング

    const page = await browser.newPage();

    page.on('error', err=> {
      console.log('error happen at the page: ', err);
    });

    page.on('pageerror', pageerr=> {
      console.log('pageerror occurred: ', pageerr);
    })

pageの表示

    await page.goto('http://exsample.com/', {
      timeout: 30000 //default 30s = 30000ms
    }); 

タイピング

    await page.type('input#textBox','typing...');

Wait

    await page.waitFor(5000);

文字列の内容の確認

    let h1 = await page.$('h1');
    let valueHandle1 = await h1.getProperty('innerHTML');
    
    assert.ok(await valueHandle1.jsonValue, 'TEST');

クリック

    await page.click('button.submit');

まとめ

○インストールが非常に簡単でドキュメントも豊富

○トランスパイルの必要なく、ES7の構文が利用できる

○NodeJSの機能が使えるため、Web画面の自動化を超えたような処理に応用が可能な手応えがある

○chroniumを使用するため、メモリ使用量は大きい

PhantomJSで結構苦労していた部分がすんなりできました。 また、書き方に統一感があり、かなり使いやすい印象でした。 自動テストはメモリ使用量は若干多めなのですが、今後自動テスト環境でも使って行きたいなと感じさせるものがありました。

今回はこの辺で。。

最後に

アスタミューゼでは現在、エンジニア・デザイナーを募集中です。 興味のある方はぜひ下記バナーからご応募ください。