自社開発した Web アプリケーションのリグレッションテストを自動化するため、Selenium を利用してきましたが、諸事情により Cypress による自動テストへの以降にチャレンジすることにしました。本記事ではCypress の実行環境を Windows 10 へ構築する手順について執筆しています。

Cypress で何ができるのか

Cypress で何ができるのか？　Web UI オートメーションフレームワークのデファクトスタンダートである Selenium と比較した視点で次のメリット、デメリットがあります。

Cypress のメリット

・自動テストに特化したフレームワークである。
アサーション機能、レポート機能を内包しているため、別途用意する必要がありません。標準機能でも十分強力ですが、プラグインをインストールすることでさらに Cypress を自分好みにカスタマイズすることもできます。

・すぐに使える
自動テストに必要な機能が一通り備わっているため、インストールすればすぐに使えます。Selenium に比べて構築が簡単です。

・BDD である
Cypress はテストフレームは Mocha を使います。Mocha ではテスト仕様書を書く感覚で、テストコードを記述できるため、コーディング経験の少ないテスト技術者にも書きやすいようになっています。
とは書いたものの、テストコードのデバッグや複雑なテストコードの記述をするにはある程度のコーディングスキル要求されます。
今後ますますテスト自動化は加速するものと見られます。いつまでも Excel でテスト仕様書を書いて手動テストしているわけにはいきません。これからのテスト技術者にはテスト自動化技術は必須と要件と考えてよいでしょう。

・スクリーンショット、ビデオ録画が自動でされる
Cypress のテスト結果は自動的にスクリーションショット、ビデオ録画（CUI 実行時）されます。テスト実行のエビデンスを自動で残してくれるため、テスト結果確認を迅速、確実に行うことができます。

・Wait が自動で入る
要素が検出されるまで自動で Wait を入れてくれます（デフォルト 4 秒）。

・WebDriver が不要である
Seleniumi で書いたコードの実行には Web Driver が必要ですが、Cypress では不要です。

Cypress のデメリット

・JavaScript でしか書けない
JavaScritpt（もしくは、TypeSript）でテストコードを記述できます。Selenium のように各種開発言語（Java、C#、Python、Ruby など）に対応しているわけではないため、使い慣れた言語で記述することができません。JavaScritpt でのコーディングが要求されます。

Cypress の環境構築

ここでは、Windows 10 Pro(x64) に Cypress を構築する手順について記載します。JavaScript の開発環境として、筆者は Node.js(Nodist)、VSCode、Chrome があらかじめインストールされた環境を利用しています。

・Cypress のインストール
作業用のディレクトリーを作成、npm で Cypress をインストールします。
プロキシー環境で npm が失敗する場合は、システム環境変数にプロキシー設定してください。

> setx http_proxy "http://proxy:8080"
> setx https_proxy "http://proxy:8080"    # https にしないこと
> mkdir cypress_test
> cd cypress_test
> init -y
> npm install cypress --save-dev

・Cypress の実行
cypress open コマンドを実行すると、GUI モードで Cyrpress が起動します。
Integration フォルダーにあるテスコドードスクリプトを再生して実行結果を確認します。Integration フォルダーに新規 Spec ファイルを作成するとテスト仕様書を追加できます。

> npx cypress open