E2Eのテストツール Cypressの紹介
始めまして、システム事業部の福沢です。実務はだいたい2年目ですが、今回初めてさわったCypressについて書いていきたいと思います。
Cypressとは
タイトルにもある通り、CypressはE2E用のテストツールです。主にview側で動かす部分のテストが可能で、JavaScriptのjQueryの記法を用います。 おおざっぱにどんなテストができるかというと、ボタンを押下して正しく遷移できるか確認したり、入力フォームを入れてバリデーションが表示されるか確認したりできます。
Cypressの公式サイトはこちら。
Cypressのメリットデメリット
以下の内容を踏まえたうえで使ってみてください。
メリット
・環境構築が容易
はやければ10分程度で完了するため、すぐにコードに着手可能
・エラー箇所の特定が容易であること
GUI上ではどこで落ちるかすぐに確認可能
CUI上ではテストすべての録画が可能
同じくCUI上で落ちた個所のみスクリーンショットでキャプチャ
・waitを少なくできる
サーバーからの応答時間を考慮しなくてよい
・修正がはやい
ホットリロードによりリアルタイムにテストコードを修正可能
デメリット 公式サイトではトレードオフとしてまとめられています。
・対応言語がJavaScriptのみ ・複数のタブのテストができない
・一つのテストで画面をまたいでのテストができない ・認証系が必要なサイトのテストに不向き
・サードパーティサイトのスクリプトテストは不向き
Cypresの導入
インストールは非常に簡単です。ターミナルを開き、Cypressを作成したいディレクトリで以下のコマンドを打つだけです。
$ npm install cypress
仮にnpmコマンドが使えないのであれば、下記のようにnpmコマンドを使えるようにします。
windows
Node.jsをダウンロードしてインストールします。
linux
$ sudo yum install npm
Ubunto
$ sudo apt install npm
Cypresの起動
ターミナル上でCypressのあるディレクトリに移動し、以下のコマンドを打つとソフトを起動します。
$ npx cypress open
ソフトを立ち上げると、初期のサンプルテストが入っています。 こちらはCypressのトップページで様々なテストを行うことができます。
サンプルのテストコードを変更してみる
先ほど見た初期のサンプルコードはCypressディレクトリの下の階層、 integrationに入っています。
基本的にはjsのjqueryの書き方でテストを行えます。 以下は基本的なコマンドです。
要素取得
cy.get('#id名')
cy.get('.class名')
cy.get('親要素 取得要素')
入力系
cy.get('#id名').type('入力内容')
クリック系
cy.get('#id名').click()
テストの実行
ソフト上で、テストをしたいファイルを押下すると実行されます。
また、処理を軽くしたい場合や速度重視でテストしたい場合など、CUI上で実行したい場合はターミナル上で以下のコマンドで実行できます。
$ npx cypress run
最後に
以上、Cypressの紹介と簡単な導入方法までを紹介しました。 比較的新しいテストツールのため、コードを解説するサイトは少ないものの、 公式サイトが充実しています。 そのため、開発経験に富んでいる方であればすぐ使いこなせるようになるツールです。
自宅のPCでもすぐ試せるので、触ってみてはいかがでしょうか？
