この記事はエイチーム引越し侍 / エイチームコネクトの社員による、
Ateam Hikkoshi samurai Inc.× Ateam Connect Inc. Advent Calendar 2021 21日目の記事です。
本日は引越し侍Webエンジニアの@nao_70が担当します！

はじめに

長年システムを運用する中で、仕様が複雑になりすぎて、
人力だけのテストだけじゃカバーしきれない・・！
みたいな経験がある方は意外と多いのではないでしょうか。

弊社でも同じ悩みを抱えたシステムがあり、
近々Cypressを用いたE2Eテストを導入する予定です。
今回は、初めて触れる方向けに、簡単に環境構築からテスト実行までの手順を紹介していこうと思います！

Cypressとは

Cypressは、ブラウザでのテストが自動化できるテストフレームワークです
同様のフレームワークで有名なものとしてSeleniumがあります

導入手順

1. node.jsを準備

Cypressはnpmを使ってインストールするため、最初にnode.jsをインストールしておく必要があります。
今回、node.jsの導入については割愛させていただきます。

2. インストール

テストを実装したいディレクトリ配下で、以下コマンドを実行します。

npm install cypress

これだけでインストールは完了です。

3. 起動

インストールが完了したら、以下コマンドを実行してみてください。
CypressのIDEが起動してきます。

npx cypress open

IDEを見ると、specファイル毎にテストが並んでいます。
テストしたいファイルをクリックすると、テストが自動で実行されていきます。
いくつかサンプルテストが準備されているので、試してみてください。

ディレクトリ構造について

ここでディレクトリ構造について簡単に説明しておこうと思います。

Cypressをインストールしたディレクトリに「cypress」というディレクトリが作られているので確認してみてください。
🗂 cypress
└ 🗂 fixtures: テストで使用する静的データを管理
└ 🗂 integration: テストコードを管理
└ 🗂 plugins: プラグインを管理
└ 🗂 support: カスタムコマンドを管理
└ cypress.json: cypressの設定ファイル

4. テストコード実装

テストコードはcypress/integrationに配置していきます。
specファイルに以下のようにコードを書いていきます。

describe('大項目', () => {
  context('中項目', () => {
    it('小項目', () => {
      テスト処理を記述
    })
  })
})

cypressではコマンドが用意されているので、
よく使うものをいくつか紹介しようと思います。
これらのコマンドを使ってテストコードを実装していきます。

get() - DOMの検索
type() - DOMに対して入力
clear() - 入力をクリア
visit() - URLにアクセス
wait() - 次のコマンドに進む前に、数ミリ秒待つか。
click() - 要素をクリック
blur() - フォーカスされたDOM要素をぼかす
focus() - DOM要素にフォーカス
clear() - 入力またはテキストエリアの値をクリア
check() - チェックボックスまたはラジオをチェック
uncheck() - チェックボックスのチェックをはずす
select() - select内のoptionを選択

試しにGoogleで任意のキーワードを検索するテストを書いてみました。
参考として見ていただければと思います。

integration/hikkoshizamurai_search.spec.js

describe('Hikkoshizamurai Search', function() {
　　it('Visit Google', function() {
 　　// googleを開く
  cy.visit('https://www.google.co.jp')

  // 検索欄にキーワードを入力する
  cy.get('input[name="q"]')
  　　 .type('引越し侍')

  // Google 検索ボタンを押下する
  cy.contains('Google 検索')
  　　 .click()

  // titleが引越し侍であることを確認する
  cy.title().should('eq', '引越し侍 - Google 検索')

  // スクリーンショットを残す
  cy.screenshot();
　　})
})

5. 実行

実行方法には2パターンあります。

IDE上で実行

specファイルを保存すると、IDEに先ほど作成したテストが一覧に出てきます

ファイル名をクリックするとテストが実行されます

CLIで実行

以下のようにコマンドを実行することで同様にテストができます

$ npx cypress run -s cypress/integration/XXXXX.spec.js

以上で、大まかな一連の流れは完了です！

最後に

今回、ざっくりと導入の流れを書かせていただきましたが、いかがでしたでしょうか。
実際に書いてみると、ある程度、直感的に書くことができ、思ったよりも簡単に導入することができました。
システムテストで苦労している方は、ぜひこの機会にCypressの導入を検討してみてください！

明日

明日は @dia がStorybookについて書いてくれるようです！
お楽しみに！！