AI Agent: E2E Test
AI & HCIURL 하나만 주면 크롤링부터 테스트 시나리오·코드 생성·실행·리포트까지 이어지는 E2E 테스트 파이프라인
An end-to-end test pipeline that takes a single URL and automatically crawls the site, drafts natural-language test scenarios, generates runnable Jest+Playwright test code, and produces an HTML report — no site-specific hardcoding.
Key design decisions:
- A general-purpose BFS crawler instead of a hardcoded page list, with a
hybrid wait strategy (domcontentloaded first, then a bounded
networkidle bonus) so it keeps working even on pages with a hanging
external API call.
- Both scenario and code generation go through an LLM, but every prompt
is grounded with real crawled data (exact name/id/type) so the
model can't invent selectors that don't exist.
- Scenario-generation policies are split into a shared policy and
per-group policies, after an early version leaked one group's rules
into every other group's prompt.
- Jest is the test runner and plain Playwright (not @playwright/test)
drives the browser — a combination that required explicitly telling
the code-generation prompt not to use @playwright/test-only matchers.
Result: 18 of 19 generated test cases pass against the live local dev server; the one remaining failure is a local SMTP configuration issue, not a site bug.
URL 하나만 주면 사이트를 자동으로 크롤링하고, 자연어 테스트 시나리오를 작성하고, 실행 가능한 Jest+Playwright 테스트 코드를 생성하고, HTML 리포트까지 남기는 E2E 테스트 파이프라인이다. 특정 사이트에 종속되지 않게 설계했다.
핵심 설계 결정:
- 페이지 목록을 하드코딩하지 않고 BFS로 스스로 찾는 크롤러. domcontentloaded
우선 + 제한된 networkidle 보너스 대기 전략을 써서, 응답 없는 외부 API
호출이 있는 페이지에서도 멈추지 않게 했다.
- 시나리오·코드 생성 둘 다 LLM을 쓰되, 모든 프롬프트에 실제 크롤링 데이터
(정확한 name/id/type)를 함께 넣어서 존재하지 않는 셀렉터를 지어내는 걸
막았다.
- 시나리오 생성 정책을 공통 정책과 그룹별 정책으로 분리 — 초기 버전에서
한 그룹의 정책이 다른 그룹 프롬프트까지 오염시키는 문제를 겪은 뒤의
결정이다.
- 테스트 러너는 Jest, 브라우저 자동화는 순수 Playwright 조합 — 그래서
코드 생성 프롬프트에 @playwright/test 전용 matcher를 쓰지 말라는
규칙을 명시적으로 넣어야 했다.
결과: 로컬 dev 서버 기준으로 생성된 테스트 케이스 19개 중 18개가 통과했다. 남은 1개는 사이트 코드 문제가 아니라 로컬 SMTP 환경 설정 문제로 확인했다.
Links
Github: https://github.com/SangjinKO/e2e-test-ai-agent Velog: https://velog.io/@kosang234/URL-%ED%95%98%EB%82%98%EB%A1%9C-%ED%81%AC%EB%A1%A4%EB%A7%81%EB%B6%80%ED%84%B0-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%BD%94%EB%93%9C-%EC%83%9D%EC%84%B1%EA%B9%8C%EC%A7%80-E2E-%ED%85%8C%EC%8A%A4%ED%8A%B8-%ED%8C%8C%EC%9D%B4%ED%94%84%EB%9D%BC%EC%9D%B8%EC%9D%84AI%EB%A1%9C-%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%8A%90%EB%82%80-%EA%B2%83%EB%93%A4
Leave a Comment: