Amplify를 이용한 E2E테스트 (Cypress)

드디어 3, 4 개월만에 톰캣으로 서비스하던 프론트엔드 서비스 대부분을 Amplify로 전환했습니다.

그동안 테스트를 작성하면서 많은 고민을 했습니다...

 

제스트 기반으로 공통모듈을 테스트하고 있지만 배포과정에서 전체 테스트를 돌리는건 비효율적이라고 생각이 들어서 주요 기능에 대해서 E2E테스트를 작성해서 Amplify 배포 과정에서 테스트 되도록 하면 좋겠다는 생각이 들었습니다.

 

제가 운영하는 서비스에서 예약, 취소 관련 기능이 중요하여 E2E테스트를 작성하고 배포하기로 하였습니다 :)

우선 기존에 작성했던 예약관련 E2E테스트를 수정해서 배포하였고 나머지는 시간날때 마다 조금씩 추가 하려고 합니다.

 

테스트작성 보다는 세팅하는 부분이 까다로워서 세팅 부분을 공유 해보겠습니다~

우선 배포가 완료되면 아래처럼  테스트 결과를 확인 가능합니다!!

 

테스트 결과

 

우선 빌드 설정에서 테스트 관련해서 빌드설정을 수정해줘야 합니다.

기본설정은 https://docs.aws.amazon.com/amplify/latest/userguide/running-tests.html 에서 확인가능합니다.

저는 한글폰트 추가 및 cypress 실행시 사용할 baseUrl을 추가하였습니다!

설정파일은 콘솔에서 설정할 수도 있지만 다운받아서 빌드영역 root에 amplify.yml 파일을 위치 시키면 해당파일을 읽어서 배포가 이루어집니다. (설정파일이 콘솔 설정보다 우선순위를 가집니다)

 

* 테스트환경에서 한글이 깨지는 이슈가 있어서 한글폰트를 설치해줘야합니다. 안그러면 스냅샷에서 한글이 깨져 보입니다.

test:
      phases:
        preTest:
          commands:
            # korean font install
            - wget http://static.campaign.naver.com/0/hangeul/renew/download/NanumFont_TTF.zip 
            - unzip Nanum*.zip
            - mkdir -p /usr/share/fonts/nanumfont
            - mv *.ttf /usr/share/fonts/nanumfont
            - fc-cache -r
            # korean font
            - yarn add wait-on
            - yarn add pm2
            - yarn add mocha mochawesome mochawesome-merge mochawesome-report-generator
            - npx pm2 start npm -- start
            - 'npx wait-on http://localhost:3000'
        test:
          commands:
            #baseUrl 추가
            - 'npx cypress run --config baseUrl=http://localhost:3000 --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
            - npx pm2 kill
      artifacts:
        baseDirectory: cypress
        configFilePath: '**/mochawesome.json'
        files:
          - '**/*.png'
          - '**/*.mp4'

 

그리고 테스트 과정에서 외부 api 호출시 제대로 network에러로인해 제대로 테스트 되지 않을 수 있어서 해당부분을 적절히 처리해줘야합니다. 

cy.intercept나 cy.stub등을 이용

그러면 Download artifacts를 통해서 결과를 다운받아 볼 수 있습니다!