AWS Amplify E2Eテスト

AWS

E2Eテストとは

End to Endテストのこと

テストをどのように実行するのか

Amplify Consoleと Cypress の結合により、E2EテストをCI/CDに組み込むことができる。

Cypress とは、AmplifyがサポートしているE2Eテストフレームワークのこと。

つまり、あるブランチをデプロイするタイミングで、E2E2テストを実行することができる。

Amplify Consoleとは

 SPA(シングルページアプリケーション)や静的サイトのホスティング、CI/CD の運用を自動化するマネージドサービスのこと。

 GitHub のようなソースリポジトリと連携し、CI/CD の仕組みを数クリックで構築することができ

る。

Amplify ConsoleにE2Eの設定を追加する

 Amplify Consoleで

「ビルドの設定」> 「ビルド設定の追加」から「編集」ボタンを押下

yaml ファイルに、以下のビルド設定を記述する。

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」の項目が追加される。

これで、デプロイ時にテストが自動実行されるようになった。

「Download artifacts」をクリックすると、テストの様子を撮影した動画ファイルをダウンロードできる。

コメント

タイトルとURLをコピーしました