Page History

원본 가이드: https://uneven-stool-888.notion.site/Zeppelin-E2E-how-to-guide-2745effe862780938a75f44dba999013

---

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

...

→ 적어도 Zeppelin 빌드 및 실행이 되어있어야 합니다.

Code Block

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: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 사용시 프론트 로컬서버 실행되어야 함

...

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

Code Block

$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 메서드들)
* 워크플로우 조합 (여러 액션을 연결한 시나리오)
* 테스트별 헬퍼 메서드
* 복잡한 비즈니스 로직


3.2 Claude(유료 ← 무료 사용을 원할 경우 2.2 Gemini CLI 사용)

Claude Code 설치

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

GamsGo Purchase and Cursor Code Connection Guide
Image Removed
Image Removed
Image Removed
GamsGo 브라우저 설치 및 해당 브라우저에서만 Claude 사용 가능한 상태
```
# Claude 실행
claude

# Claude 로그인 요청
/login
```
Image Removed
Image Removed
→ URL GamsGo 브라우저로 복사 붙여넣기

Playwright MCP 설치

...

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/e2e-recognize-testable-scenario.md

Code Block

# E2E 테스트 시나리오 분석

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

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

...

~/.claude/commands/e2e-generate-test-by-argument.md

Code Block

# 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 메서드들)
* 워크플로우 조합 (여러 액션을 연결한 시나리오)
* 테스트별 헬퍼 메서드
* 복잡한 비즈니스 로직

...

→ 완벽한게 아니라 업데이트 필요(의견 주시면 반영하겠습니다)

Claude commands 적용 확인

Image RemovedImage Added

Example

Code Block

# Claude Code 실행
claude

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

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

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

...

E2E 테스트 시나리오

...



모달 표시 테스트

...



시나리오: About Zeppelin 모달이 정상적으로 열리는지 확인

...



메인 페이지 접속

...


로그인 완료 대기

...


우상단 사용자명 드롭다운 클릭

...


"About Zeppelin" 메뉴 항목 클릭

...


모달이 표시되는지 확인

...


모달 제목이 "About Zeppelin"인지 확인

...


컴포넌트 요소 검증 테스트

...



시나리오: 모달 내 모든 요소가 올바르게 표시되는지 확인

...



About 모달 열기

...


Apache Zeppelin 로고 이미지 존재 확인

...


"Apache Zeppelin" 제목 텍스트 확인

...


"Version" 라벨 존재 확인

...


버전 번호가 표시되는지 확인 (빈 값이 아닌지)

...


"Get involved!" 링크 존재 확인

...


라이선스 링크 존재 확인

...


외부 링크 동작 테스트

...



시나리오: 외부 링크가 올바른 URL로 연결되는지 확인

...



About 모달 열기

...


"Get involved!" 링크의 href가 "http://zeppelin.apache.org/"인지 확인

...


라이선스 링크의 href가 "http://www.apache.org/licenses/LICENSE-2.0"인지 확인

...


target="_blank" 속성 확인 (새 탭에서 열림)

...


모달 닫기 테스트

...



시나리오: 모달이 정상적으로 닫히는지 확인

...



About 모달 열기

...


ESC 키로 모달 닫기 확인

...


모달 외부 영역 클릭으로 모달 닫기 확인

...


닫기 버튼 클릭으로 모달 닫기 확인 (있는 경우)

...


반응형 레이아웃 테스트

...



시나리오: 다양한 화면 크기에서 레이아웃이 올바르게 표시되는지 확인

...



데스크톱 크기에서 모달 표시 확인

...


태블릿 크기에서 모달 표시 확인

...


모바일 크기에서 모달 표시 확인

...


로고와 콘텐츠 영역의 그리드 레이아웃 확인 (sm: 8/16, xs: 0/24)

...


접근성 테스트

...



시나리오: 키보드 네비게이션 및 스크린 리더 지원 확인

...



탭 키로 드롭다운 메뉴 항목 접근 가능 확인

...


Enter 키로 "About Zeppelin" 메뉴 활성화 확인

...


모달 내 링크들에 탭 키로 접근 가능 확인

...


이미지에 alt 텍스트 "Apache Zeppelin" 존재 확인

...



# E2E 테스트 생성기
/e2e-generate-test-by-argument

{위 결과를 바탕으로 추가할 것 추가하고 제거할 것 제거한 후 $ARGUMENT로 요청}

{직접 BDD(Given When Then) 형태로 테스트를 문장으로 작성 후 $ARGURMENT로 요청하는 방식도 가능}

# *테스트 코드 작성 완료 및 검토*

...

`3.3 Gemini CLI(분당 60회, 하루 1천회 무료)`

Gemini CLI 설치

Code Block
npm install -g @google/gemini-cli # gemini cli 접속 및 구글 로그인 gemini

Playwright MCP 설치

Code Block
# Playwright MCP 서버 설치 npm install -g @executeautomation/playwright-mcp-server # ~/.gemini/settings.json 에 아래 내용 추가

...

{ ... "mcpServers": { "playwright": { "command": "npx", "args": ["-y", "@executeautomation/playwright-mcp-server"] } } }

...




# 설정 확인
gemini
gemini mcp list

...

Gemini commands ‘.toml’ 파일 ./gemini/commands 폴더에 추가

~/.gemini/commands/e2e/recognize-testable-scenario.toml

Code Block

description="E2E 테스트 시나리오 분석"
prompt = """
Please provide a detailed situation and specific component: {{args}}.

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

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

~/.gemini/commands/e2e/generate-test-by-argument.toml

Code Block

 description="E2E 테스트 생성기"
prompt = """
Please provide a detailed scenario: {{args}}.

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

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

## 테스트 방식
* {{args}}로 전달된 테스트 요구사항(요소, 동작, 기대 결과)을 잘 분석해줘
* 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 메서드들)
* 워크플로우 조합 (여러 액션을 연결한 시나리오)
* 테스트별 헬퍼 메서드
* 복잡한 비즈니스 로직
"""

...

Gemini CLI commands 적용 확인

Image RemovedImage Added

Example - Claude example 참조

Code Block
# Gemini CLI 실행 Gemini # E2E 테스트 시나리오 분석 /e2e:recognize-testable-scenario {{args}} # E2E 테스트 생성기 /e2e:generate-test-by-argument {{args}}

...

`4. Contribution Guide`

중복 작업을 피하기 위해 기여자는 다음 절차를 따라주세요.

...

Page tree

Versions Compared

Old Version 1

New Version Current

Key

2.1 Explanation of the Playwright script

`3.3 Gemini CLI(분당 60회, 하루 1천회 무료)`

`4. Contribution Guide`