HeuJung
0f0ef8fa8d
레이아웃 편집기 spec 중 저장(PUT)까지 수행하는 것들이 제품 화면에 편집 결과를 영속시켜, 실행할 때마다 개발 사이트에 노드가 누적됐다(home 에 빈 표 7개, 관리자 대시보드에 빈 차트 5개). spec 안에 "추가한 노드 삭제 후 재저장" 원복을 넣어도 소용이 없었다 — 원복 후에도 레이아웃이 오염 시점과 정확히 같은 크기로 되돌아왔다. 원복에 기대는 대신 저장 대상 자체를 E2E 전용 시드 화면으로 분리한다. 시드 화면은 활성 템플릿 디렉토리에만 설치되므로 배포 원본과 릴리스 산출물은 변하지 않는다. globalSetup 이 매 실행 fixture 원본으로 덮어써 회차 간 누적이 성립하지 않으므로 저장 spec 에 원복 절차가 필요 없다. 설치는 레이아웃 파일과 라우트, DB 행 세 가지를 함께 다루되 시드 행만 건드린다 — 전체 재동기화를 쓰면 편집기로 저장한(파일에 없는) 변경이 실행할 때마다 사라지기 때문이다. 전수 실행에서 드러난 기존 실패도 함께 처리했다. 35건 중 27건은 절전·부하 아티팩트였고 나머지는 원인을 확정해 고쳤다. 템플릿 식별자 자리에 모듈 id 를 넣어 라우트 트리가 비어 있었고, "캔버스 텍스트가 길어진다"는 대리 지표가 렌더 여부와 무관했으며(정상 렌더에도 짧아진다), 팔레트 삽입 위치가 잠금 서브트리 안이면 선택이 조상으로 밀려 노드를 지목할 수 없었고, 상태 개수 단언이 상태 추가로 낡았고, if 게이트상 그 탭에 등록되지 않는 소스를 refetch 하고 있었고, 무통신 구간이 오지 않는 관리자 화면에 networkidle 을 기다렸고, 테스트 종료 후 도착한 route 콜백이 워커를 중단시켰고, 같은 설정 화면에 저장하는 테스트들이 병렬로 충돌했다. 측정 방법에서 반복해 틀린 지점들은 E2E 가이드에 표로 남겼다 — 가림은 가시성 판정으로 잡히지 않고, 길이 증감은 렌더 신호가 아니며, 총 개수 단언은 스펙이 늘면 깨지고, networkidle 은 실시간 연결이 있는 화면에서 오지 않는다.
69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
/**
|
|
* 레이아웃 편집기 spec 공용 헬퍼.
|
|
*
|
|
* 편집기 캔버스의 노드는 `data-editor-path` 로 지목하는데, 그 경로의 **첫 세그먼트는 베이스
|
|
* 레이아웃(`_user_base` / `_admin_base`)의 루트 자식 인덱스**다. 베이스 레이아웃 루트에 컴포넌트가
|
|
* 하나 추가되면 본문 루트 인덱스가 통째로 밀려 그 인덱스를 리터럴로 박아 둔 spec 이 전부
|
|
* `node not found` 로 죽는다.
|
|
*
|
|
* 실제로 그렇게 됐다 — `_user_base` 루트가 작성 시점에는
|
|
* `0:Toast / 1:PageTransitionIndicator / 2:user_layout_root` 였는데
|
|
* `header_currency_inject_anchor` Div 가 0번에 삽입되어 본문이 2 → 3 으로 밀렸고, `'2.children…'`
|
|
* 을 상수로 둔 spec 7개(31건)가 한꺼번에 실패했다.
|
|
*
|
|
* 그래서 인덱스를 세지 않고 **본문 루트의 DOM id 로 경로를 조회**한다. 베이스 레이아웃에 무엇이
|
|
* 더 얹혀도 영향받지 않는다.
|
|
*/
|
|
import type { Page } from '@playwright/test';
|
|
|
|
/** 사용자 템플릿 본문 루트의 DOM id (`_user_base.json` 의 `user_layout_root`) */
|
|
export const USER_BODY_ROOT_ID = 'user_layout_root';
|
|
|
|
/** 관리자 템플릿 본문 루트의 DOM id (`_admin_base.json`) */
|
|
export const ADMIN_BODY_ROOT_ID = 'admin_layout_root';
|
|
|
|
/**
|
|
* 편집기 캔버스에서 본문 루트의 `data-editor-path` 를 조회합니다.
|
|
*
|
|
* @param page Playwright page (편집기 진입 + 캔버스 렌더 완료 상태)
|
|
* @param rootId 본문 루트의 DOM id (기본값: 사용자 템플릿)
|
|
* @returns 본문 루트의 editor path (예: `"3"`)
|
|
* @throws 해당 id 노드가 없거나 editor path 가 없을 때
|
|
*/
|
|
export async function bodyRootPath(page: Page, rootId: string = USER_BODY_ROOT_ID): Promise<string> {
|
|
const path = await page.evaluate(
|
|
(id) => document.querySelector(`#${id}`)?.getAttribute('data-editor-path') ?? null,
|
|
rootId,
|
|
);
|
|
|
|
if (!path) {
|
|
const seen = await page.evaluate(() =>
|
|
Array.from(document.querySelectorAll('[data-editor-path]'))
|
|
.filter((el) => !(el.getAttribute('data-editor-path') ?? '').includes('.'))
|
|
.map((el) => `${el.getAttribute('data-editor-path')}#${el.id || '(no-id)'}`)
|
|
.join(', '),
|
|
);
|
|
throw new Error(`본문 루트(#${rootId})의 data-editor-path 를 찾지 못했습니다. 루트 노드: ${seen}`);
|
|
}
|
|
|
|
return path;
|
|
}
|
|
|
|
/**
|
|
* 본문 루트 기준 상대 경로를 절대 editor path 로 만듭니다.
|
|
*
|
|
* @param page Playwright page
|
|
* @param relative 본문 루트 아래 상대 경로 (예: `"children.5.children.0"`)
|
|
* @param rootId 본문 루트의 DOM id (기본값: 사용자 템플릿)
|
|
* @returns 절대 editor path
|
|
*/
|
|
export async function editorPath(
|
|
page: Page,
|
|
relative: string,
|
|
rootId: string = USER_BODY_ROOT_ID,
|
|
): Promise<string> {
|
|
const root = await bodyRootPath(page, rootId);
|
|
|
|
return relative ? `${root}.${relative}` : root;
|
|
}
|