종단 간 테스트는 브라우저나 앱에서 시작해 서버와 저장소를 거친 결과까지 확인합니다. 단위 테스트가 놓치는 화면 연결과 사용자 여정의 실패를 찾는 데 적합합니다.
데모는 가입, 항목 생성, 목록 반영을 따라 자동 이동합니다. 비용과 불안정성이 큰 편이므로 핵심 여정을 고르고, 화면 메시지뿐 아니라 가능한 경우 실제 저장 결과도 확인합니다.
언제 쓰나
가입·구매·작성처럼 실패하면 사용자 작업이 끝나지 않는 핵심 여정에 사용합니다.
종단 간 테스트
End-to-end test
사용자 조작부터 최종 결과까지 제품 전체를 실제 경로로 통과시킵니다.
···
<div class="stage"><div class="title">END-TO-END TEST</div><div class="canvas"><div class="journey"><div class="step" id="s0"><strong>01</strong><span>Sign up</span></div><div class="path"></div><div class="step" id="s1"><strong>02</strong><span>Create item</span></div><div class="path"></div><div class="step" id="s2"><strong>03</strong><span>See in list</span></div></div><div class="cursor" id="cursor">↖</div><div class="ok" id="ok">journey running</div></div></div>.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.journey{display:flex;align-items:center;width:100%;max-width:680px}.step{flex:1;display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;border:1px solid var(--line);border-radius:8px;padding:clamp(6px,2vmin,15px) 2px}.step strong{font-family:ui-monospace,monospace;color:var(--muted)}.path{flex:.28;height:2px;background:var(--line)}.cursor{position:absolute;bottom:12%;left:14%;color:var(--accent);font-size:clamp(19px,5vmin,32px);transition:left .45s,top .45s}.ok{position:absolute;bottom:0;color:var(--accent)}let step=0;function walk(){document.querySelectorAll('.step').forEach((el,i)=>el.classList.toggle('active',i<=step));document.getElementById('cursor').style.left=[14,48,82][step]+'%';document.getElementById('ok').textContent=step===2?'journey passed':'journey running';step=(step+1)%3}walk();setInterval(walk,900)