{ "id": "vendor-management", "name": "거래처관리 테스트", "screenshotPolicy": { "onErrorOnly": true, "captureOn": ["error", "fail", "timeout", "404", "500", "blocked"] }, "description": "회계관리 > 거래처관리 메뉴의 목록 조회, 필터, 검색, 상세 페이지 진입, 수정 및 저장 기능 테스트", "baseUrl": "https://dev.codebridge-x.com", "navigation": { "targetUrl": "/accounting/vendors", "urlPattern": "/accounting/vendors", "menuHints": ["거래처관리", "거래처 관리", "회계관리"] }, "menuNavigation": { "level1": "회계관리", "level2": "거래처관리", "expectedUrl": "/accounting/vendors", "searchWithinParent": true, "closeOtherMenus": true }, "menuNavigationEnhanced": { "strategy": "scroll-and-search", "description": "사이드바를 스크롤하며 메뉴를 찾고 클릭하여 404를 방지", "level1": "회계관리", "level2": "거래처관리", "alternativeLevel1Names": ["회계관리", "회계 관리", "Accounting"], "alternativeLevel2Names": ["거래처관리", "거래처 관리", "Vendors"], "scrollConfig": { "sidebarSelector": "nav, aside, [role='navigation'], .sidebar, #sidebar", "menuItemSelector": "a, button, [role='menuitem'], [role='treeitem']", "scrollStep": 200, "maxScrollAttempts": 10, "scrollDelay": 300 } }, "auth": { "username": "TestUser5", "password": "password123!" }, "notes": { "skip": ["등록 버튼 (추후 구현 예정)", "삭제 기능 (보류)"], "focus": ["테이블 행 클릭 → 상세 페이지", "수정 모드 진입", "수정 후 저장"], "uiNotes": [ "필터 드롭다운: Radix UI Select (button[role='combobox'])", "체크박스: Radix UI Checkbox (button[role='checkbox'])", "저장: 확인 다이얼로그 없이 직접 저장 후 목록으로 리다이렉트" ] }, "steps": [ { "id": "step-0", "name": "사이드바 메뉴 전체 펼치기", "description": "모두 펼치기 버튼을 클릭하여 전체 메뉴를 펼친 후 메뉴 탐색 준비", "actions": [ { "type": "evaluate", "script": "document.querySelector('.sidebar-scroll')?.scrollTo({top:0,behavior:'instant'})" }, { "type": "wait", "duration": 300 }, { "type": "evaluate", "script": "Array.from(document.querySelectorAll('button')).find(b => b.innerText?.includes('모두 펼치기'))?.click()" }, { "type": "wait", "duration": 2000 } ] }, { "id": "step-1", "name": "2단계 메뉴 진입: 회계관리 > 거래처관리", "description": "사이드바를 스크롤하며 회계관리 > 거래처관리 메뉴를 찾아 클릭", "actions": [ { "type": "scrollAndFind", "target": "회계관리", "alternativeTexts": ["회계관리", "회계 관리", "Accounting"], "scrollContainer": "sidebar", "maxAttempts": 10, "description": "스크롤하며 회계관리 메뉴 찾기" }, { "type": "click", "target": "회계관리", "description": "회계관리 메뉴 클릭" }, { "type": "wait", "duration": 500, "description": "서브메뉴 펼쳐지기 대기" }, { "type": "scrollAndFind", "target": "거래처관리", "alternativeTexts": ["거래처관리", "거래처 관리", "Vendors"], "scrollContainer": "submenu", "maxAttempts": 5, "description": "서브메뉴에서 거래처관리 찾기" }, { "type": "click", "target": "거래처관리", "description": "거래처관리 메뉴 클릭" }, { "type": "wait", "target": "페이지 로드 완료", "timeout": 10000 } ], "expect": { "url": "/accounting/vendors", "pageTitle": "거래처관리", "elements": ["통계 카드", "테이블", "검색창"] }, "verification": [ "회계관리 메뉴가 펼쳐졌는지 확인", "거래처관리 서브메뉴 클릭 성공", "404 에러 없이 페이지 로드 완료" ] }, { "id": 3, "name": "필수 검증 #5: 목업 페이지 감지", "action": "verify_not_mockup", "checks": [ "검색 입력 필드 존재 (placeholder: 거래처명, 거래처코드, 사업자번호 검색...)", "필터 드롭다운 존재 (구분, 신용등급, 거래등급, 악성채권 - Radix combobox)", "테이블 데이터 표시", "API 호출 확인" ], "expected": "정상 페이지 (목업 아님)" }, { "id": 4, "name": "통계 카드 확인", "action": "verify_elements", "checks": [ "전체 거래처 카드 표시", "매출 거래처 카드 표시", "매입 거래처 카드 표시" ], "expected": "3개 통계 카드 모두 표시" }, { "id": 5, "name": "테이블 구조 확인", "action": "verify_table", "checks": [ "체크박스 컬럼 (Radix button[role='checkbox'])", "번호 컬럼", "구분 컬럼 (매출/매입/매입매출)", "거래처명 컬럼", "매입 결제일 컬럼", "매출 결제일 컬럼", "신용등급 컬럼", "거래등급 컬럼", "미수금 컬럼", "악성채권 컬럼" ], "expected": "10개 컬럼 존재" }, { "id": 6, "name": "⚠️ 필수 검증: 검색 기능", "critical": true, "description": "검색어 입력 후 테이블 데이터가 필터링되는지 확인", "actions": [ { "type": "evaluate", "script": "(() => { const c = document.querySelectorAll('table tbody tr').length; window.__e2e_beforeSearch = c; return 'beforeSearch=' + c; })()", "description": "검색 전 행 수 저장" }, { "type": "fill", "target": "input[placeholder*='검색']", "value": "가우스", "description": "검색어 '가우스' 입력" }, { "type": "wait", "duration": 1000, "description": "검색 결과 대기" }, { "type": "evaluate", "script": "(() => { const c = document.querySelectorAll('table tbody tr').length; return 'afterSearch=' + c + ', filtered=' + (c < (window.__e2e_beforeSearch||999)); })()", "description": "검색 후 행 수 확인" } ], "verify": { "searchApplied": true, "tableContains": "가우스", "dataFiltered": "검색어에 맞는 거래처만 필터링되어야 함" } }, { "id": 7, "name": "검색 결과 데이터 검증", "description": "검색 결과의 각 행에 검색어가 포함되어 있는지 확인", "actions": [ { "type": "verify_text", "target": "table tbody", "text": "가우스", "description": "테이블에 가우스 텍스트 존재 확인" } ], "verify": { "allRowsContain": "가우스", "verifyMethod": "테이블의 모든 행이 검색어 '가우스'를 포함하는지 확인" } }, { "id": 8, "name": "검색 초기화 및 복원 확인", "description": "검색어 삭제 후 전체 목록 복원 확인", "actions": [ { "type": "evaluate", "script": "(() => { const inp = document.querySelector('input[placeholder*=\"검색\"]'); if(inp){ const nset = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set; nset.call(inp,''); inp.dispatchEvent(new Event('input',{bubbles:true})); inp.dispatchEvent(new Event('change',{bubbles:true})); return 'cleared'; } return 'not found'; })()", "description": "검색어 삭제" }, { "type": "wait", "duration": 1000, "description": "목록 복원 대기" }, { "type": "evaluate", "script": "(() => { const c = document.querySelectorAll('table tbody tr').length; return 'restored rows=' + c + ', restored=' + (c >= (window.__e2e_beforeSearch||1)); })()", "description": "복원 후 행 수 확인" } ], "verify": { "dataRestored": true, "rowCountRestored": "검색 전과 유사한 행 수로 복원" } }, { "id": 9, "name": "구분 필터 테스트 (매출)", "description": "첫 번째 Radix combobox를 클릭하여 '매출' 옵션 선택", "actions": [ { "type": "evaluate", "script": "(async () => { const cbs = document.querySelectorAll('button[role=\"combobox\"]'); if(!cbs[0]) return 'combobox not found'; cbs[0].click(); await new Promise(r=>setTimeout(r,500)); const opt = Array.from(document.querySelectorAll('[role=\"option\"]')).find(o=>o.innerText?.trim()==='매출'); if(opt){ opt.click(); await new Promise(r=>setTimeout(r,1000)); return 'selected 매출, rows=' + document.querySelectorAll('table tbody tr').length; } return 'option 매출 not found'; })()", "description": "구분 필터에서 매출 선택" } ], "expected": "매출 거래처만 필터링" }, { "id": 10, "name": "구분 필터 초기화", "description": "구분 필터를 '전체'로 되돌리기", "actions": [ { "type": "evaluate", "script": "(async () => { const cbs = document.querySelectorAll('button[role=\"combobox\"]'); if(!cbs[0]) return 'combobox not found'; cbs[0].click(); await new Promise(r=>setTimeout(r,500)); const opt = Array.from(document.querySelectorAll('[role=\"option\"]')).find(o=>o.innerText?.trim()==='전체'); if(opt){ opt.click(); await new Promise(r=>setTimeout(r,1000)); return 'selected 전체, rows=' + document.querySelectorAll('table tbody tr').length; } return 'option 전체 not found'; })()", "description": "구분 필터를 전체로 초기화" } ], "expected": "전체 데이터 다시 표시" }, { "id": 11, "name": "테이블 행 클릭 - 상세 페이지 이동", "description": "목록 페이지에서 첫 번째 행을 클릭하여 상세 페이지로 이동", "actions": [ { "type": "evaluate", "script": "(() => { const url = window.location.href; if(!url.includes('/accounting/vendors') || url.includes('mode=')) return 'NOT on list page: ' + url; return 'on list page'; })()", "description": "목록 페이지 확인" }, { "type": "evaluate", "script": "(async () => { const rows = document.querySelectorAll('table tbody tr'); if(rows.length===0) return 'no rows'; rows[0].click(); await new Promise(r=>setTimeout(r,2000)); return 'clicked row, url=' + window.location.href; })()", "description": "첫 번째 행 클릭" } ], "expected": "거래처 상세 페이지로 이동" }, { "id": 12, "name": "상세 페이지 - URL 확인", "action": "verify_url", "target": "/accounting/vendors/\\d+", "checks": [ "URL에 거래처 ID 포함 (/accounting/vendors/{id})" ], "expected": "URL 정상 전달" }, { "id": 13, "name": "상세 페이지 - 헤더 확인", "action": "verify_elements", "checks": [ "거래처 상세 타이틀", "목록 버튼 존재", "삭제 버튼 존재", "수정 버튼 존재" ], "expected": "상세 페이지 헤더 정상 표시" }, { "id": 14, "name": "상세 페이지 - 기본 정보 카드 확인", "action": "verify_detail_info", "checks": [ "사업자등록번호 필드", "거래처코드 필드", "거래처명 필드", "대표자명 필드", "업태 필드", "업종 필드" ], "expected": "기본 정보 모두 표시 (읽기 전용)" }, { "id": 15, "name": "상세 페이지 - 연락처 정보 확인", "action": "verify_detail_info", "checks": [ "주소 필드", "전화번호 필드", "모바일 필드", "팩스 필드", "이메일 필드" ], "expected": "연락처 정보 모두 표시" }, { "id": 16, "name": "상세 페이지 - 담당자 정보 확인", "action": "verify_detail_info", "checks": [ "담당자명 필드", "담당자 전화 필드", "시스템 관리자 필드" ], "expected": "담당자 정보 모두 표시" }, { "id": 17, "name": "상세 페이지 - 회사 정보 확인", "action": "verify_detail_info", "checks": [ "회사 로고 영역", "매입 결제일 필드", "매출 결제일 필드" ], "expected": "회사 정보 모두 표시" }, { "id": 18, "name": "상세 페이지 - 신용/거래 정보 확인", "action": "verify_detail_info", "checks": [ "신용등급 필드", "거래등급 필드", "세금계산서 이메일 필드", "입금계좌 은행 필드", "계좌 필드", "예금주 필드" ], "expected": "신용/거래 정보 모두 표시" }, { "id": 19, "name": "상세 페이지 - 추가 정보 확인", "action": "verify_detail_info", "checks": [ "미수금 필드", "악성채권 금액 필드", "악성채권 상태 필드" ], "expected": "추가 정보 모두 표시" }, { "id": 20, "name": "상세 페이지 - 메모 섹션 확인", "action": "verify_elements", "checks": [ "메모 카드 존재", "메모 리스트 또는 빈 메시지" ], "expected": "메모 섹션 표시" }, { "id": 21, "name": "핵심 테스트: 수정 버튼 클릭", "action": "click_button", "target": "수정", "expected": "수정 모드로 전환 (URL에 ?mode=edit 추가)" }, { "id": 22, "name": "수정 모드 - URL 확인", "action": "verify_url", "target": "mode=edit", "checks": [ "URL에 mode=edit 파라미터 포함" ], "expected": "수정 모드 URL 정상" }, { "id": 23, "name": "수정 모드 - 필드 편집 가능 확인", "action": "verify_edit_mode", "checks": [ "거래처명 입력 가능", "대표자명 입력 가능", "전화번호 입력 가능", "이메일 입력 가능", "저장 버튼 존재", "취소 버튼 존재" ], "expected": "수정 모드에서 필드 편집 가능" }, { "id": 24, "name": "핵심 테스트: 거래처명 수정", "description": "거래처명 input 필드에 테스트 접미사 추가. input에 id/name이 없으므로 value 기반 탐색 필요", "actions": [ { "type": "evaluate", "script": "(async () => { const inputs = document.querySelectorAll('input:not([type=\"hidden\"]):not([type=\"checkbox\"])'); let target = null; inputs.forEach(inp => { if(inp.value && inp.value.length > 1 && !inp.value.includes('수정테스트') && !inp.placeholder.includes('자동생성') && !inp.placeholder.includes('000-00')) { if(!target) target = inp; } }); if(!target) { for(const inp of inputs) { if(inp.value && inp.value.length > 1 && !inp.placeholder.includes('자동생성') && !inp.placeholder.includes('000-00')) { target = inp; break; } } } if(target) { const nset = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set; const origVal = target.value; nset.call(target, origVal + ' (수정테스트)'); target.dispatchEvent(new Event('input',{bubbles:true})); target.dispatchEvent(new Event('change',{bubbles:true})); window.__e2e_origVendorName = origVal; return 'modified: ' + origVal + ' → ' + target.value; } return 'no editable input found'; })()", "description": "첫 번째 편집 가능 필드(거래처명)에 접미사 추가" } ], "expected": "거래처명에 ' (수정테스트)' 추가" }, { "id": 25, "name": "핵심 테스트: 저장 버튼 클릭", "description": "저장 버튼 클릭. 이 페이지는 다이얼로그 없이 직접 저장 후 목록으로 리다이렉트됨", "actions": [ { "type": "evaluate", "script": "(() => { window.__e2e_urlBeforeSave = window.location.href; return 'saved url: ' + window.__e2e_urlBeforeSave; })()", "description": "저장 전 URL 기록" }, { "type": "click_button", "target": "저장", "description": "저장 버튼 클릭" }, { "type": "wait", "duration": 2000, "description": "저장 처리 대기" } ], "expected": "저장 완료 후 목록 페이지로 리다이렉트" }, { "id": 26, "name": "필수 검증 #2: 저장 완료 확인", "description": "저장 후 URL 변경 및 에러 여부 확인 (다이얼로그 없이 직접 저장 방식)", "actions": [ { "type": "evaluate", "script": "(() => { const url = window.location.href; const isListPage = url.includes('/accounting/vendors') && !url.includes('mode='); const hasError = document.body.innerText.includes('404') || document.body.innerText.includes('500') || document.body.innerText.includes('Not Found'); const urlChanged = url !== window.__e2e_urlBeforeSave; return JSON.stringify({ url, isListPage, hasError, urlChanged, result: isListPage && !hasError ? 'PASS' : 'FAIL' }); })()", "description": "저장 후 목록 페이지 복귀 및 에러 없음 확인" } ], "expected": "목록 페이지로 복귀, 에러 없음" }, { "id": 27, "name": "수정 결과 확인 - 목록에서 검증", "description": "목록 페이지에서 수정된 거래처명 확인", "actions": [ { "type": "evaluate", "script": "(() => { const found = document.body.innerText.includes('수정테스트'); const rows = document.querySelectorAll('table tbody tr').length; return JSON.stringify({ modifiedVisible: found, rowCount: rows, result: found ? 'PASS: 수정된 데이터 목록에 반영' : 'WARN: 수정 텍스트 미표시 (페이지네이션 또는 정렬 영향)' }); })()", "description": "목록에서 수정된 거래처 확인" } ], "expected": "수정된 거래처명이 목록에 표시" }, { "id": 28, "name": "원래 값 복원 - 수정된 거래처 클릭", "description": "수정된 거래처를 찾아 클릭하여 상세 페이지 진입", "actions": [ { "type": "evaluate", "script": "(async () => { const rows = document.querySelectorAll('table tbody tr'); let target = null; rows.forEach(row => { if(row.innerText.includes('수정테스트')) target = row; }); if(target){ target.click(); await new Promise(r=>setTimeout(r,2000)); return 'clicked modified vendor, url=' + window.location.href; } rows[0]?.click(); await new Promise(r=>setTimeout(r,2000)); return 'modified vendor not found in current page, clicked first row. url=' + window.location.href; })()", "description": "수정된 거래처 행 클릭" } ], "expected": "수정된 거래처 상세 페이지 진입" }, { "id": 29, "name": "원래 값 복원 - 수정 버튼 클릭", "actions": [ { "type": "evaluate", "script": "(async () => { const btn = Array.from(document.querySelectorAll('button')).find(b=>b.innerText?.trim()==='수정'); if(btn){ btn.click(); await new Promise(r=>setTimeout(r,1500)); return 'edit mode, url=' + window.location.href; } return 'edit button not found'; })()", "description": "수정 모드 진입" } ], "expected": "수정 모드로 전환" }, { "id": 30, "name": "원래 값 복원 - 거래처명 원복", "description": "거래처명에서 ' (수정테스트)' 제거", "actions": [ { "type": "evaluate", "script": "(async () => { const inputs = document.querySelectorAll('input:not([type=\"hidden\"]):not([type=\"checkbox\"])'); let restored = false; inputs.forEach(inp => { if(inp.value.includes('수정테스트')){ const nset = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').set; const newVal = inp.value.replace(' (수정테스트)',''); nset.call(inp, newVal); inp.dispatchEvent(new Event('input',{bubbles:true})); inp.dispatchEvent(new Event('change',{bubbles:true})); restored = true; } }); return restored ? 'restored' : 'no field with 수정테스트 found'; })()", "description": "접미사 제거하여 원래 값 복원" } ], "expected": "거래처명에서 ' (수정테스트)' 제거" }, { "id": 31, "name": "원래 값 복원 - 저장", "description": "복원 저장 (다이얼로그 없이 직접 저장)", "actions": [ { "type": "evaluate", "script": "(async () => { const btn = Array.from(document.querySelectorAll('button')).find(b=>b.innerText?.trim()==='저장'); if(btn){ btn.click(); await new Promise(r=>setTimeout(r,2000)); return 'saved, url=' + window.location.href; } return 'save button not found'; })()", "description": "저장 버튼 클릭" } ], "expected": "원래 값으로 복원 완료, 목록으로 리다이렉트" }, { "id": 32, "name": "원래 값 복원 - 완료 확인", "description": "복원 후 목록 페이지에서 수정테스트 텍스트 제거 확인", "actions": [ { "type": "evaluate", "script": "(() => { const url = window.location.href; const isListPage = url.includes('/accounting/vendors') && !url.includes('mode='); const stillModified = document.body.innerText.includes('수정테스트'); return JSON.stringify({ url, isListPage, stillModified, result: isListPage && !stillModified ? 'PASS: 원복 완료' : 'WARN: 원복 확인 필요' }); })()", "description": "목록에서 원복 확인" } ], "expected": "수정테스트 텍스트 제거됨" }, { "id": 33, "name": "목록 페이지 최종 확인", "action": "verify_url", "target": "/accounting/vendors", "expected": "거래처관리 목록 페이지 정상 표시" }, { "id": 34, "name": "콘솔 에러 확인", "action": "verify_console", "expected": "심각한 콘솔 에러 없음" } ], "requiredVerifications": [ { "id": 1, "name": "등록/저장 버튼", "steps": [25, 26], "criteria": "저장 클릭 → 목록 리다이렉트 + 에러 없음 + 데이터 반영" }, { "id": 2, "name": "등록 버튼 (신규)", "steps": [], "criteria": "보류 - 추후 구현 예정" }, { "id": 3, "name": "검색/필터", "steps": [6, 7, 8, 9, 10], "criteria": "검색 및 필터 시 데이터 변화 확인" }, { "id": 4, "name": "삭제 기능", "steps": [], "criteria": "보류 - 테스트 대상에서 제외" }, { "id": 5, "name": "목업 페이지 감지", "steps": [3], "criteria": "입력 필드, 동작 버튼, API 호출 확인" } ], "testData": { "searchKeyword": "가우스", "editSuffix": " (수정테스트)" }, "expectedAPIs": [ { "method": "GET", "endpoint": "/api/v1/clients", "description": "거래처 목록 조회" }, { "method": "GET", "endpoint": "/api/v1/clients/{id}", "description": "거래처 상세 조회" }, { "method": "PUT", "endpoint": "/api/v1/clients/{id}", "description": "거래처 수정" } ] }