Test agent planner

테스트 계획 에이전트

Explore an app and turn user flows into a test plan.

···
html
<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>
css
.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}
js
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)

Playwright’s planner agent explores an app using a prepared test environment and writes scenarios as a Markdown plan. It checks page elements and expected outcomes for later test generation.

The demo scans three app screens and adds scenario cards. Review the plan against product requirements for omissions and mistaken assumptions.

When to use

Use it to draft coverage for the main flows of an existing app.

Open as page ↗