CI 파이프라인 통합을 위한 BitBucket 병렬 Cypress 테스트 구성

BitBucket Pipeline을 CI 서버로 사용하십니까? Cypress에서 느린 E2E 테스트로 어려움을 겪고 있습니까? BitBucket Pipeline이 병렬 단계를 실행할 수 있다는 것을 알고 계셨습니까? 이를 사용하여 여러 병렬 단계에 걸쳐 브라우저 테스트를 배포하여 짧은 시간에 종단 간 Cypress 테스트를 실행할 수 있습니다.

테스트를 병렬로 실행하는 방법

워크로드를 분산하고 테스트를 더 빠르게 실행하기 위해 병렬 단계에 테스트를 분산하는 것은 생각보다 어려울 수 있습니다. 문제는 작업이 고르게 배포되도록 Cypress 테스트 파일을 병렬 작업으로 나누는 방법입니다. 하지만... 일을 고르게 분배하는 것이 실제로 원하는 것입니까?

가장 짧은 CI 빌드 시간을 얻으려면 사용 가능한 CI 리소스를 최대한 활용하려고 합니다. 시간 낭비를 피하고 싶습니다. 이는 병렬 단계가 비슷한 시간에 작업을 마치도록 하려는 것을 의미합니다. 이는 CI 시스템 활용에 병목 현상이 없음을 의미하기 때문입니다.

알 수 없고 예측할 수 없는 것이 많습니다. 이는 BitBucket Pipeline에서 테스트를 실행하는 데 걸리는 시간에 영향을 줄 수 있습니다. 다음과 같은 것들이 있습니다.

부팅 시간 - CI 도커 컨테이너를 로드하는 데 소요된 시간

캐시에서 npm/yarn 종속성 로드

Cypress 테스트 실행

테스트는 다른 브라우저에 대해 실행될 수 있으며 이는 테스트 실행 시간에 영향을 미칠 수 있습니다

.

때때로 테스트가 실패하고 실행 시간이 다를 수 있음

다른 경우에는 flaky tests randomly failing Cypress에서 테스트 재시도를 사용하여 실패한 테스트 사례를 자동으로 다시 실행할 수 있습니다. 이로 인해 테스트 파일이 더 오래 실행됩니다.

위의 모든 사항은 실행 시간에 대한 불확실성에 기여합니다. 비슷한 시간에 완료되는 단계를 보장하기 위해 병렬 단계에서 테스트 파일을 가장 잘 나누는 방법을 아는 것은 어렵습니다. 그러나 이에 대한 해결책이 있습니다. 런타임 중에 동적 테스트 스위트가 분할됩니다.

대기열 모드 - 동적 테스트 분할

테스트 작업을 BitBucket Pipeline 병렬 단계에 배포하려면 대기열 모드와 함께 Knapsack Pro을 사용할 수 있습니다. Knapsack Pro API 측에서 테스트 파일 목록이 있는 대기열을 생성하는 @knapsack-pro/cypress npm package을 사용할 수 있으며 모든 병렬 단계는 대기열에 연결하여 테스트 파일을 사용하고 실행할 수 있습니다. 이런 식으로 병렬 단계는 이전에 Knapsack Pro API에서 가져온 테스트 세트 실행을 마친 후에만 더 많은 테스트를 요청합니다. details of Queue Mode from the article 에 대해 알아볼 수 있습니다.

BitBucket 파이프라인 YML 구성

다음은 YML에서 BitBucket Pipeline 구성의 예입니다. 보시다시피 Knapsack Pro 을 통해 Cypress 테스트를 실행하는 3개의 병렬 단계가 있습니다. 더 많은 병렬 작업에서 테스트를 실행하려면 더 많은 단계를 추가하기만 하면 됩니다.

image: cypress/base:10
options:
  max-time: 30

# job definition for running E2E tests in parallel with KnapsackPro.com
e2e: &e2e
  name: Run E2E tests with @knapsack-pro/cypress
  caches:
    - node
    - cypress
  script:
    # run web application in the background
    - npm run start:ci &
    # env vars from https://support.atlassian.com/bitbucket-cloud/docs/variables-and-secrets/
    - export KNAPSACK_PRO_CI_NODE_BUILD_ID=$BITBUCKET_BUILD_NUMBER
    - export KNAPSACK_PRO_COMMIT_HASH=$BITBUCKET_COMMIT
    - export KNAPSACK_PRO_BRANCH=$BITBUCKET_BRANCH
    - export KNAPSACK_PRO_CI_NODE_TOTAL=$BITBUCKET_PARALLEL_STEP
    - export KNAPSACK_PRO_CI_NODE_INDEX=$BITBUCKET_PARALLEL_STEP_COUNT
    # https://github.com/KnapsackPro/knapsack-pro-cypress#configuration-steps
    - export KNAPSACK_PRO_FIXED_QUEUE_SPLIT=true
    - $(npm bin)/knapsack-pro-cypress
  artifacts:
    # store any generated images and videos as artifacts
    - cypress/screenshots/**
    - cypress/videos/**

pipelines:
  default:
  - step:
      name: Install dependencies
      caches:
        - npm
        - cypress
        - node
      script:
        - npm ci
  - parallel:
    # run N steps in parallel
    - step:
        <<: *e2e
    - step:
        <<: *e2e
    - step:
        <<: *e2e

definitions:
  caches:
    npm: $HOME/.npm
    cypress: $HOME/.cache/Cypress

병렬 단계에 대한 사용자 지정 도커 컨테이너가 있는 예를 찾고 있다면 this one 을 참조하십시오.
KNAPSACK_PRO_TEST_SUITE_TOKEN_CYPRESS 환경 변수에 API 토큰을 secure variable 으로 추가하는 것을 잊지 마십시오.

요약

BitBucket Pipeline은 스크립트를 병렬로 실행할 수 있는 CI 서버입니다. 병렬 단계를 사용하여 Knapsack Pro Cypress 테스트를 배포하여 시간을 절약하고 가능한 한 빨리 CI 빌드를 실행할 수 있습니다.