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 빌드 및 실행이 되어있어야 합니다.

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

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 설정이 전제되어야 함