この記事でやること
Puppeteerの環境構築を行い、Headless-Chromeが動くのを確認するまで。
自己紹介
株式会社Creaithの上田です。
社員の曽宮が、フロントエンドテストツールはpuppeteerが最高などとって言ってたら
同僚のモトキが「seleniumでも同じことやってやる」と言い出したので。
社員の曽宮が記事を書き、私はそれを見守る事になりました。
えぇ 全力で見守るだけです。
もちろん対決なので負けたら、一蓮托生、私もそれに巻き込まれてゴニョゴニョゴニョ
いろいろ比較していきPuppeteerを活用できる様になれるとこまでを連載して行こうと思います。
比較対象：フロントエンド・テストツール比較 Selenium #01環境構築編
Puppeteerとは
「ぱぺってぃ~あ」はとにかく環境構築がメタクソに楽なのです
先日Google Chromeにヘッドレス機能が追加追加され、CLIでブラウザを操作できるよになりました。
それを使ってSPAのレンダー後の状態に対してテストできるんですが、環境構築が常軌を逸する程に楽ちんちんです。
- ChromeDevTools開発チームがメンテナンスしてるよ
- Chrome以外のブラウザはムリ
- ReduxのActionなんかも横取り出来ちゃう
- ドロ沼化しやすいE2Eテスト環境に向いてる...ハズ
SPAとの合性も良さげなのでデファクトになる可能性メタくそ高いですね
まずは環境構築
ローカルでpuppeteerが動く環境をつくっていきます。
公式ドキュメントを元にサクっと動くまで
前提条件
| 使用する技術 | バージョン番号 |
|---|---|
| macOS HighSierra | 10.13.3 |
| Homebrew | 1.5.3 |
| nodebrew | 0.9.8 |
| node | v8.9.4 |
| npm | 5.6.0 |
公式によると
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以上が必要で、async``awaitを使うには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テストで利用できる様にしたい所です。
18/03/29追記
続きを投稿しました。
フロントエンド・テストツール比較 Puppeteer #02テスト編