Cypressしか勝たん!~テスト担当者ファーストなE2Eテストツール~

担当業務のひとつにSeleniumの自動テストコードの保守があります。この仕事、全わたしのヘイトを集めています👎

  • サーバーからの応答時間がちょっと遅いだけでテストを実行しない。
  • 待ち時間をめたくそ延長させても、しばらく経ってテスト実行したらさらに待ち時間を追加しないと失敗する。
  • 要素が目の前にあるのに「見つかりませんでした〜(´>ω∂`)
  • 該当のソースコードを見つけたあと、切り分けて実行してみないと何が起きているか全くわからないため、原因の特定までに時間がかかる

時は2020年。こんなことでフラストレーションを溜める必要はありません。自動テストの安定稼働を目指します。

Seleniumは自動テストに向いていない?

そもそもSeleniumはブラウザの操作を自動化するツールです。スクレイピングが主な用途であり、自動テストに特化したツールではありません。

自動テストフレームワークのSelenideを入れたり、レポート出力パッケージをインストールするなどカスタマイズすれば便利に使うことも可能ですが、根本がブラウザ操作の自動化ツールである事実は変わりません。

Seleniumを使わない自動テストツール

近年、Seleniumに頼ることなく自動テストに特化したツールが増えてきました。

以下は代表例です。

この中でも特にわたしが推したいと思った、Cypressについて本記事で説明していきます。

Cypressとは

Cypressは、現代のウェブのために構築された次世代のフロントエンドテストツールです。最新のアプリケーションをテストする際に開発者やQAエンジニアが直面する主な問題点を解決します。

(引用元: https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell

自動テストに特化したテストツールの一つです。モダンなUIが特徴で、テストエンジニアのための便利な機能が豊富に揃っています。

Why the name Cypress? We believe that tests should always pass – in other words, should always be green. A cypress is an evergreen tree. So, Cypress!

(結局なにがヒノキなのかは理解できませんでした。)

Cypressのメリット

ネットワーク層を監視

ネットワークから返却されたステータスコードを参照して、次の命令の実行に移ります。コーダーはサーバーからの応答時間を考慮してテストコードを書く必要がありません。

テスト環境の構築が簡単

What-is-Cypress

Seleniumの場合
  • まずはSelenium本体のインストール→selenium-webdriver?webdriver.io?
  • フレームワークの選定 → Mocha?Jasmine?Karma?
  • Angularで作ったしProtractorを採用しようかな。
  • レポート出力はどのパッケージにしよう?
  • あの機能使いたいから、ライブラリを追加しなきゃ…

といった具合にテスト環境の構築完了までハードルがわりと高いです。わたしのようなテストツール初心者は特に。

Cypressの場合

npm i cypressですべてインストールできてしまいます。テスト担当者はテストコードの作成だけに集中できます。 (参照: End to End Testing Framework | Cypress Documentation

エラー箇所を動画で保存

エラー箇所と原因の特定が圧倒的に楽になります。

cypress-browser2

画像はnpm run cypress openでデバッグ中の様子です。ブラウザの右半分で実行中のテストを表示、左半分ではテストコードで命令した内容が実際にどうなったかを動画で確認できます。 clickなど該当する命令の行をホバーすれば、右半分でテスト中の様子が動画が再生されます。

httpメソッド(GETやPOST)の実行結果であるステータスコードも表示されますので、エラー発生原因の調査に非常に役立ちます。

コード保存ごとにテスト実行

Seleniumを使っているプロジェクトでは該当箇所以外をすべてコメントアウトしてから毎回npm run testして、デバッグしています。

ソースコードを保存するたびにCypressに内蔵されたテストランナーが自動的にデバッグ中のテストコードを実行してくれます。gulpを入れたプロジェクトのような感覚でテストコードの作成ができます。

さまざまなブラウザに対応

Cypress4.0からGoogle Chrome以外のブラウザのテストにも対応するようになりました。 (参照:Launching Browser | Cypress Documentation

Github ActionsからCI連携

cypressdashboard

テスト結果詳細をダッシュボードから確認可能です。 Github Actionsは有料ですが、Githubの無料アカウントで 2000分 / 月(約32時間)の無料枠があります。(参照: GitHub Actionsの支払いについて

Slackへの通知も可能

Slack Integration

テスト結果をSlackのテスト用チャンネルへ通知することもできます。ヘッドレスですべてのテストを実行、Slackでテスト完了が通知されたら好きなタイミングで結果を確認するだけという環境が実現できます。 (参照: Slack Integration | Cypress Documentagtion

テスト結果の確認

スクリーンショットと動画

cypress runで実行したテストは、テスト実行環境に「video」というフォルダが自動で作成され、mp4で保存されます。失敗した箇所はスクリーンショットも保存されます。

Cypress Dashboard

Cypress Dashboardとテスト環境を連携すれば、テストレポートをGUIで確認できます。毎月it()500個分までは無料アカウントでテストが実行できます。 (デバッグは含まず、cypress run --record指定して実行したものが課金対象。) Test Retries | Cypress Document

その他の形式

mocha-screenshot

お客さんにテスト結果としてhtmlやjson形式などのファイルを提出する可能性もあるかと思います。Cypressにmochaなどのパッケージをインストールすれば、任意の形式のレポートを用意できます。 Reporters | Cypress Documentation

トレードオフ

他のテストにはできて、Cypressだと実現が難しいものはデメリット...ではなくトレードオフとしてまとめられています。いくつか紹介します。 (参照:公式から紹介されているトレードオフ

複数タブ

複数のタブのテストは仕様としてサポートしていません。たとえばリンクを押すと別のタブが開くもの(<a href="hoge" target="_brank"></a>)のテストは少し工夫が必要です。 いくつものテストコード案が公式からレシピとして紹介されています。→ Recipes | Cypress Documentation

(参照: Trade-offs(Multiple-tabs) | Cypress Documentation

同テスト内での接続先はひとつに

同じテストの中で、https://apple.com へ接続した後にhttps://google.com に接続してテストすることは仕様上できません。 1番目のテストでhttps://apple.com 、2番目のテスト(別のit{ })でhttps://google.com のテストを用意してください。 (参照:Trade-offs(Same-origin) | Cypress Documentation

Cypress採用事例

Selenium系のテストツールからCypressへ移行したという企業もいくつか見かけました。以下の記事はProtractor(Angular公式で紹介されているSelenium系テストツール)からCypressに移行した事例です。

E2EテストをSelenium Webdriver からCypress.io に移行した話 - 一休.com Developers Blog

次世代e2eテストツールCypress | Development | Blog | Akari, Inc.

Angular + Cypress = Love | (Cypress公式)

まとめ

公式のドキュメントが非常に充実していて、コピペして自分の環境のURLやセレクターに書き換えれば動いてしまうものばかりでした。サーバーからの応答までの待ち時間によって待ち時間を変える職人技を発揮しなくていいですし、動画でエラー箇所を確認できるので実際にデバッグ作業時間が短縮されてありがたい機能でした。

とにかくテスト担当者思いのE2Eテストツールですし、今後のアップデートもそうなっていくことを期待しています。推ししか勝たん!!!