Playwright의 계획 에이전트는 준비된 테스트 환경에서 앱을 살펴보고 시나리오를 Markdown 계획으로 적습니다. 화면 요소와 예상 결과를 확인해 다음 단계의 테스트 생성에 넘깁니다.
데모는 앱의 세 화면을 훑은 뒤 시나리오 카드가 차례로 만들어지는 모습을 보여줍니다. 계획은 제품 요구사항과 비교해 사람이 누락·오해를 검토해야 합니다.
언제 쓰나
기존 앱의 핵심 흐름을 테스트 계획으로 빠르게 정리할 때 사용합니다.
테스트 계획 에이전트
Test agent planner
앱을 탐색하고 테스트할 사용자 흐름을 실행 가능한 계획으로 정리합니다.
···
<div class="stage"><div class="title">TEST AGENT · PLAN</div><div class="canvas"><div class="appmap"><div id="screen0">HOME</div><div id="screen1">FORM</div><div id="screen2">LIST</div></div><div class="scan" id="scan"></div><div class="plans"><div id="plan0">Open form</div><div id="plan1">Submit item</div><div id="plan2">Verify list</div></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(9px,3vmin,17px)}.appmap,.plans{display:flex;width:100%;max-width:600px;gap:5px}.appmap div,.plans div{flex:1;border:1px solid var(--line);border-radius:5px;text-align:center;padding:clamp(6px,2vmin,12px) 1px}.appmap .on,.plans .on{border-color:var(--accent);color:var(--accent)}.plans div{opacity:.3;transition:opacity .3s}.plans .on{opacity:1}.scan{height:3px;width:20%;background:var(--accent);align-self:flex-start;margin-left:7%;transition:margin-left .5s}let n=0;function scan(){const step=n++%3;for(let i=0;i<3;i++){document.getElementById('screen'+i).classList.toggle('on',i===step);document.getElementById('plan'+i).classList.toggle('on',i<=step)}document.getElementById('scan').style.marginLeft=[7,40,73][step]+'%'}scan();setInterval(scan,850)