Angular Academy · 강의

E2E 테스트 개요

종단 간 테스트의 역할을 이해합니다.

E2E 테스트 개요은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

엔드 투 엔드 테스트란 무엇인가요

엔드 투 엔드(E2E) 테스트는 실제 사용자처럼 애플리케이션을 사용합니다. 실제 브라우저에서 앱을 실행하고, 페이지를 이동하며, 버튼을 클릭하고, 양식에 입력하고, 화면에 표시되는 내용을 검증합니다. 단일 단위만이 아니라 전체 스택이 함께 작동하는지 확인합니다.

테스트 피라미드

건전한 테스트 모음에는 빠른 단위 테스트가 많고, 더 적은 수의 통합 테스트와 느리지만 가치가 높은 소수의 E2E 테스트가 있습니다. E2E는 가장 위에 위치합니다. 테스트당 커버리지는 가장 높지만 실행하고 유지 관리하는 비용도 가장 큽니다.

단위: 독립적으로 테스트하는 함수/컴포넌트
통합: 함께 작동하는 여러 단위
E2E: 처음부터 끝까지 실행되는 앱

단위 테스트가 놓치는 문제를 E2E가 잡아내는 경우

E2E 테스트는 실제 구성 요소가 연결될 때만 보이는 문제를 찾아냅니다. 예를 들어 라우팅 버그, 잘못된 API 통합, 배포 후 누락된 DOM, 버튼을 가리는 CSS, 인증 리디렉션 반복 등이 있습니다. 모의 의존성을 사용하는 단위 테스트는 통과하더라도 실제 앱은 고장 나 있을 수 있습니다.

Angular와 E2E의 역사

이전 버전의 Angular는 E2E를 위해 Protractor를 제공했습니다. Protractor는 더 이상 사용되지 않도록 지정되었고 새 프로젝트에서 제거되었습니다. 현재 Angular CLI에서는 서드파티 E2E 실행기를 선택할 수 있으며, Playwright와 Cypress가 가장 많이 사용됩니다.

Playwright를 사용하는 이유

Playwright는 Microsoft에서 만든 현대적이고 빠른 E2E 프레임워크입니다. Chromium, Firefox, WebKit을 제어하고, 요소가 준비될 때까지 자동으로 기다리며, 새로운 브라우저 컨텍스트로 테스트를 격리하고, 뛰어난 디버깅 도구를 제공합니다. 이 과정에서는 Playwright를 사용합니다.

Angular에 Playwright 추가하기

Playwright 자체 설치 프로그램으로 Playwright의 기본 구조를 생성할 수 있습니다. 설치 프로그램은 playwright.config.ts와 예제 테스트 폴더를 만듭니다.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

E2E 테스트의 구조

E2E 테스트는 앱을 시작하고, 사용자 동작을 수행하며, 페이지를 검증합니다. 흐름은 다음과 같습니다. 준비(이동), 실행(상호작용), 검증(표시된 결과 확인).

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

E2E는 실제 서버를 대상으로 실행됩니다

E2E를 실행하려면 Angular 앱이 실제로 실행 중이어야 합니다. 일반적으로 설정에서 ng serve(또는 프로덕션 빌드 제공)를 시작하고, baseURL과 webServer 항목을 통해 테스트가 해당 URL을 사용하도록 합니다.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

E2E 테스트 모음은 작고 중요한 항목으로 유지하기

E2E 테스트는 느리고 불안정할 수 있으므로 로그인, 결제, 주요 정상 흐름과 같은 중요한 사용자 여정만 다룹니다. 자세한 경계 사례는 더 빠르고 안정적으로 실행되는 단위 테스트와 통합 테스트로 옮깁니다.

불안정성과 결정성

가장 큰 E2E 문제는 간헐적으로 실패하는 테스트인 불안정성입니다. 고정된 sleep 지연을 피하고 Playwright의 자동 대기를 사용하는 검증에 의존하세요. 각 실행이 알려진 상태에서 시작하도록 테스트 데이터를 제어하세요.

E2E와 컴포넌트 테스트 비교

Angular 컴포넌트 테스트(TestBed)는 인공적인 환경에서 컴포넌트를 확인합니다. E2E는 실제 브라우저에서 배포된 앱을 확인합니다. 두 테스트는 서로 보완적입니다. 빠른 로직/DOM 확인에는 TestBed를 사용하고, 제품 전체가 작동한다는 확신을 얻으려면 E2E를 사용합니다.

빠른 확인

E2E와 단위 테스트를 구분하는 것은 무엇인가요?

복습

E2E 테스트는 실제 브라우저에서 전체 앱을 실행하여 단위 테스트가 놓치는 통합 및 라우팅 버그를 찾아냅니다. 테스트 피라미드의 꼭대기에 위치하며, 수는 적지만 느리고 가치가 높습니다. 이제 Angular 프로젝트에서는 서버를 시작하고 중요한 사용자 여정을 실행하는 Playwright와 같은 실행기를 사용합니다.

자주 묻는 질문

“E2E 테스트 개요” 강의는 무료인가요?

네 — “E2E 테스트 개요” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“E2E 테스트 개요”에서 뭘 배우나요?

종단 간 테스트의 역할을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“E2E 테스트 개요” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기