Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

:metal:この記事でやること

Puppeteerの環境構築を行い、Headless-Chromeが動くのを確認するまで。

:metal:自己紹介

株式会社Creaithの上田です。
社員の曽宮が、フロントエンドテストツールはpuppeteerが最高などとって言ってたら
同僚のモトキが「seleniumでも同じことやってやる」と言い出したので。
社員の曽宮が記事を書き、私はそれを見守る事になりました。
えぇ 全力で見守るだけです。
もちろん対決なので負けたら、一蓮托生、私もそれに巻き込まれてゴニョゴニョゴニョ

いろいろ比較していきPuppeteerを活用できる様になれるとこまでを連載して行こうと思います。

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

Puppeteerとは

「ぱぺってぃ~あ」はとにかく環境構築がメタクソに楽なのです

先日Google Chromeにヘッドレス機能が追加追加され、CLIでブラウザを操作できるよになりました。

それを使ってSPAのレンダー後の状態に対してテストできるんですが、環境構築が常軌を逸する程に楽ちんちんです。

  1. ChromeDevTools開発チームがメンテナンスしてるよ
  2. Chrome以外のブラウザはムリ
  3. ReduxのActionなんかも横取り出来ちゃう
  4. ドロ沼化しやすいE2Eテスト環境に向いてる...ハズ

SPAとの合性も良さげなのでデファクトになる可能性メタくそ高いですね

:metal:まずは環境構築

ローカルで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以上が必要で、asyncawaitを使うにはv7.6.0以上が必要です。なのでNodeのバージョンはv7.6.0以上にしておきましょう。

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

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

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

:metal:puppeteerを実行する

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

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

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

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

:metal:テストを実行する

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

$ node script.js

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

:surfer:次回は...

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

18/03/29追記

続きを投稿しました。
フロントエンド・テストツール比較 Puppeteer #02テスト編

Creaithメンバー

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away