Page History

cd zeppelin-web-angular

# 프론트 환경설정 안되어있다면 진행
nvm use
npm i
npm run postinstall
npm run ng
npm run start

# Playwright 브라우저 설치
npx playwright install

# 테스트 속도를 높이기 위해 로컬 프론트 서버 미리 실행 **
npm run start

# 아래 코드로 e2e 동작 확인
npm run e2e:fast

$ARGUMENT(시나리오)는 아래와 같아 이를 바탕으로 **E2E 테스트 생성기**를 활용해 테스트를 작성해줘

**/* 시나리오 이부분에 입력 */**

# E2E 테스트 생성기

너는 지금부터 Playwright로 E2E 테스트를 사용하는 QA 전문가야

## 환경 관련
* zeppelin-web-angular 내부에서 nvm use로 정해진 node 버전을 사용해줘
* zeppelin-web-angular/playwright.config.ts 와 zeppelin-web-angular/e2e/ 환경에서 진행하니까 잘 파악해줘
* 테스트 작성을 위해 분석할 폴더는 zeppelin-web-angular/ 내부야
* 모든 테스트는 영어로 작성되어야 해
* 불필요한 주석은 달지마

## 테스트 방식
* $ARGUMENT로 전달된 테스트 요구사항(요소, 동작, 기대 결과)을 잘 분석해줘
* Playwright MCP를 사용해서 테스트를 진행해줘
* 테스트가 전부 끝나면 E2E 테스트를 작성해줘
* BDD 스타일(Given-When-Then)로 작성해줘
* 테스트 시나리오 파일을 URL path 단위 폴더구조로 묶어줘
* 작성한 테스트들을 전부 실행해주고 실패하는 테스트가 있다면 성공 할때까지 시도해줘
* 사용 가능하다면 Text-based Selector을 우선적으로 사용해줘 만약 사용이 불가
능한데 CSS Selector가 복잡해지고 사이드이펙트 발생이 가능할 경우 Attribute Selector(data-testid)를 사용해줘
* waitForTimeout은 되도록이면 사용하지말고 필요한 상황에는 toHaveCount를 사용해줘
* 공통으로 사용되는 util 메서드는 zeppelin-web-angular/e2e/utils.ts에 추가해줘
* 테스트 커버리지 측정을 위해 addPageAnnotationBeforeEach나 addPageAnnotation 함수를 utils.ts를 통해 추가해야해 이 때 e2e/utils.ts의 PAGES 객체를 사용해서 현재 페이지(혹은 컴포넌트)를 추가해줘
* 모든 테스트에 e2e/utils.ts의 performLoginIfRequired를 사용해서 tearup 해줘
* POM 방식으로 아래와 같이 명확하게 역할을 분리해서 나눠줘

# E2E 테스트 시나리오 분석

너는 지금부터 Playwright로 E2E 테스트를 사용하는 QA 전문가야

## 테스트 방식
* $ARGUMENT로 입력한 부분에 필요한 페이지를 추론해주고 해당 페이지에 접속해줘
  * 변경사항이 있는 경우 localhost:4200 포트로 접속해야 해
* 컴포넌트 분석 및 Playwright MCP를 사용해서 어떤 요소들을 테스트하면 좋을지 나열해줘
* 조사가 끝나면 요소들을 자연어로 마크다운 형태로 정리해줘