{ "id": "attendance-management", "name": "근태관리 테스트", "screenshotPolicy": { "onErrorOnly": true, "captureOn": ["error", "fail", "timeout", "404", "500", "blocked"] }, "description": "근태 등록 및 사유 등록 기능을 테스트하는 E2E 테스트", "baseUrl": "https://dev.codebridge-x.com", "url": "/ko/hr/attendance-management", "menuNavigation": { "level1": "인사관리", "level2": "근태관리", "expectedUrl": "/ko/hr/attendance-management", "searchWithinParent": true, "closeOtherMenus": true }, "navigation": { "targetUrl": "/hr/attendance-management", "urlPattern": "/hr/attendance-management|/ko/hr/attendance-management", "menuHints": ["근태관리", "근태 관리", "인사관리"] }, "menuNavigationEnhanced": { "strategy": "scroll-and-search", "sidebar": { "scrollContainer": ".sidebar-scroll, [data-sidebar-scroll], nav[role='navigation']", "scrollStep": 200, "maxScrollAttempts": 10 }, "level1": { "text": "인사관리", "selectors": [ "button:has-text('인사관리')", "[data-menu='인사관리']", "nav button:has-text('인사관리')", "aside button:has-text('인사관리')" ] }, "level2": { "text": "근태관리", "selectors": [ "a:has-text('근태관리')", "[data-submenu='근태관리']", "nav a:has-text('근태관리')", "aside a:has-text('근태관리')" ] }, "fallback": { "directUrl": "/ko/hr/attendance-management", "useAfterAttempts": 3 } }, "timeout": 90000, "tags": ["hr", "attendance", "management", "crud"], "auth": { "username": "TestUser5", "password": "password123!" }, "testData": { "attendance": { "checkInHour": "9", "checkInMinute": "0", "checkOutHour": "18", "checkOutMinute": "0", "nightOvertimeHour": "0", "nightOvertimeMinute": "0", "weekendOvertimeHour": "0", "weekendOvertimeMinute": "0" }, "reason": { "type": { "options": ["출장신청서", "휴가신청서", "외근신청서", "연장근무신청서"] } } }, "steps": [ { "id": "step-0", "name": "🔐 Geolocation API 모킹 (권한 팝업 방지)", "description": "페이지 로드 직후 Geolocation API를 모킹하여 브라우저 권한 팝업이 나타나지 않도록 함", "critical": true, "actions": [ { "type": "evaluate", "script": "(() => { const mockPosition = { coords: { latitude: 37.5665, longitude: 126.9780, accuracy: 100, altitude: null, altitudeAccuracy: null, heading: null, speed: null }, timestamp: Date.now() }; const mockGeolocation = { getCurrentPosition: (success, error, options) => { console.log('[E2E] Geolocation.getCurrentPosition - 모킹된 위치 반환'); setTimeout(() => success(mockPosition), 50); }, watchPosition: (success, error, options) => { console.log('[E2E] Geolocation.watchPosition - 모킹된 위치 반환'); setTimeout(() => success(mockPosition), 50); return 1; }, clearWatch: (id) => {} }; Object.defineProperty(navigator, 'geolocation', { value: mockGeolocation, writable: false, configurable: true }); console.log('[E2E] Geolocation API 모킹 완료 - 서울시청 좌표'); return { success: true, coords: mockPosition.coords }; })()", "description": "Geolocation API 모킹 (서울시청 좌표: 37.5665, 126.9780)" }, { "type": "wait", "duration": 300, "description": "모킹 적용 대기" } ], "note": "Geolocation API를 모킹하면 브라우저가 위치 권한을 요청하지 않음" }, { "id": "step-0-1", "name": "🗺️ 브라우저 위치 권한 팝업 클릭 (좌측 상단)", "description": "Chrome 브라우저 좌측 상단에 나타나는 '사이트에 있는 동안 허용' 팝업 클릭", "critical": true, "actions": [ { "type": "wait", "duration": 1500, "description": "위치 권한 팝업 표시 대기" }, { "type": "evaluate", "script": "(async function() { const permissionSelectors = [ '[class*=\"permission\"][class*=\"allow\"]', '[class*=\"infobar\"] button', '[aria-label*=\"허용\"]', '[aria-label*=\"Allow\"]', 'button:has-text(\"사이트에 있는 동안 허용\")', 'button:has-text(\"허용\")', 'button:has-text(\"Allow\")', '[data-testid*=\"permission\"]', '.permission-prompt button', '[class*=\"PermissionPrompt\"] button' ]; for (const sel of permissionSelectors) { try { const btn = document.querySelector(sel); if (btn && btn.offsetParent !== null) { btn.click(); console.log('[E2E] 위치 권한 팝업 클릭 성공:', sel); await new Promise(r => setTimeout(r, 500)); return { clicked: true, selector: sel }; } } catch(e) {} } const allButtons = Array.from(document.querySelectorAll('button, [role=\"button\"]')); const allowBtn = allButtons.find(b => { const text = b.innerText || b.textContent || ''; return text.includes('사이트에 있는 동안 허용') || text.includes('허용') || text.includes('Allow'); }); if (allowBtn && allowBtn.offsetParent !== null) { allowBtn.click(); console.log('[E2E] 위치 권한 팝업 텍스트 검색으로 클릭'); return { clicked: true, method: 'textSearch' }; } console.log('[E2E] 위치 권한 팝업 없음 (이미 허용되었거나 모킹으로 우회됨)'); return { clicked: false, reason: 'no_popup_found' }; })()", "description": "좌측 상단 권한 팝업 찾아서 클릭" }, { "type": "wait", "duration": 500, "description": "권한 설정 적용 대기" } ], "errorHandling": { "onTimeout": "continue", "onNotFound": "continue", "reason": "팝업이 없으면 이미 허용된 상태로 간주" } }, { "id": "step-0-2", "name": "📂 사이드바 메뉴 전체 펼치기", "description": "모두 펼치기 버튼을 클릭하여 전체 메뉴를 펼친 후 메뉴 탐색 준비", "actions": [ { "type": "evaluate", "script": "document.querySelector('.sidebar-scroll, [data-sidebar-scroll], nav[role=\"navigation\"]')?.scrollTo({top: 0, behavior: 'instant'})", "description": "사이드바 최상단으로 스크롤" }, { "type": "wait", "duration": 300 }, { "type": "evaluate", "script": "Array.from(document.querySelectorAll('button')).find(b => b.innerText?.includes('모두 펼치기'))?.click()", "description": "모두 펼치기 버튼 클릭" }, { "type": "wait", "duration": 2000, "description": "메뉴 펼침 완료 대기" } ], "expect": { "sidebarReady": true } }, { "id": "step-1", "name": "인사관리 메뉴 진입", "description": "인사관리 > 근태관리 메뉴로 이동 (scrollAndFind 패턴 사용)", "actions": [ { "type": "scrollAndFind", "container": ".sidebar-scroll, [data-sidebar-scroll], nav[role='navigation']", "target": "인사관리", "scrollStep": 200, "maxAttempts": 10, "description": "스크롤하며 인사관리 메뉴 찾기" }, { "type": "click", "target": "인사관리", "description": "인사관리 메뉴 클릭" }, { "type": "wait", "duration": 300, "description": "서브메뉴 열림 대기" }, { "type": "scrollAndFind", "container": ".sidebar-scroll, [data-sidebar-scroll], nav[role='navigation']", "target": "근태관리", "scrollStep": 100, "maxAttempts": 5, "description": "스크롤하며 근태관리 서브메뉴 찾기" }, { "type": "click", "target": "근태관리", "description": "근태관리 서브메뉴 클릭" } ], "fallback": { "type": "navigate", "url": "/ko/hr/attendance-management", "description": "메뉴 탐색 실패 시 직접 URL 이동" }, "expect": { "url": "/hr/attendance-management", "visible": ["근태관리", "근태 등록", "사유 등록"] } }, { "id": "step-1-1", "name": "🗺️ GPS 위치 정보 모킹", "description": "브라우저 Geolocation API를 모킹하여 GPS 권한 팝업 없이 위치 정보 제공", "critical": true, "actions": [ { "type": "evaluate", "script": "(() => { const mockPosition = { coords: { latitude: 37.5665, longitude: 126.9780, accuracy: 100, altitude: null, altitudeAccuracy: null, heading: null, speed: null }, timestamp: Date.now() }; const mockGeolocation = { getCurrentPosition: (success, error, options) => { console.log('[GeolocationMock] getCurrentPosition called'); setTimeout(() => success(mockPosition), 100); }, watchPosition: (success, error, options) => { console.log('[GeolocationMock] watchPosition called'); setTimeout(() => success(mockPosition), 100); return 1; }, clearWatch: (id) => { console.log('[GeolocationMock] clearWatch called:', id); } }; Object.defineProperty(navigator, 'geolocation', { value: mockGeolocation, writable: false, configurable: true }); console.log('[GeolocationMock] GPS mocking complete - coords: 37.5665, 126.9780'); return { success: true, coords: { latitude: 37.5665, longitude: 126.9780 } }; })()", "description": "Geolocation API 모킹 (서울시청 좌표: 37.5665, 126.9780)" }, { "type": "wait", "duration": 500, "description": "모킹 적용 대기" } ], "note": "브라우저 네이티브 권한 팝업은 Playwright로 클릭 불가. Geolocation API를 모킹하여 우회함." }, { "id": "step-2", "name": "근태 현황 대시보드 확인", "description": "미출근, 정시출근, 지각, 휴가 카드 표시 확인", "verify": { "visible": ["미출근", "정시 출근", "지각", "휴가"], "statsCards": true } }, { "id": "step-3", "name": "기간 필터 확인", "description": "당해년도, 전전월, 전월, 당월, 어제, 오늘 버튼 확인", "verify": { "visible": ["당해년도", "전전월", "전월", "당월", "어제", "오늘"], "dateInputs": 2 } }, { "id": "step-4", "name": "탭 필터 확인", "description": "전체, 미출근, 정시출근, 지각, 결근, 휴가, 출장, 외근, 연장근무 탭 확인", "verify": { "tabs": ["전체", "미출근", "정시 출근", "지각", "결근", "휴가", "출장", "외근", "연장근무"] } }, { "id": "step-5", "name": "근태 테이블 구조 확인", "description": "테이블 컬럼 구조 검증", "verify": { "tableColumns": ["번호", "부서", "직책", "이름", "직급", "기준일", "출근", "퇴근", "휴게", "연장근무", "사유"] } }, { "id": "step-6", "name": "근태 등록 모달 열기", "description": "근태 등록 버튼 클릭하여 모달 열기", "actions": [ { "type": "openModal", "target": "근태 등록", "description": "근태 정보 모달 열기" } ], "modalConfig": { "containerSelector": "[role='dialog'], .modal", "animationDelay": 300, "waitForSelector": "[role='dialog']" }, "expect": { "modal": "근태 정보", "visible": ["대상", "기준일", "출근 시간", "퇴근 시간", "야간 연장 시간", "주말 연장 시간"] } }, { "id": "step-7", "name": "근태 등록 모달 필드 확인", "description": "근태 등록 모달의 필드와 기본값 확인", "verify": { "modalFields": { "대상": { "type": "combobox", "placeholder": "선택" }, "기준일": { "type": "datepicker", "defaultValue": "today" }, "출근 시간": { "type": "timepicker", "defaultValue": "9:00" }, "퇴근 시간": { "type": "timepicker", "defaultValue": "18:00" }, "야간 연장 시간": { "type": "timepicker", "defaultValue": "0:00" }, "주말 연장 시간": { "type": "timepicker", "defaultValue": "0:00" } }, "buttons": ["취소", "저장"] } }, { "id": "step-8", "name": "⚠️ 필수 검증 #4: 근태 등록 실제 수행", "description": "근태 등록 모달에서 실제 데이터 입력 후 저장", "critical": true, "actions": [ { "type": "selectInModal", "target": "대상", "value": "첫번째 사원", "description": "사원 선택", "options": { "waitAfter": 200 } }, { "type": "verify", "target": "기준일", "description": "기준일 기본값 확인" }, { "type": "clickInModal", "target": "저장", "options": { "waitAfter": 500 } } ], "expect": { "urlMaintained": true, "noErrorPage": true, "modalClosed": true, "toast": "등록이 완료되었습니다", "apiCall": "POST /api/v1/attendances" }, "note": "⚠️ 모달 열기/닫기만 테스트하면 불완전! 실제 저장까지 검증 필수!" }, { "id": "step-8-1", "name": "근태 등록 결과 확인", "description": "등록 후 테이블에 새 데이터 반영 확인", "verify": { "tableDataUpdated": true, "newRowExists": "방금 등록한 근태 데이터가 테이블에 표시" } }, { "id": "step-9", "name": "사유 등록 모달 열기", "description": "사유 등록 버튼 클릭하여 모달 열기", "actions": [ { "type": "openModal", "target": "사유 등록", "description": "사유 정보 모달 열기" } ], "modalConfig": { "containerSelector": "[role='dialog'], .modal", "animationDelay": 300, "waitForSelector": "[role='dialog']" }, "expect": { "modal": "사유 정보", "visible": ["대상", "기준일", "유형"] } }, { "id": "step-10", "name": "사유 유형 옵션 확인", "description": "사유 유형 드롭다운의 옵션 확인", "actions": [ { "type": "clickInModal", "target": "유형", "role": "combobox", "options": { "waitAfter": 200 } } ], "verify": { "options": ["출장신청서", "휴가신청서", "외근신청서", "연장근무신청서"] } }, { "id": "step-11", "name": "⚠️ 필수 검증 #4: 사유 등록 실제 수행", "description": "사유 등록 모달에서 실제 데이터 입력 후 저장", "critical": true, "actions": [ { "type": "selectInModal", "target": "대상", "value": "첫번째 사원", "description": "사원 선택", "options": { "waitAfter": 200 } }, { "type": "selectInModal", "target": "유형", "value": "출장신청서", "description": "출장신청서 선택", "options": { "waitAfter": 200 } }, { "type": "clickInModal", "target": "등록", "options": { "waitAfter": 500 } } ], "expect": { "urlMaintained": true, "noErrorPage": true, "modalClosed": true, "toast": "등록이 완료되었습니다", "apiCall": "POST /api/v1/attendance-reasons" }, "note": "⚠️ ESC로 닫기만 하면 불완전! 실제 등록까지 검증 필수!" }, { "id": "step-11-1", "name": "사유 등록 결과 확인", "description": "등록 후 테이블에 사유 컬럼 업데이트 확인", "verify": { "tableDataUpdated": true, "reasonColumnUpdated": "사유 컬럼에 등록된 사유 표시" } }, { "id": "step-12", "name": "⚠️ 필수 검증: 기간 필터 검색", "critical": true, "description": "날짜 범위를 설정하고 데이터가 필터링되는지 확인", "actions": [ { "type": "capture", "variable": "initialRowCount", "selector": "table tbody tr", "extract": "count", "description": "필터 전 행 수 저장" }, { "type": "click", "target": "당월", "description": "당월 빠른 필터 클릭" }, { "type": "wait", "duration": 500, "description": "필터 적용 대기" }, { "type": "capture", "variable": "filteredRowCount", "selector": "table tbody tr", "extract": "count", "description": "필터 후 행 수 저장" } ], "verify": { "dateFilterApplied": true, "filterButtonActive": "당월" }, "note": "날짜 필터가 실제로 데이터를 필터링하는지 확인" }, { "id": "step-12-1", "name": "⚠️ 필수 검증: 검색 기능", "critical": true, "description": "검색어 입력 후 테이블 데이터가 필터링되는지 확인", "actions": [ { "type": "capture", "variable": "beforeSearchCount", "selector": "table tbody tr", "extract": "count", "description": "검색 전 행 수 저장" }, { "type": "fill", "target": "검색", "value": "홍", "description": "검색어 '홍' 입력" }, { "type": "wait", "duration": 500, "description": "검색 결과 대기" }, { "type": "capture", "variable": "afterSearchCount", "selector": "table tbody tr", "extract": "count", "description": "검색 후 행 수 저장" } ], "verify": { "searchApplied": true, "tableContains": "홍", "placeholder": "이름, 부서 검색..." }, "note": "⚠️ 검색어 입력 후 테이블에 검색어가 포함된 행만 표시되어야 함" }, { "id": "step-12-2", "name": "검색 결과 데이터 검증", "description": "검색 결과의 각 행에 검색어가 포함되어 있는지 확인", "verify": { "allRowsContain": "홍", "verifyMethod": "테이블의 모든 행이 검색어를 포함하는지 확인" } }, { "id": "step-12-3", "name": "검색 초기화 확인", "description": "검색어 삭제 후 전체 목록 복원 확인", "actions": [ { "type": "clear", "target": "검색", "description": "검색어 삭제" }, { "type": "wait", "duration": 500, "description": "목록 복원 대기" } ], "verify": { "dataRestored": true } }, { "id": "step-13", "name": "엑셀 다운로드 버튼 확인", "description": "엑셀 다운로드 버튼 존재 확인", "verify": { "visible": ["엑셀 다운로드"] } } ], "assertions": [ { "type": "url", "expected": "/hr/attendance-management", "message": "근태관리 페이지에 머물러야 함" }, { "type": "elementExists", "selector": "button:has-text('근태 등록')", "message": "근태 등록 버튼이 표시되어야 함" }, { "type": "elementExists", "selector": "button:has-text('사유 등록')", "message": "사유 등록 버튼이 표시되어야 함" }, { "type": "tableExists", "message": "근태 목록 테이블이 표시되어야 함" } ], "expectedAPIs": [ { "method": "GET", "endpoint": "/api/v1/attendances", "description": "근태 목록 조회" }, { "method": "POST", "endpoint": "/api/v1/attendances", "description": "근태 등록" }, { "method": "POST", "endpoint": "/api/v1/attendance-reasons", "description": "사유 등록" }, { "method": "GET", "endpoint": "/api/v1/attendances/export", "description": "엑셀 다운로드" } ], "mandatoryVerifications": { "description": "E2E_TEST_CONFIG.md 기준 필수 검증 항목", "items": [ { "id": 1, "name": "파일 다운로드", "trigger": "엑셀 다운로드 버튼", "verification": "Network API 호출 + 실제 파일 다운로드 확인", "failCondition": "Console LOG만 존재, API 미호출", "steps": ["step-13"] }, { "id": 4, "name": "모달 등록 완료", "trigger": "근태 등록/사유 등록 모달의 저장 버튼", "verification": "실제 등록 동작 + API 호출 + 결과 확인", "failCondition": "열기/닫기만 테스트", "steps": ["step-8", "step-11"] }, { "id": 5, "name": "목업/미완성 페이지 감지", "trigger": "페이지 로드 시", "verification": "입력 필드 + 동작하는 버튼 + API 호출 확인", "failCondition": "버튼만 있고 입력 불가" } ] }, "cleanup": { "enabled": true, "description": "테스트 후 등록한 근태/사유 데이터 삭제 (가능한 경우)" }, "notes": { "testScope": "근태관리 페이지 UI 요소 및 기능 검증", "features": { "dashboard": "미출근/정시출근/지각/휴가 현황 카드", "dateFilter": "당해년도, 전전월, 전월, 당월, 어제, 오늘 빠른 선택", "statusTabs": "전체, 미출근, 정시 출근, 지각, 결근, 휴가, 출장, 외근, 연장근무", "attendanceRegister": "근태 등록 모달 (대상, 기준일, 출퇴근 시간, 연장근무)", "reasonRegister": "사유 등록 모달 (출장/휴가/외근/연장근무 신청서)", "search": "이름, 부서 검색", "export": "엑셀 다운로드" }, "tableColumns": { "번호": "순번", "부서": "소속 부서", "직책": "직책명", "이름": "직원 이름", "직급": "직급명", "기준일": "근태 기준 날짜", "출근": "출근 시간", "퇴근": "퇴근 시간", "휴게": "휴게 시간", "연장근무": "연장근무 시간", "사유": "근태 사유 (출장/휴가/외근 등)" }, "reasonTypes": [ "출장신청서", "휴가신청서", "외근신청서", "연장근무신청서" ], "prerequisites": "로그인된 사용자에게 근태 관리 권한 필요" } }