Versions Compared

Old Version 1

changes.mady.by.user YONGJAE LEE

Saved on

compared with

New Version 2

changes.mady.by.user YONGJAE LEE

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

https://uneven-stool-888.notion.site/Zeppelin-E2E-how-to-guide-2745effe862780938a75f44dba999013 **

1. Objective

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

...

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

Image RemovedImage Added

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:uiPlaywright Test UI 모드로 실행테스트를 시각적으로 탐색/실행
npm run e2e:headed--headed 옵션으로 실행브라우저 UI가 열려 실제 동작을 눈으로 확인 가능
npm run e2e:debug--debug 옵션으로 실행디버깅 모드에서 테스트 (step-by-step 실행, pause 등)
npm run e2e:reportplaywright show-report 실행테스트 실행 결과 리포트 확인
npm run e2e:ciCI 환경 변수(CI=true) 설정 후 테스트 실행CI/CD 환경에서 테스트 실행
npm run e2e:codegenplaywright codegen 으로 코드 생성 도구 실행로컬 페이지 동작을 녹화해 테스트 코드 자동 생성 / npm run start 선행되어야 함

...

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

...

npm install -g @anthropic-ai/claude-code

GamsGo Purchase and Cursor Code Connection Guide

Image Removed

Image Removed

Image Removed

GamsGo 브라우저 설치 및 해당 브라우저에서만 Claude 사용 가능한 상태

...

...

Image Removed

...

→ URL GamsGo 브라우저로 복사 붙여넣기
Playwright MCP 설치
 Code Block
# Playwright MCP 서버 설치
npm install -g @executeautomation/playwright-mcp-server

# Claude Code 연결(project // 전역 설정을 원하면 원하면 project 대신 global)
claude mcp add playwright -s project -- npx @executeautomation/playwright-mcp-server

# 설정 확인
claude
claude mcp list


Claude command ‘.md’ 파일 ./claude/commands 폴더에 추가
...
→ 완벽한게 아니라 업데이트 필요(의견 주시면 반영하겠습니다)
Claude commands 적용 확인
Image RemovedImage Added
Example
# Claude Code 실행
claude

# E2E 테스트 시나리오 분석
/e2e-recognize-testable-scenario

나는 src/app/share/about-zeppelin/about-zeppelin.component 이 컴포넌트가 사용되는 부분에 대해 E2E 테스트 시나리오를 작성하고 싶어

# E2E 테스트 시나리오 분석 > 결과

...
Gemini CLI commands 적용 확인
Image RemovedImage Added
Example - Claude example 참조
...