Cypressとは

概要

・テスト自動化ツールである。
・GUIから簡単にエレメントのパスを取得できる
・Webブラウザを使ってテストできる
・JavaScriptを使って書ける
・Seleniumを利用しない
・オープンソース
・無料(一部有料機能もあるが必要ない)

サポートしているブラウザ

・chrome
・FireFox
・Edge
・Electron
・Brave

　Cypressの特徴

コマンドを実行する度にスクリーンショットを保存してくれる。

撮ったスクショはGUIで確認可能。
何を実行したときにどうだったのか見返しやすい。
デバッカビリティーが高い。

自動待機

実行する前にコマンドやアサーションを自動的に待機してくれる。

動作の安定感

SeleniumやWebDriverを使わないため高速で安定。信頼できる。

スクショとビデオ録画

クロスブラウザテスト

ローカルまたはリモートシステムやクラウドサービスで実行可能

Cypressでできること

・E2Eテスト
・統合テスト
・単体テスト

この記事ではE2Eテストについてのみ扱う。

Cypressのセットアップ

前提条件

Node.js 10 or 12 または以降のバージョンをインストール済みであること

手順

1.Cypress用のフォルダを作る

名前は分かりやければなんでも良い。

2.VSコードでプロジェクトを開く

1で作ったフォルダをVSコードのプロジェクトとして開く。

3.プロジェクトをnpmで管理する

cdでプロジェクトファイルに潜って、

 npm init -y

　⇨ package.jsonが作成されていることを確認
　　package.jsonは依存性の管理に非常に役立つ

4.Cypressをインストールする

 　npm install cypress

→これで自動的に最新版をインストールをしてくれる。
　もし特定のバージョンをインストールしたいなら

 　npm install cypress@バージョン

とする。

5.Cypressのバージョン確認

 　npx cypress -v

リリースされているCypressのバージョンを確認したい場合にはこちら。
https://docs.cypress.io/guides/references/changelog

6.Cypressを開く

ターミナルで下記のコマンドを叩く

 npx cypress open

こんなGUIが開く

GUIにはサンプルテストファイルがあるので、例えばtodo.spec.jsをopen in IDEする。
すると、自動的にブラウザを開いてE2Eテストの自動化サンプルを見せてくれる。
これが高速でなかなか気持ちいい。

これでセットアップ完了。

こんな感じのフォルダ構成になっているはず。

フォルダ構成

Integration

もっとも軸となるフォルダ。
ここに.jsファイルを作って自動化コードを書いていく。

Fixture

アップロードやダウンロードするファイルなどをここに用意しておく。
また、ここにオブジェクトを格納しておくとデータを利用しやすい。

plugins

プラグインを追加するためのフォルダ。

support

commans.js = カスタムコマンドを作るために使う
index.js = 全てのテストが実行される前に読み込まれる。グローバルコンフィギュレーションを配置するために使う。

Cypress.json

コンフィギュレーションのために使う
ベースURLやデフォルト待機時間を設定する。

テストコードの書き方

ステップ1

Integrationフォルダ配下に.jsフォルダを作る

ステップ2.Cypressライブラリを呼び出す


/// <reference types="cypress" />

it('タイトル', () =>  {
   cy.visit('https://google.com')
   cy.get('.gLFy',{timeout: 6000}).type('Automation Step By Step{enter}')
})

Mochaの書き方 it内でテストケースのタイトルをつける
cy.でcypressのオブジェクトを呼び出す
引数の中に{enter}を入れるとエンターキーを叩く。

グローバルレベルでタイムアウトを設定するにはcypress.json。

{
"watchForFileChanges":false,
"defaultCommandTimeout": 5000
}

　サンプルコードの公式リファレンス

他にもサンプルコードはCypress.io(公式)にたくさんある。
こちらを参照。
https://docs.cypress.io/guides/core-concepts/introduction-to-cypress#Cypress-Can-Be-Simple-Sometimes