코드 검토 프로세스와 통합

코드 검토 프로세스 중에 Autify의 엔드투엔드 테스트를 실행하여 스테이징/프로덕션 환경에서와 마찬가지로 제안된 변경 사항을 검증할 수 있습니다. 이 문서에서는 이 통합의 이점과 그 방법에 대해 설명합니다.

코드 리뷰 프로세스 중에 Autify를 실행하는 이유는 무엇인가요?

코드 리뷰는 소프트웨어 릴리스 프로세스의 첫 번째 단계입니다. 한 사람이 코드 베이스에 몇 가지 변경 사항을 제안하면 다른 사람이 변경 사항이 유효한지, 예상대로 작동하는지, 불필요한 기능을 손상시키지 않는지 등을 검토합니다. 단위 테스트와 같이 코드 리뷰를 더 쉽고 안정적이며 폭넓은 관점에서 수행할 수 있는 자동화된 기술이 많이 있습니다. 단위 테스트는 소프트웨어의 여러 기능을 다룰 수 있지만, 실제 브라우저에서 로그인 작업과 같은 일종의 엔드투엔드 경험을 테스트하고 싶을 때도 있습니다. 지금까지는 이러한 엔드투엔드 테스트 시나리오를 코드로 구현하는 것이 쉬운 일이 아니었지만 Autify는 이에 대한 솔루션을 제공할 수 있습니다. Autify의 직관적인 레코더와 시나리오 에디터를 사용하면 5분 만에 엔드투엔드 테스트 시나리오를 생성할 수 있으며, CSS 클래스 등 대부분의 UI 변경 사항을 Autify가 해결하고 학습하기 때문에 시나리오의 유지 관리에 대해 걱정할 필요가 없습니다. 따라서 Autify는 제안된 코드 변경 사항이 프로덕션 환경에서 기록된 동일한 엔드투엔드 시나리오를 통과할 수 있는지 검증할 수 있으므로 검토자에게 더 많은 확신을 줄 수 있습니다.

코드 리뷰 프로세스 중에 Autify를 실행하는 방법은 무엇인가요?

Autify는 테스트 시나리오를 실행하기 위해 클라우드의 테스트 실행 엔진에서 액세스할 수 있는 엔드포인트, 즉 URL이 필요합니다. 따라서 예를 들어 GitHub에서 풀 리퀘스트마다 임시 엔드포인트를 설정하고 Autify에 기록된 URL(예: 프로덕션 URL)을 생성된 임시 URL로 대체하도록 지시해야 합니다.

이러한 임시 엔드포인트를 설정하는 방법은 인프라에 따라 다릅니다. 예를 들어, Vercel과 같은 일부 배포 공급자에는 미리 보기 기능이 있으며 모든 풀 리퀘스트에 대해 미리 보기 엔드포인트가 즉시 자동으로 만들어집니다. 또는, Infrastructure as a Code 솔루션을 사용하여 자체 배포 워크플로를 설정하고 풀 리퀘스트를 위한 임시 환경을 가동할 수 있습니다.

요약하면, 작업 종속성을 제어하는 워크플로 엔진과 변경 사항을 기반으로 빌드된 앱에 대한 임시 엔드포인트를 생성하는 메커니즘이 필요합니다. 아래 표를 참조하여 더 많은 인사이트를 얻으세요:

하지만 이미 그러한 워크플로우가 있는 경우, 쉽게 연결하여 임시 엔드포인트에 대해 Autify 테스트 시나리오를 실행할 수 있습니다. 간단히 말해, 단계는 다음과 같습니다:

1. 코드 리뷰가 생성/업데이트될 때 CI/CD 솔루션에서 임시 엔드포인트를 가져옵니다.
2. 임시 엔드포인트에 Autify 테스트 실행 2.
3. 코드 리뷰에 피드백 2.

다음 예제에서는 GitHub Actions와 Vercel을 사용하여 이를 시연해 보겠습니다.

예제 설정: GitHub 및 Vercel

이 예제에서는 소스 코드 리포지토리로 GitHub를 사용하고 임시 배포 환경으로 Vercel을 사용하지만 다른 솔루션을 사용해도 어느 정도 아이디어를 얻을 수 있습니다.

Vercel의 미리 보기 URL은 임시 엔드포인트입니다.

GitHub 리포지토리를 Vercel에 연결하면 모든 풀 리퀘스트에 대한 푸시마다 자동으로 미리 보기 배포를 실행하고 고유한 미리 보기 URL을 즉시 생성합니다. 이것은 위에서 설명한 임시 엔드포인트의 좋은 예이며, Vercel 봇은 GitHub 이슈(풀 리퀘스트) 댓글을 통해 미리 보기 URL을 사용자에게 알려줍니다. 자세한 내용은 Vercel의 문서를 참조하세요.

워크플로우 엔진으로 GitHub Actions 사용 가능

GitHub Actions는 코드 푸시 등 GitHub의 다양한 이벤트에 의해 트리거되는 워크플로로, 러너에서 미리 정의된 작업을 실행합니다. GitHub 이슈에 대한 코멘트가 생성/편집되는 등의 GitHub 이벤트가 발생하면 Vercel 봇이 풀 리퀘스트에 대한 코멘트를 작성할 때마다 GitHub Actions 워크플로우를 트리거할 수 있습니다(예: 미리 배포 완료), Autify 테스트 시작과 같은 임의의 작업을 실행하고 결과 URL을 동일한 풀 리퀘스트의 코멘트로 피드백하는 등의 작업을 실행할 수 있습니다.

풀 리퀘스트와 통합하기 위해 GitHub 작업을 설정하는 방법은 무엇인가요?

Vercel의 미리 보기 URL은 다른 작업 없이 생성되므로 위에서 알려드린 임시 엔드포인트를 설정하는 방법에 대해 걱정할 필요가 없습니다. 위의 1~3단계를 구현하기만 하면 됩니다. 다음은 Vercel에 배포하는 리포지토리에 대한 GitHub 액션의 설정 예시입니다.

리포지토리 아래 '.github/workflows/issue_comment.yml'에 아래 파일을 넣으세요:

on:
  issue_comment:
    types: [created, edited]

jobs:
  vercel_commented:
    runs-on: ubuntu-latest
    if: ${{ github.event.issue.pull_request && github.event.comment.user.login == 'vercel[bot]' }}
    steps:
      - name: Get preview URL
        id: get-url
        run: |
          body=$(cat <<EOS
          ${{ github.event.comment.body }}
          EOS
          )
          url=$(echo -e "$body" | grep -Eo 'https://[^\/]+\.vercel\.app') || true
          echo ::set-output name=result::"$url"

      - name: Run test on Autify NoCode Web
        id: run
        if: ${{ startsWith(steps.get-url.outputs.result, 'http') }}
        uses: autifyhq/actions-web-test-run@v2
        with:
          access-token: ${{ secrets.AUTIFY_WEB_ACCESS_TOKEN }}
          autify-test-url: https://app.autify.com/projects/00/scenarios/000
          url-replacements: YOUR_RECORDED_VERCEL_URL=${{ steps.get-url.outputs.result }}
        continue-on-error: true

      - name: Comment Autify test result URL on the pull request
        if: ${{ steps.run.conclusion == 'success' }}
        uses: marocchino/sticky-pull-request-comment@v2
        with:
          number: ${{ github.event.issue.number }}
          message: |
            Autify test was started. Check ${{ steps.run.outputs.result-url }}
            ```
            ${{ steps.run.outputs.log }}
            ```

      - name: Comment failed to start Autify test on the pull request
        if: ${{ steps.run.conclusion == 'failure' }}
        uses: marocchino/sticky-pull-request-comment@v2
        with:
          number: ${{ github.event.issue.number }}
          message: |
            Autify test was failed to start.
            ```
            ${{ steps.run.outputs.log }}
            ```

풀 리퀘스트를 생성하면 아래와 같이 프리뷰 배포가 완료되면 Vercel 봇이 풀 리퀘스트에 댓글을 달게 됩니다:

그러면 위에서 생성한 GitHub Actions 워크플로가 트리거되고, 지정한 Autify 테스트 시나리오가 시작되고 아래와 같이 Autify 테스트 결과 URL과 로그에 댓글을 달게 됩니다:

이제 리뷰어(물론 요청자는 물론)는 링크를 클릭하여 테스트 결과를 쉽게 확인할 수 있습니다!

결론

이 문서에서는 코드 리뷰 프로세스와 Autify 통합의 이점과 개념에 대해 설명하고, GitHub Actions를 사용하여 Vercel 프리뷰 URL에 대해 Autify 테스트를 실행하는 예제를 보여줍니다. 코드 리뷰 프로세스와 Autify 연동을 구현하는 데 도움이 되기를 바랍니다.