AWS CodeBuildでCypressのE2Eテストをする

まえがき

CodeBuildでCypressのE2Eを実行する。 せっかくなので前回使ったNext.jsのアプリにCypressをいれたいと思います

• Next.jsのスタンドアロンモードでビルドしたイメージを Cloud Run へデプロイする

Cypressのプロジェクト作成

mkdir e2e
cd e2e
npm init --y
npm install cypress

一旦起動します。

npx cypress open

設定とテストコードを雛形をつくります。

CodeBuildの設定ファイル: buildspec.yml を作成

version: 0.2

batch:
  fast-fail: false
  build-list:
    - identifier: cypress-e2e-tests
      env:
        variables:
          IMAGE: public.ecr.aws/cypress-io/cypress/browsers:node14.19.0-chrome100-ff99-edge

phases:
  install:
    runtime-versions:
      nodejs: latest
  pre_build:
    commands:
      - cd e2e
      - npm install
  build:
    commands:
      - npx cypress run

Cypressを動かすイメージは以下から選びます。

public.ecr.aws/cypress-io/cypress/browsers:node14.19.0-chrome100-ff99-edge を選びました。

• ECR Public Gallery - cypress/browsers
• AWS CodeBuild | Cypress Documentation

コンソールでCodeBuildのプロジェクトを作成