はじめに

こんにちは！エンジニアポータルの開発を行っているアジャイル開発部の笹子です。 あっという間に12月ですね。12月は師走って言う通り、1月にエンジニアポータルの社外リリースが決まりバタバタな毎日です。みなさんはどのようにお過ごしでしょうか。

最近、エンジニアポータルにE2Eテストを行うため、テスト自動化ツールのCypressを導入しました。 本記事では、E2Eテスト初心者の私が、テスト自動化ツールであるCypressの導入から基本的な使い方までをご紹介していきます。

対象:

• これからE2Eテストを導入する方
• E2Eテストに興味がある方
• Cypressに興味がある方

E2Eテストしてますか？

これまで在籍していたPJではE2Eテストは、QAチームに任せっきりで私は、触れたことがありませんでした。エンジニアポータルは４人の開発メンバーで実装しているためE2Eテストがありませんでした。 そこで、開発メンバー間で、次の2点が会話にでてきました。

• 新規に追加した機能が、既存の機能を破壊していないか。
• 新規に追加した機能がしっかり動作しているか。

そこで、この問題を解決するため、開発メンバーの中でE2Eテストをする必要があると話し合い、テスト自動化ツールのCypressを導入しました。

E2Eテストとは

E2Eテストとは、「End To Endテスト」の略であり、ユーザが利用するのと同じようにシステム全体をテストします。E2Eテストは、テスト仕様書をもとに人手でテストを行うことが多く、労力がとてもかかります。実際に、前のPJではQAチームが毎回手動でテストしていました。そこで、テスト自動化ツールであるCypressを用いることで、コスト削減＆品質向上を狙いました。

E2E (End to End) テストとは、システム全体が正しく動作することを確認するものです。具体的には「利用者による画面操作（Web ブラウザの操作）により、想定通りの動作となっていることを確認する」ことを指します。

参考: https://wagby.com/manual9/wtf.html

Cypressとは

CypressとはWebテスト用に構築されたJava Scriptライブラリです。

特徴として、以下があります。

• 単体テストからE2Eテストまで広く使える
• テスト構築、実行、バグ検知まで全て行える
• コマンドごとに画面のスナップショットを見返せる
• テスト一連の様子をビデオとして保存できる
• 各種CIとの連携が可能である

参考: https://future-architect.github.io/articles/20210428a/

インストール

早速Cypressをインストールしてみましょう。

$ npm install --save-dev cypress

これだけでcypressがインストールされます。簡単！！ Visual Studio Codeで作業する場合は、下記のリンク先にあるプラグインを入れておくとも便利になります。 https://docs.cypress.io/guides/tooling/IDE-integration#Visual-Studio-Code

インストールが成功するとcypressのディレクトリができてます。 cypressのディレクトの中身はこちら↓

fixtures/ plugins/ videos/ integration/ support

テストを書く

Cypressは、integrationフォルダにtestファイルのテストを記述していきます。 Cypressをインストールした際にintegrationフォルダにたくさんのsampleコードがあるので、サンプルを試しながら書くことができます。 下記は、エンジニアポータルのaboutページの実際のコードです。

describe('aboutページのテスト', () => {

  //// 一番最初に一回限り実施
  before(function () {
    // 必要な処理を追加
  })

  //// テスト毎に開始する前に実施
  beforeEach(() => {
    cy.visit('http://localhost:3000/about');
  })

  //// 初期表示の確認
  it('初期表示の確認', () => {
    // URLの確認
    cy.url().should('include', '/about')
    // 画面タイトルの確認
    cy.contains('About')
    // サブタイトルの確認
    cy.contains('「KDDI Engineer Portal」はKDDIのソフトウェアエンジニアに関する情報を、 オープンに公開・共有していくためのサイトです。')
  })
})

テストを実行する

テストを書き終えたら実際にテストしてみましょう。 ローカル環境でテストを実行するので、　一旦ローカル環境でエンジニアポータルを起動させておきます。 そのあと、下記のコマンドを実行します。

$　npx cypress open 

すると、Cypressの管理画面が開きます。

管理画面には記述されたテストコードが並んでいるので、実行したいテストをクリックします。 試しに、aboutフォルダの

画面右側で、Cypressが実際にどのようなWeb上操作を行っているかが確認できます。 また、画面左側では、記述したテストの進行状況やチェック項目の可否が表示されています。 失敗したテストがあれば、該当箇所をアラートで教えてくれます。 ビジュアルでテストが動いているのが確認できるので、楽しいですね！

エンジニアポータルでは、毎回、管理画面で操作するのは大変なので、コマンドで実行できるようにしています。今後はCI/CDツールとの連携を実装していきたいと思います。

おわりに

Cypressを用いたE2Eテストをエンジニアポータルに導入から基本的な使い方までを紹介いたしました。

労力がとてもかかかるE2Eテストを、自動化することでコストの削減に繋がり、品質の向上にもつなげることができるようになりました。Cypressには、テストの様子を動画で残したり、スクリーンショットを使ったテストもあったりと、まだまだ機能がたくさんあります。今後も、他の機能も取り込んでE2Eテストにチャレンジしていきたいと思います。

それでは！