CI/CDにE2E テストを組み込む

Cypress のインストール

Amplify は E2E テスティングフレームワークであるCypressをサポートします。Amplify Console と統合することで簡単に E2E テストを CI/CD 環境に組み込むことができます。今回は、develop ブランチをデプロイするときに E2E テストを実行するよう設定してみましょう。

develop ブランチに切り替えて、プロジェクトにcypressをインストールします。

git checkout develop
npm install cypress@6.3.0 mochawesome@4.1.0 mocha start-server-and-test --save-dev

テストコードの記述

インストールが完了したら、テストを記述するフォルダとファイルを作成します。今回はcypress/integration/authenticator_spec.jsを作成し、ここにテストコードを記述していきます。

mkdir -p cypress/integration
touch cypress/integration/authenticator_spec.js
touch cypress.json

今回の E2E テストでは以下のフローが正しく機能するかのテストを記述していきます。

  1. トップページにアクセスし、ログイン画面を表示させる
  2. テスト用のユーザ ID/パスワードでログインさせる
  3. ログイン後の画面に「Global」というテキストが表示されていることを確認する

cypress/integration/authenticator_spec.jsに以下のようなコードを記述します。 (ユーザ ID、パスワードを置き換えてください。)

describe('Authenticator:', function() {
  beforeEach(function() {
      cy.visit('/');
  });
  describe('Sign In:', () => {
      it('allows a user to signin', () => {
          cy.get(selectors.usernameInput).type(
            '<** staging環境に存在するユーザID **>'
          );
          cy.get(selectors.signInPasswordInput).type(
            '<** staging環境に存在するユーザのパスワード **>'
          );
          cy.get(selectors.signInSignInButton).contains('Sign In').click();
          cy.wait(3000)
          cy.get(selectors.root).contains('Global');
      });
  });
});
export const selectors = {
  usernameInput: '[data-test="sign-in-username-input"]',
  signInPasswordInput: '[data-test="sign-in-password-input"]',
  signInSignInButton: '[data-test="sign-in-sign-in-button"]',
  root: '#root'
};

cypress.jsonに以下の設定を追加し、Cypressがテストを実行するためのサーバを指定します。

{
    "baseUrl": "http://localhost:3000",
    "includeShadowDom": true
}

Amplify Console に E2E の設定を追加

次に Amplify Console に E2E のテストを実行するよう設定を変更します。 Amplify Console の「ビルドの設定」> 「ビルド設定の追加」から「編集」ボタンを押下し、以下の設定で上書きます。 この yaml ファイルは Amplify Console のビルド設定を記述するものです。amplify.yml のうち、testから始まる以下の設定が cypress の設定です。

version: 0.1
backend:
  phases:
    build:
      commands:
        - "# Execute Amplify CLI with the helper script"
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: build
    files:
      - "**/*"
  cache:
    paths:
      - node_modules/**/*
test:
  artifacts:
    baseDirectory: cypress
    configFilePath: "**/mochawesome.json"
    files:
      - "**/*.png"
      - "**/*.mp4"
  phases:
    preTest:
      commands:
        - yarn install
        - yarn add mocha mochawesome mochawesome-merge mochawesome-report-generator
    test:
      commands:
        - npx start-test 'yarn start' 3000 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
    postTest:
      commands:
        - npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json

設定したビルド設定をダウンロードし、プロジェクトのトップディレクトリ配下に配置します。

設定が完了すると、デプロイフローに「test」の項目が追加されたことが確認できます。

プロジェクトのトップディレクトリにamplify.ymlを作成すると、マネジメントコンソールで保存した設定を上書くことが可能です。amplify.yml の記述方法の詳細についてはこちらのドキュメントをご覧ください。

develop ブランチに今回の設定を反映させてみましょう。

git add .
git commit -m "add cypress settings"
git push

Amplify Console の画面に戻ります。しばらくするとデプロイが完了します。「test」の項目をクリックし、E2E のテスト結果を確認してみましょう。

authenticator のテストが成功していることがわかります。「Download artifacts」をクリックすると、テストの様子を撮影した動画ファイルをダウンロードできます。

ファイルを解凍し、mp4 ファイルを再生してみましょう。想定した通りテストが実施されていることがわかります。