CI 통합
지속적 통합 환경에서 E2E 테스트를 실행합니다.
CI 통합은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
CI에서 E2E를 실행하는 이유
E2E 테스트는 모든 푸시나 풀 리퀘스트마다 자동으로 실행될 때 가장 큰 가치를 발휘합니다. 지속적 통합(CI)은 변경 사항이 병합되기 전에 회귀를 발견하므로, 로그인 흐름이 깨진 채 아무도 모르게 운영 환경에 배포되는 일을 막을 수 있습니다.
E2E 실행에 CI에 필요한 것
CI 작업은 종속 항목 설치, Playwright 브라우저 설치, Angular 앱 빌드 또는 제공, 그리고 테스트의 헤드리스 실행을 차례로 수행해야 합니다. CI 시스템에는 화면이 없으므로 테스트는 기본적으로 헤드리스 모드에서 실행됩니다.
CI에서 브라우저 설치하기
브라우저는 저장소에 커밋하지 않습니다. 운영 체제 종속 항목을 포함하여 Playwright 설치 프로그램으로 파이프라인에서 브라우저를 설치합니다.
npm ci
npx playwright install --with-depsPlaywright가 앱을 시작하도록 하기
webServer 설정은 테스트 전에 Playwright가 앱을 실행하고 이후에 종료하도록 지시합니다. CI에서는 항상 새 서버가 시작되도록 reuseExistingServer: false를 설정합니다.
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};GitHub Actions 워크플로
일반적인 워크플로는 코드를 체크아웃하고 Node를 설정한 다음 종속 항목과 브라우저를 설치하고 테스트 모음을 실행합니다.
# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright test헤드리스 및 CI 플래그
Playwright는 CI 환경 변수를 통해 CI를 자동으로 감지하고 동작을 조정합니다. 실패한 테스트를 재시도하고, test.only를 금지하며, 작업자 수를 신중하게 늘려 사용합니다. 재시도 횟수를 명시적으로 설정할 수도 있습니다.
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};HTML 보고서 게시하기
Playwright는 HTML 보고서를 생성합니다. 실행이 끝난 후에도 추적 기록과 스크린샷을 포함한 실패 내용을 확인할 수 있도록 CI 아티팩트로 업로드합니다.
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/실패 시 추적 기록 수집하기
첫 번째 재시도에서만 추적 기록을 저장하도록 설정합니다. 이렇게 하면 실행 속도를 유지하면서도 디버깅에 필요한 모든 실패 재현 정보를 얻을 수 있습니다.
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};속도를 위한 분할 실행
대규모 테스트 모음은 --shard를 사용하여 여러 병렬 시스템으로 나눌 수 있습니다. 각 CI 작업이 일부를 실행하므로 전체 실제 경과 시간이 줄어듭니다.
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3캐시로 CI 속도 높이기
설치가 빌드 시간을 대부분 차지하지 않도록 실행 사이에 node_modules와 Playwright 브라우저 바이너리를 캐시합니다. 대부분의 CI 제공업체는 잠금 파일을 기준으로 키를 설정하는 캐시 작업을 제공합니다.
올바르게 빌드 실패 처리하기
테스트 하나라도 실패하면 Playwright는 0이 아닌 종료 코드를 반환합니다. 그러면 CI가 작업을 실패로 표시하고 병합을 차단합니다. || true로 해당 종료 코드를 무시하지 마십시오. 그러면 깨진 테스트가 아무런 표시 없이 통과하게 됩니다.
빠른 확인
CI에서 브라우저를 설치하는 것은 무엇입니까?
복습
종속 항목과 브라우저(playwright install --with-deps)를 설치하고, webServer가 앱을 시작하도록 한 다음, CI 인식 재시도 기능을 사용해 헤드리스로 실행하여 모든 푸시에서 E2E를 실행합니다. HTML 보고서와 추적 기록을 아티팩트로 업로드하고, 속도를 위해 작업을 분할하며, 0이 아닌 종료 코드로 잘못된 병합을 차단합니다.
자주 묻는 질문
“CI 통합” 강의는 무료인가요?
네 — “CI 통합” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“CI 통합”에서 뭘 배우나요?
지속적 통합 환경에서 E2E 테스트를 실행합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“CI 통합” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.