フロントエンド・テストツール比較 Puppeteer #01環境構築編

この記事でやること

先日Google Chromeにヘッドレス機能が追加追加され、CLIでブラウザを操作できるよになりました。
フロントエンドテストツール・「Puppeteer」を活用できる様になれるとこまでを連載して行こうと思います。

自己紹介

初めましてCreaithで下働き中の上田です
テストツールなに使っていいのかサッパリなのでがんばります

まずは環境構築

ローカルでpuppeteerが動く環境をつくっていきます。
公式ドキュメントを元にサクっと動くまで

前提条件

公式によると

Usage
Caution: Puppeteer requires at least Node v6.4.0, but the examples below use async/await which is only supported in Node v7.6.0 or greater.

と、Nodeのバージョンはv6.4.0以上が必要で、asyncawaitを使うにはv7.6.0以上が必要です。なのでNodeのバージョンはv7.6.0以上にしておきましょう。

作業ディレクトリにてpuppeteerをインストール

$ mkdir puppeteer && cd puppeteer
$ npm i --save puppeteer

これだけでローカルで動かす準備が既に整いました。簡単ですね！

puppeteerを実行する

簡単なテストをしてみます。
https://example.comにアクセスし、スクリーンショットを撮るだけのテストをしてみましょう。

テスト用のファイルを作成する

テスト用のファイルscript.jsを作成し、以下のように編集する。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  browser.close();
})();

テストを実行する

script.jsにテストコードを記述したら、コマンドを叩きテストを実行する

$ node script.js

スクリーンショットはpuppeteer/example.pngという名前で保存されている。

次回は...

まだ何やるかまだ決めてませんが
本来ならここからシナリオテストを作製して
結果の表示まで自動化したり
CIテストで利用できる様にしたい所です。

Creaithメンバー

この記事の著者：上田、曽宮
その他メンバー：志村、モトキ