Test agent generator

테스트 생성 에이전트

Turn a scenario plan into runnable tests while verifying steps in the browser.

···
html
<div class="stage"><div class="title">TEST AGENT · GENERATE</div><div class="canvas"><div class="planline">PLAN: create an item</div><div class="codebox mono"><div id="line0">getByRole('button')</div><div id="line1">click()</div><div id="line2">expect(item).toBeVisible()</div></div><div class="progress"><i id="progress"></i></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(6px,2vmin,13px)}.planline{color:var(--accent)}.codebox{width:min(95%,520px);border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:clamp(7px,2vmin,13px);box-sizing:border-box}.codebox div{color:var(--muted);border-left:3px solid transparent;padding:3px 5px;transition:color .3s,background .3s,border-color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.codebox div.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.progress{width:min(95%,520px);height:5px;background:var(--line);border-radius:4px}.progress i{display:block;height:100%;background:var(--accent);width:33%;transition:width .3s}
js
let n=0;function write(){const step=n++%3;for(let i=0;i<3;i++)document.getElementById('line'+i).classList.toggle('on',i<=step);document.getElementById('progress').style.width=((step+1)*33.33)+'%'}write();setInterval(write,900)

Playwright’s generator agent verifies plan steps against the live app while writing test files. It adds locators and assertions for expected outcomes.

The demo turns a plan into locator, click, and assertion lines. Generated code can contain initial errors, so review execution results and locator stability.

When to use

Use it to convert reviewed scenarios into browser automation tests.

Open as page ↗