Amplify 앱에 엔드 투 엔드 Cypress 테스트 추가 - AWS Amplify 호스팅

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

Amplify 앱에 엔드 투 엔드 Cypress 테스트 추가

Amplify 앱의 테스트 단계에서 엔드 투 엔드(E2E) 테스트를 실행하여 코드를 프로덕션으로 푸시하기 전에 회귀를 포착할 수 있습니다. 테스트 단계는 빌드 사양 YAML에서 구성할 수 있습니다. 현재는 빌드 중에 Cypress 테스트 프레임워크만 실행할 수 있습니다.

튜토리얼: Cypress를 사용한 엔드 투 엔드 테스트 설정

Cypress는 브라우저에서 E2E 테스트를 실행할 수 있는 JavaScript 기반 테스트 프레임워크입니다. E2E 테스트를 설정하는 방법을 설명하는 튜토리얼은 풀스택 CI/CD 배포를 위해 Amplify를 통해 엔드 투 엔드 Cypress 테스트 실행하기 블로그 게시물을 참조하세요.

기존 Amplify 앱에 테스트 추가

Amplify 콘솔에서 앱의 빌드 설정을 업데이트하여 기존 앱에 Cypress 테스트를 추가할 수 있습니다. 빌드 사양 YAML에는 Amplify에서 빌드를 실행하는 데 사용할 빌드 명령 및 관련 설정 모음이 포함되어 있습니다. 이 test 단계를 사용하여 빌드 시 모든 테스트 명령을 실행할 수 있습니다. E2E 테스트의 경우 Amplify Hosting은 테스트용 UI 보고서를 생성할 수 있는 Cypress와의 긴밀한 통합을 제공합니다.

다음 목록에서는 테스트 설정 및 사용 방법에 대해 설명합니다.

테스트 전

Cypress 테스트를 실행하는 데 필요한 종속성을 설치합니다. Amplify Hosting은 mochawesome을 사용하여 보고서를 생성하고 테스트 결과를 확인하며 빌드 중에 로컬 호스트 서버를 설정하기 위해 대기합니다.

테스트

cypress 명령을 실행하여 mochawesome을 사용하는 테스트를 수행합니다.

테스트 후

출력 JSON에서 mochawesome 보고서가 생성됩니다. Yarn을 사용하는 경우 이 명령을 자동 모드에서 실행하여 mochawesome 보고서를 생성해야 한다는 점에 유의합니다. Yarn에는 다음 명령을 사용할 수 있습니다.

yarn run --silent mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
artifacts>baseDirectory

테스트가 실행되는 디렉터리입니다.

artifacts>configFilePath

생성된 테스트 보고서 데이터입니다.

artifacts>files

생성된 아티팩트(스크린샷 및 동영상)를 다운로드할 수 있습니다.

빌드 사양 amplify.yml 파일에서 발췌한 다음 예시는 앱에 Cypress 테스트를 추가하는 방법을 설명합니다.

test: phases: preTest: commands: - npm ci - npm install -g pm2 - npm install -g wait-on - npm install mocha mochawesome mochawesome-merge mochawesome-report-generator - pm2 start npm -- start - wait-on http://localhost:3000 test: commands: - '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 - pm2 kill artifacts: baseDirectory: cypress configFilePath: '**/mochawesome.json' files: - '**/*.png' - '**/*.mp4'

테스트 비활성화

테스트 구성을 amplify.yml 빌드 설정에 추가한 후에는 모든 브랜치의 모든 빌드에 대해 test 단계가 실행됩니다. 테스트 실행을 전역적으로 비활성화하거나 특정 브랜치에 대한 테스트만 실행하려는 경우, 빌드 설정을 수정하는 대신 USER_DISABLE_TESTS 환경 변수를 사용할 수 있습니다.

모든 브랜치에 대한 테스트를 전역적으로 비활성화하려면 모든 브랜치에 대해 값이 true인 USER_DISABLE_TESTS 환경 변수를 추가합니다. 다음 스크린샷은 모든 브랜치에 대해 테스트가 비활성화된 Amplify 콘솔의 환경 변수 섹션을 나타냅니다.

Amplify 콘솔의 환경 변수 섹션

특정 브랜치에 대한 테스트를 비활성화하려면 모든 브랜치에 대해 값이 false인 USER_DISABLE_TESTS 환경 변수를 추가한 다음, 비활성화하려는 각 브랜치에 대해 값이 true인 재정의를 추가합니다. 다음 스크린샷에서는 기본 브랜치에 테스트가 비활성화되고 다른 모든 브랜치에서는 활성화되어 있습니다.

Amplify 콘솔의 환경 변수 섹션

이 변수를 사용하여 테스트를 비활성화하면 빌드 중에 테스트 단계를 완전히 건너뜁니다. 테스트를 다시 활성화하려면 이 값을 false(으)로 설정하거나 환경 변수를 삭제합니다.