実践
Headless Chromeによるブラウザ操作の自動化
7

E2EテストをCI上で動かす方法を紹介します。これまでとは異なり、テストの実行環境がCI上となるので、いくつかの配慮が必要です。

森 大典
森 大典 | フロントエンド・エンジニア

画面数が多い場合など、目視による確認では限界があることがあります。そんなときは、JestとPuppeteerを利用したビジュアルリグレッションテストを適用することで、メンテナンスコストをかけずにテストすることができます。

森 大典
森 大典 | フロントエンド・エンジニア

テストの規模や複雑さが増すと、前回紹介したE2Eテストの手法から改善したくなる部分が出てきます。Jest Puppeteerというプリセットを利用して解決してみましょう。

森 大典
森 大典 | フロントエンド・エンジニア

テストツールであるJestを併用し、PuppeteerによるE2Eテストの導入方法を紹介します。まずは、各ページを巡回して実行時エラーが発生してないかを確認するテストの方法です。

森 大典
森 大典 | フロントエンド・エンジニア

非同期処理を考慮したUI操作と値の取得、それらを用いた具体的な実装例について紹介します。

森 大典
森 大典 | フロントエンド・エンジニア

Headless Chromeをより簡単に利用可能にするPuppeteerを紹介していきます。シンプルな記述でさまざまな処理を行えます。

森 大典
森 大典 | フロントエンド・エンジニア

ブラウザのGUIを表示しない状態でChromeを実行するHeadless Chromeの基本機能を解説します。プログラムからHeadless Chromeを起動し、リモートで実行状態を確認したり、プログラムからWebページを操作してみたりしましょう。

森 大典
森 大典 | フロントエンド・エンジニア