こんにちは。サーバーサイドエンジニアの@akane_256です。
今日は、Headless Chromeを使ったブラウザテストの自動化（入門）について書きたいと思います。
目次
- Headless Chromeとは？
- 興味を持った背景
- 今回やったこと
- 実際のソースコード
- まとめ
Headless Chromeとは？
- Chrome59（2017/6月頃）から搭載された機能
- ChromeをGUIなしでコマンドラインから実行できる
- DOMのノードを取得したり、画面キャプチャを撮ったりできる
- ツールと組み合わせて自動テストに使ったりする
ブラウザを開いて、特定のページを開き、自分で目視確認しなくても、
あらかじめ作ったプログラムをコマンドから実行をすれば
自動でキャプチャをとったり指定の要素を取得したりすることができます。
興味を持った背景
私は普段 Ringraph という結婚指輪・婚約指輪の口コミサイトの開発をしています。
サイトは毎週のようにリリースがあり、日々改善をしています。
リリースをする際にテストを実施していますが、
- ページがきちんと表示されていて
- 出るべき要素が出ていること
- ユーザーログイン・口コミの投稿がきちんとできること
などなど、確認することはたくさんあり、それを毎回確認するのはとても大変です。
テストの負担を減らし、エンジニアの心の負担を少しでも減らしたいので（笑）、
少しずつ自動化できないかな、と思って調べました。
今回やったこと
今回は入門編ということで、とてもシンプルですが、
Headless Chromeを使って複数ページのtitleのテキストを取得するプログラムを作成しました。
これだけでも、応用すればtitleやdescription、ページの要素の中身の確認等を自動できるので、実際に運用できたら便利です。
実際のソースコード
今回は、Puppeteer（パペティアー）というライブラリを使って開発をしました。
Puppeteer（パペティアー）とは、Googleが開発・公開しているHeadless Chromeを操作するためのNode.jsのライブラリです。
ドキュメントもわかりやすく、使いやすいです。
JSなのでフロントエンジニアさんは使いやすいのではないでしょうか。
しかもChromeを開発しているGoogleの公式ライブラリなので、とても安心感があります。最近も開発が盛んに行われているようです。
https://github.com/GoogleChrome/puppeteer
Puppeteerを利用するには、Node.js v6.4.0以上と、
Node.jsのパッケージ管理をするyarnもしくはnpmが必要です。
ない場合はインストールが必要です。
今回は下記のバージョンで試しました。
早速、試してみます。
まずは適当にディレクトリを作成・移動します。
ディレクトリ内でyarnのコマンドを実行します。
yarn addを実行したあとは、package.jsonというパッケージを管理するための管理ファイルが作成されるのと、
node_modulesディレクトリ配下に、puppeteerと依存モジュール群がインストールされます。
次に、プログラムを書くファイルを作成し、中身を記述していきます。
中身のイメージ。公式のGitHubにもサンプルコードが載っています。
ファイルが作成できたら、最後に実行します。
うまくいくと、プログラムで指定したWebサイトのタイトルタグがconsoleに表示されます。
インストールからファイル作成・実行まで、シンプルで、結構簡単にできました。
まとめ
- 他に二つくらい試しましたがPuppeteerが一番簡単そうですぐに動きました。 （Lighthouseと、あともう一つくらい試しました。）
- テストケースを書けば実際に運用できそうで、使い方もシンプルです。
- PuppeteerはAPIのドキュメントもしっかり書いてありブラウザテスト入門者にもわかりやすいです。
- 今後は、JSが絡んだ操作の動作確認をしたいです。
読んでくださり、ありがとうございました。
Wedding Parkでは一緒に技術のウエディングパークを創っていくエンジニアを募集しています。
興味のある方はぜひ一度気軽にオフィスに遊びにきてください。