99 lines
3.0 KiB
Plaintext
99 lines
3.0 KiB
Plaintext
|
# 화면 디자이너 E2E 테스트 접근 가이드
|
||
|
|
|
||
|
|
## 화면 디자이너 접근 방법 (Playwright)
|
||
|
|
|
||
|
|
화면 디자이너는 SPA 탭 기반 시스템이라 URL 직접 접근이 안 된다.
|
||
|
|
다음 3단계를 반드시 따라야 한다.
|
||
|
|
|
||
|
|
### 1단계: 로그인
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
await page.goto('http://localhost:9771/login');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
await page.getByPlaceholder('사용자 ID를 입력하세요').fill('wace');
|
||
|
|
await page.getByPlaceholder('비밀번호를 입력하세요').fill('qlalfqjsgh11');
|
||
|
|
await page.getByRole('button', { name: '로그인' }).click();
|
||
|
|
await page.waitForTimeout(8000);
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2단계: sessionStorage 탭 상태 주입 + openDesigner 쿼리
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
await page.evaluate(() => {
|
||
|
|
sessionStorage.setItem('erp-tab-store', JSON.stringify({
|
||
|
|
state: {
|
||
|
|
tabs: [{
|
||
|
|
id: 'tab-screenmng',
|
||
|
|
title: '화면 관리',
|
||
|
|
path: '/admin/screenMng/screenMngList',
|
||
|
|
isActive: true,
|
||
|
|
isPinned: false
|
||
|
|
}],
|
||
|
|
activeTabId: 'tab-screenmng'
|
||
|
|
},
|
||
|
|
version: 0
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
|
||
|
|
// openDesigner 쿼리 파라미터로 화면 디자이너 자동 열기
|
||
|
|
await page.goto('http://localhost:9771/admin/screenMng/screenMngList?openDesigner=' + screenId);
|
||
|
|
await page.waitForTimeout(10000);
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3단계: 컴포넌트 클릭 + 설정 패널 확인
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
// 패널 버튼 클릭 (설정 패널 열기)
|
||
|
|
const panelBtn = page.locator('button:has-text("패널")');
|
||
|
|
if (await panelBtn.count() > 0) {
|
||
|
|
await panelBtn.first().click();
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 편집 탭 확인
|
||
|
|
const editTab = page.locator('button:has-text("편집")');
|
||
|
|
// editTab.count() > 0 이면 설정 패널 열림 확인
|
||
|
|
```
|
||
|
|
|
||
|
|
## 화면 ID 찾기 (API)
|
||
|
|
|
||
|
|
특정 컴포넌트를 포함한 화면을 API로 검색:
|
||
|
|
|
||
|
|
```typescript
|
||
|
|
const screenId = await page.evaluate(async () => {
|
||
|
|
const token = localStorage.getItem('authToken') || '';
|
||
|
|
const h = { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token };
|
||
|
|
|
||
|
|
const resp = await fetch('http://localhost:8080/api/screen-management/screens?page=1&size=50', { headers: h });
|
||
|
|
const data = await resp.json();
|
||
|
|
const items = data.data || [];
|
||
|
|
|
||
|
|
for (const s of items) {
|
||
|
|
try {
|
||
|
|
const lr = await fetch('http://localhost:8080/api/screen-management/screens/' + s.screenId + '/layout-v2', { headers: h });
|
||
|
|
const ld = await lr.json();
|
||
|
|
const raw = JSON.stringify(ld);
|
||
|
|
// 원하는 컴포넌트 타입 검색
|
||
|
|
if (raw.includes('v2-select')) return s.screenId;
|
||
|
|
} catch {}
|
||
|
|
}
|
||
|
|
return items[0]?.screenId || null;
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## 검증 포인트
|
||
|
|
|
||
|
|
| 확인 항목 | Locator | 기대값 |
|
||
|
|
|----------|---------|--------|
|
||
|
|
| 디자이너 열림 | `button:has-text("패널")` | count > 0 |
|
||
|
|
| 편집 탭 | `button:has-text("편집")` | count > 0 |
|
||
|
|
| 카드 선택 | `text=이 필드는 어떤 데이터를 선택하나요?` | visible |
|
||
|
|
| 고급 설정 | `text=고급 설정` | visible |
|
||
|
|
| JS 에러 없음 | `page.on('pageerror')` | 0건 |
|
||
|
|
|
||
|
|
## 테스트 계정
|
||
|
|
|
||
|
|
- ID: `wace`
|
||
|
|
- PW: `qlalfqjsgh11`
|
||
|
|
- 권한: SUPER_ADMIN (최고 관리자)
|