#はじめに
アウトプットが苦手な自分が練習の一環として記事を書いてみる。
第八回目です。
前回の投稿から約1か月経ってしまいました。
正直書くネタが浮かばなかったです。
最近、業務でCypressを触る機会があり記事のネタになりそうだったので、
今回はCypressの環境構築とテストの実行方法について書いていきます。
Cypressとは？
Cypressとは、WebのUIテストを自動化できるツールです。Javascriptでテスト用のスクリプトを書いて使用します。
ブラウザの自動テストは「Selenium」が有名のようですが、あちらはテストを書くこと以外にもスクレイピング等の用途で使うことができるようです。
Cypressはテストを書くことに特化しており、要素の表示を待ったりページ遷移の完了を待ったりといった機能が標準であります。
他にも「動作が軽い」「環境構築が楽」「CI連携が楽」といった特徴があります。
環境
- Windows 10 Pro 64ビット
- Git Bash (Cypressインストールに使用)
- node.js 10.17.0
インストール
※事前にnode.jsをインストールする必要があります。
テストを実行するプロジェクトのディレクトに移動し以下のコマンドを実行します。
$ npm install cypress --save-dev
3～5分程度でインストールが完了します。
Cypress起動
Cypressの本体はnode_modulesのbinファイルにあります。
以下のコマンドでそれをopenします。
$ ./node_modules/.bin/cypress open
コマンドを実行すると以下のようになります。
- Cypressの管理画面が表示される
-
プロジェクト/cypressフォルダが生成され、配下にサンプルのテストスクリプトが配置される ※初回起動時 -
プロジェクト/cypress.jsonが生成される ※初回起動時
管理画面にはcypress/integration配下にあるテストスクリプトの一覧が表示されます。
テスト実行
管理画面で実行したいスクリプトを押下するとブラウザが立ち上がり以下のようにテストが実行されます。
CLIで実行
CypressはGUI以外にもCLIから実行することができます。
以下のコマンドから実行することができます。
$ npx cypress run -s cypress/integration/*
CLIで実行するとheadlessモードで起動されるため、ブラウザが立ち上がらずに実行します。
その代わりにcypress/videos配下にエビデンスとしてテスト実行時の動画を録画してくれます。
フォルダの役割
最後にcypress配下に生成される各フォルダの役割についてまとめます。
integration
テストスクリプトを格納するフォルダです。
ここに配置したフォルダやファイルがCypressの管理画面に表示されます。
plugins
Develop環境やStaging環境など、環境変数を記載する際に使用します。
fixtures
テストで使用する共通パラメータを記載したファイルを格納します。
テストスクリプトでcy.fixture('ファイル名')と書くことでパラメータを取得できます。
screenshots
スクリーンショットした画像が格納されるフォルダです。
テストスクリプトでcy.screenshot()と書くことでキャプチャすることができます。
videos
CLIで実行した際に実行時の動画が格納されるフォルダです。
downloads
テストでダウンロードしたファイル等が格納されるフォルダです。
supports
カスタムコマンドが作成できるフォルダです。
cypress/support/commands.js内に記載することで使用できます。
まとめ
以上です。
Cypressはレイアウト系の目視確認や入力チェックの数が多い試験では使用することでヒューマンエラーを回避することができるため試験の工数が大幅に削減することができると思います。
また環境構築が楽でUIもわかりやすく入りやすいと思いますので、
一度Cypressを試してみてはいかがでしょうか。
参考になれば幸いです。
参考サイト