Playwright Skill로 웹사이트 QA 감사 자동화

UI 감사를 자동화하여 자신 있게 배포하기

수동 테스트는 느리고 오류가 발생하기 쉬운, 추진력을 떨어뜨리는 반복 작업입니다. 변경 사항을 푸시할 때마다 운영 사이트의 눈에 잘 띄지 않는 곳에 깨진 링크나 콘솔 오류가 숨어 있을까 걱정하곤 했습니다. 품질 기준을 유지하기 위해 매주 몇 시간씩 수동 클릭을 해야 했습니다.

저는 이 작업을 Eigent에 넘기기 위해 webapp-testing 스킬을 사용하기 시작했습니다. Playwright의 자동화와 Eigent의 에이전틱 워크플로를 결합하면, 이제 시각적 스냅샷과 로그 확인을 포함한 전체 사이트 감사를 단일 프롬프트로 실행할 수 있습니다.

이제 제가 Eigent.ai 웹사이트를 테스트하기 위해 워크플로를 어떻게 설정했는지 보여드리겠습니다.

1테스트 스크립트 준비하기

먼저 Python 스크립트에서 테스트 로직을 정의합니다. Playwright의 async API를 사용하면 탐색 중에 콘솔 메시지와 네트워크 실패를 추적할 수 있습니다. 이 스크립트는 작업의 두뇌처럼 작동하며, 특정 탐색 링크부터 전체 페이지 스크린샷까지 Eigent가 무엇을 확인해야 하는지 정확히 알려줍니다.

2오류 리스너 구성하기

이 워크플로에서 가장 가치 있는 부분 중 하나는 조용한 실패를 잡아내는 것입니다. 스크립트에 브라우저 콘솔 오류와 실패한 네트워크 요청을 감지하도록 설정했습니다. 이렇게 하면 수동 검토에서 쉽게 놓칠 수 있는 잘못된 PostHog 토큰처럼, 제가 발견한 구성 오류와 같은 기술적 문제를 Eigent가 기록할 수 있습니다.

3자율적으로 사이트 탐색하기

탐색은 Eigent가 주도합니다. 홈 페이지에서 시작해 Environments 및 Enterprise 같은 주요 내비게이션 링크를 식별합니다. 이 섹션들을 클릭하고 네트워크가 idle 상태가 될 때까지 기다리면서, 모든 페이지 전환이 매끄럽고 콘텐츠가 예상대로 로드되는지 확인합니다.

4시각적 스냅샷 캡처하기

스크린샷은 페이지 전반의 UI 일관성을 검증하는 가장 좋은 방법입니다. 테스트 중에 Eigent는 홈 페이지와 내부 섹션의 전체 페이지 스냅샷을 자동으로 촬영합니다. 저는 다음을 포함한 여러 화면을 캡처했습니다:

• Homepage: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
• Environments Page: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
• Enterprise Page: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/enterprise_page.png

5자동 보고서 생성하기

탐색이 완료되면 Eigent가 모든 내용을 Markdown 보고서로 정리합니다. 여기에는 발견 사항 요약, 콘솔 오류 목록, 그리고 캡처된 모든 스크린샷의 절대 경로가 포함됩니다. 이 모든 데이터를 한곳에 모아두면 검토 과정이 즉시 이루어집니다.

6결과 분석하기

출력을 검토해 중요한 차단 요소가 있는지 확인합니다. 이번 실행에서는 감사 과정에서 PostHog 초기화 오류가 발견되었고 task_splitting.mp4에서 중단된 비디오 자산이 표시되었습니다. 이것들은 단순한 버그가 아니라, 고객이 보기 전에 사용자 경험을 개선할 수 있는 기회입니다.

노력은 늘리지 않고 품질은 확장하기

이것은 몇 가지 콘솔 오류를 잡아내는 것 이상의 의미가 아닙니다. 이 워크플로는 Eigent가 Playwright 같은 기술 도구를 자율적인 품질 파트너로 어떻게 바꾸는지 보여줍니다. 사소한 UI 변경마다 복잡한 테스트 스위트를 작성하고 유지하는 대신, URL만 지정하면 Eigent가 전체 보고서를 다시 제공해 줍니다.

QA의 "지루한" 부분을 자동화하면 개발자는 기존 사이트가 안정적으로 유지된다는 확신 속에서 기능 개발에 집중할 수 있습니다.

다음에 시도해 볼 것

이 모든 작업은 동일한 webapp-testing 스킬을 활용하며, 추가 설정은 필요하지 않습니다.

더 나은 결과를 위한 팁

• networkidle 대기 상태를 사용하세요. 이렇게 하면 Eigent가 스크린샷을 찍거나 오류를 확인하기 전에 비동기 자산과 추적 스크립트가 모두 로드되었는지 확인할 수 있습니다.
• 중단된 요청은 제외하세요. 많은 브라우저는 빠른 탐색이나 지연 로딩 중 요청을 중단합니다. 이를 제외하면 실제 404와 서버 오류에 집중할 수 있습니다.
• 역할을 구체적으로 지정하세요. Eigent에게 버튼 클릭을 지시할 때는 CSS 변경에 더 강한 테스트를 위해 link 또는 button 같은 역할 기반 선택자를 사용하세요.