HAR는 브라우저가 주고받은 요청과 응답의 순서와 타이밍을 담는 형식입니다. Playwright의 HAR 기록 기능은 테스트 중 네트워크를 파일로 남길 수 있습니다.
데모는 요청 폭포도가 기록된 뒤 느린 요청이 드러나는 모습을 보여줍니다. HAR에는 민감한 헤더와 응답 본문이 들어갈 수 있으므로 공유 전에 내용을 확인합니다.
언제 쓰나
테스트의 네트워크 지연을 추적하거나 특정 응답을 재현해야 할 때 사용합니다.
HAR 네트워크 기록
HAR network tracing
브라우저 요청을 HAR로 기록해 지연과 응답을 살피고 네트워크 재현에 활용합니다.
···
<div class="stage"><div class="title">HAR NETWORK TRACE</div><div class="canvas"><div class="waterfall"><div><span>document</span><i id="bar0"></i></div><div><span>data</span><i id="bar1"></i></div><div><span>image</span><i id="bar2"></i></div></div><div class="total" id="total">recording requests</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}.canvas{flex-direction:column;gap:clamp(7px,2vmin,15px)}.waterfall{width:100%;max-width:570px;display:flex;flex-direction:column;gap:8px}.waterfall div{display:flex;align-items:center;gap:7px}.waterfall span{width:clamp(63px,17vmin,95px)}.waterfall i{display:block;height:clamp(9px,2.5vmin,17px);background:var(--accent);border-radius:3px;width:0;transition:width .4s}.waterfall #bar1{background:var(--accent-3)}.total{color:var(--accent)}let n=0;function record(){const step=n++%3;[0,1,2].forEach((i)=>document.getElementById('bar'+i).style.width=i<=step?[28,75,42][i]+'%':'0');document.getElementById('total').textContent=step===2?'slowest: data response':'recording requests'}record();setInterval(record,900)