Github Actions 및 Heroku Review 앱으로 Cypress 설정

저는 지난 주말 Heroku에서 호스팅되는 프로젝트에 대한 Cypress 테스트를 설정하는 데 보냈습니다. Github Actions와 함께 Heroku의 미리 보기 환경을 사용하여 단 몇 분 만에 PR에 대해 실행되도록 Cypress를 빠르게 설정했습니다. 설정하는 데 무엇이 필요한지 자세히 살펴보겠습니다.

Heroku 검토 앱 설정

먼저 Heroku에서 검토 앱을 활성화하고 싶습니다. 다행스럽게도 시작하기가 매우 쉽습니다. Heroku의 문서는 available here입니다.

가장 중요한 부분은 predictable review app URL을 선택하는 것입니다.
옵션 - 이렇게 하면 Cypress에서 Heroku 미리 보기 인스턴스에 연결하는 방법을 쉽게 알 수 있습니다. 나중에 Github 워크플로우에서 이것을 사용할 것입니다.

Github 작업 워크플로 설정

Github 작업 워크플로에서는
Github Action context 현재 PR 번호에 액세스하여 검토 앱 URL을 지정할 수 있습니다. 따라서 다음과 같이 검토 앱 URL을 지정할 수 있습니다.https://cy-heroku-review-pr-${{github.event.pull_request.number }}.herokuapp.com
이 예에서는 검토 앱 접두사로 cy-heroku-review를 선택했습니다. 이 가이드의 앞부분에서 선택한 예측 가능한 URL 패턴으로 바꿔야 합니다.

또한 wait-on npm package을 사용하여
Github 러너는 Cypress를 트리거하기 전에 Heroku에서 URL을 사용할 수 있을 때까지 기다립니다. 이렇게 하면 Cypress가 자체적으로 재시도하도록 하는 것보다(예: 더 긴 대기 시간을 원하는 경우) 검토 앱을 사용할 수 있을 때까지 기다리는 것을 더 잘 제어할 수 있습니다.

on:
  pull_request:
    branches: [main]
jobs:
  test-heroku:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - run: yarn install
      # Here we're waiting for the Heroku preview instance to boot up
      - name: Wait for Server
        run:
          npx wait-on https://cy-heroku-review-pr-${{
          github.event.pull_request.number }}.herokuapp.com
      # Here we're running the test, specifying the baseUrl via the CLI
      - name: Run E2E Tests
        run:
          yarn test --config baseUrl=https://cy-heroku-review-pr-${{
          github.event.pull_request.number }}.herokuapp.com
        # Adding the DeploySentinel debugger
        # So we can easily debug test failures in case anything goes wrong 😉
        env:
          CYPRESS_DEPLOYSENTINEL_KEY: ${{ secrets.CYPRESS_DEPLOYSENTINEL_KEY }}
          ELECTRON_EXTRA_LAUNCH_ARGS: '--remote-debugging-port=40500'

테스트를 실행하십시오!

검토 앱이 구성되고 Github 작업 워크플로가 설정되면 새 PR을 열고 새 워크플로가 시작되는 것을 확인하고 Heroku 미리보기 인스턴스에 대해 테스트를 실행할 수 있습니다!

확인해야 할 full demo repo available here이 있습니다.

생각/질문이 있으시면 언제든지 @[email protected]로 메시지를 보내주세요.