QA Wolf, 클릭으로 보여주면 Playwright 테스트로 바꾸는 레코더 공개

Hacker News그저께

QA Wolf가 자사 에이전트의 채팅 창 안에 브라우저 레코더를 넣었다. 대화 옆에 라이브 브라우저를 띄우고 녹화를 시작한 뒤 원하는 흐름을 직접 클릭하면, 에이전트가 그 동작을 실시간으로 지켜보며 단계 목록을 만들고 녹화가 끝나는 시점에 테스트로 전환한다. 사람이 말로 설명하던 영역을 30초 남짓의 시연으로 대체하겠다는 발상이다.

기존 QA Wolf 에이전트는 앱을 스스로 돌아다니며 페이지를 매핑하고 커버리지를 제안하고 테스트까지 작성한다. 넓게 훑는 데는 강하지만, 화요일에만 동작하는 프로모션 코드, 500달러를 넘는 지출에만 나타나는 결재 단계, 관리자에게만 노출되는 내보내기 버튼 같은 지식은 코드가 아니라 사람 머릿속에 있다. 이걸 프롬프트로 풀어 쓰면 느리고 세부가 뭉개진다.

녹화된 클릭과 키 입력을 그대로 코드로 옮기면 결과물은 쓰레기가 된다. 그래서 에이전트가 중간에서 정리한다. 단계를 다듬고 빠진 부분을 메우고, 사용자가 암묵적으로 기대한 검증을 덧붙인 뒤에야 코드를 쓴다. 단 의도를 바꾸지는 않는다. 모든 편집은 사용자가 보고 있는 단계 목록에 즉시 반영되고, 에이전트가 추가한 단계는 실제 브라우저에서 일어난 사건에만 근거한다.

녹화는 테스트가 시작되는 지점에서 시작된다. 대부분의 플로우는 특정 계정으로 로그인하고, 데이터를 만들고, 그다음 본론으로 들어간다. 이 준비 과정을 매번 녹화하면 느릴뿐더러 이미 있는 로그인 헬퍼의 사본이 하나 더 생긴다. 그래서 녹화 버튼을 누르면 에이전트가 먼저 워크스페이스를 뒤져 로그인, 테스트 데이터 생성, 계정 전환을 담당하는 헬퍼를 찾아낸다. `loginAs('admin')` 같은 헬퍼를 읽고 무엇을 받는지 파악한 뒤 'Sign in as an admin' 같은 짧은 카드로 제안하며, 로그인 헬퍼에는 워크스페이스 로그인을 쓰니 녹화할 필요가 없다는 설명이 붙는다.

원하는 헬퍼만 남기고 녹화를 시작하면 셋업이 라이브 브라우저에서 실행되고, 녹화는 그 실행이 끝난 페이지에서 출발한다. 같은 흐름을 관리자가 아닌 일반 사용자로 찍고 싶다면 요청만 하면 에이전트가 동일한 헬퍼를 다른 페르소나로 제안한다. 헬퍼가 아직 없는 워크스페이스라면 앱 시작 페이지를 열어주거나, 전부 손으로 하겠다는 선택지를 준다. 이 셋업은 녹화가 끝난 뒤에도 살아 있다. 리플레이 때 클린 브라우저에서 다시 실행되고, 완성된 플로우는 첫 줄에서 같은 헬퍼를 호출한다. 로그인은 두 번 기록되지 않고, 로그인 헬퍼가 바뀌면 녹화된 테스트도 같이 바뀐다.

세 대의 기계가 얽히는 구조에서 핵심은 사용자와 에이전트가 같은 단계 목록을 본다는 점이다. 클릭은 클라우드 브라우저에서 발생하고, 사용자는 QA Wolf 앱에서, 에이전트는 자기 머신에서 그것을 본다. 클릭은 양쪽 목록에 동시에 나타나고 어느 쪽이든 수정하면 상대에게 바로 전달되며, 연결이 끊겨도 끊긴 지점부터 이어진다. 클릭마다 클라우드 브라우저가 Playwright 로케이터를 계산해 단계에 함께 실어 보낸다. `getByRole('button', { name: 'Add to cart' })`처럼 나중에 같은 요소를 다시 찾아낼 수 있는 코드다.

브라우저는 원래 시끄럽다. 이메일 주소를 칠 때 글자마다 키 입력이 발생하고, 폼 하나를 채우는 동안 수정과 스크롤과 중복 보고된 클릭이 섞인다. 정리는 두 번에 나눠 이뤄진다. 먼저 페이지 안의 녹화 스크립트가 타이핑이 멈출 때까지 기다렸다가 필드의 최종 값으로 fill 한 번을 보낸다. 필드를 벗어나거나 페이지가 사라지면 곧바로 보내는데, 마지막 자리에서 자동 제출되는 일회용 코드 입력란 같은 경우를 위해서다. 그다음 목록 단계에서 캡처 규칙이 잡음을 걷어낸다. 로그인 한 번에 11개 이벤트가 발생해도 남는 것은 이메일 입력, 비밀번호 입력, Sign in 클릭 세 단계다. 같은 필드의 반복 fill은 하나로 합쳐지고, 입력 전의 필드 클릭은 독립 단계가 아니며, Backspace 같은 수정은 다음 fill에 덮여 사라지고, 스크롤은 버려지고, 90ms 간격으로 두 번 보고된 클릭은 한 번만 남고, 앱이 스스로 일으킨 페이지 전환은 단계로 세지 않는다. 각 규칙에는 자체 테스트가 붙어 있다.

실무적으로 달라지는 것은 입력 방식이다. 사내 규칙을 프롬프트로 길게 설명하는 대신 화면에서 한 번 보여주면 되고, 로그인이나 데이터 생성 같은 반복 셋업은 헬퍼로 공유되어 유지보수 지점이 한 곳으로 모인다. 결과물이 Playwright 로케이터를 단계에 포함한 코드이므로 기존 테스트 스택과도 맞물린다.

다만 에이전트는 사용자가 의도한 테스트 대상을 바꾸지 않는다는 전제 위에서만 움직인다. 자동으로 추가되는 단계도 실제로 브라우저에서 일어난 일로 제한된다. 또 워크스페이스에 셋업 헬퍼가 없으면 앱 시작 페이지에서 시작하거나 셋업을 건너뛰고 전부 수동으로 녹화해야 한다.