Playwright의 생성 에이전트는 계획의 각 단계를 실제 앱에서 확인하면서 테스트 파일을 작성합니다. 요소를 찾는 선택자와 기대 결과의 어서션을 코드에 넣습니다.
데모는 계획 문장이 선택자, 클릭, 어서션 줄로 바뀌는 과정을 보여줍니다. 생성된 코드는 초기 오류가 있을 수 있으므로 실행 결과와 선택자의 안정성을 검토합니다.
언제 쓰나
검증된 시나리오를 브라우저 자동화 테스트로 전환할 때 사용합니다.
테스트 생성 에이전트
Test agent generator
시나리오 계획을 브라우저에서 검증하며 실행 가능한 테스트 코드로 옮깁니다.
···
<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>.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}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)