# 화면 디자이너 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 (최고 관리자)