Zeppelin E2E how-to guide

https://github.com/apache/zeppelin/pull/5072 ← Playwright 환경설정 및 왜 선택했는지 등의 내용은 PR 참조

1. Objective

Playwright를 사용하여 Zeppelin New UI e2e 테스트 코드 작성
LLM(MCP) 도구(Claude or Gemini + Playwright MCP 등) 를 활용하여 테스트 코드 자동 생성
- 자연어 기반 지시(NL → 코드) 규칙 정의
⇒ 궁극적으로 총 57개의 파일에 대해 OSSCA25 마감까지 커버리지 50% 달성

2. Prerequisite environment

# 적어도 Zeppelin 빌드 및 실행이 되어있어야 합니다.
./mvnw clean install -DskipTests
./mvnw clean package -DskipTests
./bin/zeppelin-daemon.sh start

# 프론트 환경설정 안되어있다면 진행
cd zeppelin-web-angular

nvm use
npm i

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

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

npm run e2e:fast 결과

2.1 Explanation of the Playwright script

명령어	설명	사용 목적
`npm run e2e`	기본적으로 Playwright E2E 테스트를 실행	전체 테스트 실행
`npm run e2e:fast`	`--project=chromium` 옵션으로 실행	빠른 실행을 위해 크로미움 브라우저만 테스트
`npm run e2e:ui`	Playwright Test UI 모드로 실행	테스트를 시각적으로 탐색/실행
`npm run e2e:headed`	`--headed` 옵션으로 실행	브라우저 UI가 열려 실제 동작을 눈으로 확인 가능
`npm run e2e:debug`	`--debug` 옵션으로 실행	디버깅 모드에서 테스트 (step-by-step 실행, pause 등)
`npm run e2e:report`	`playwright show-report` 실행	테스트 실행 결과 리포트 확인
`npm run e2e:ci`	CI 환경 변수(`CI=true`) 설정 후 테스트 실행	CI/CD 환경에서 테스트 실행
`npm run e2e:codegen`	`playwright codegen` 으로 코드 생성 도구 실행	로컬 페이지 동작을 녹화해 테스트 코드 자동 생성 / npm run start 선행되어야 함

만약 MCP가 별로라면 codegen 사용하시면 편하실 거에요. // codegen 사용시 프론트 로컬서버 실행되어야 함

→ 테스트가 어떻게 작성되어야 하는지는 generate-test-by-argument rule 참조

3. Strategy for Leveraging MCP

3.1 초간단 버전! **

claude, gemini, cursor, co-pilot 중 하나를 사용하고 Playwright MCP 설정이 전제되어야 함

시나리오에 대해 아래의 형태로 입력

→ 각 시나리오는 Jira ZEPPELIN-6331 서브 이슈들 댓글에 추가해두었습니다.

$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 방식으로 아래와 같이 명확하게 역할을 분리해서 나눠줘

/models/.ts // Page Object: DOM 요소(locators)와 기본 액션만 (클릭 , 입력, 네비게이션, 단순 상태확인) /models/.util.ts // Business Logic: 복잡한 워크플로우, 복합 검증 로직, 테스트 시나리오별 헬퍼 메서드 /tests/*.spec.ts // Test Scenarios: BDD 스타일 테스트 케이스, Page Object와 Util을 조합한 실제 테스트


### Page Object (*.ts) 에만 포함할 것:
* Locator 정의 (readonly locators)
* 기본 액션 (navigate, click, type, select 등)
* 단순 상태 확인 (isVisible, getText, getUrl 등)
* BasePage 상속

### Util (*.util.ts) 에만 포함할 것:
* 복합 검증 로직 (verify 메서드들)
* 워크플로우 조합 (여러 액션을 연결한 시나리오)
* 테스트별 헬퍼 메서드
* 복잡한 비즈니스 로직