Capacitor WebViews를 활용한 Claude를 이용한 모바일 앱 QA 자동화

한 개발자가 Capacitor로 구축된 모바일 앱에 대한 자동화된 품질 보증을 수행하도록 Claude를 가르친 방법을 문서화했습니다. 이 앱은 서버 주도 UI 아키텍처와 함께 네이티브 셸(Android의 WebView, iOS의 WKWebView)로 감싼 React를 사용하여 하나의 코드베이스로 웹, iOS, Android 플랫폼에서 실행될 수 있습니다.

테스트 과제와 해결책

Capacitor 앱은 테스트 격차에 존재합니다: Playwright는 네이티브 셸에 접근할 수 없고, XCTest와 Espresso는 WebView 내부의 HTML과 상호작용할 수 없습니다. 개발자는 Claude를 사용하여 두 모바일 플랫폼을 구동하고, 스크린샷을 찍어 문제를 분석하며, 자동으로 버그 리포트를 제출하는 Python 스크립트를 만들었습니다.

Android 구현 세부사항

Android 설정은 90분이 걸렸습니다. 주요 단계:

• 연결성 수정: adb reverse tcp:3000 tcp:3000 및 adb reverse tcp:8080 tcp:8080 (에뮬레이터 재시작 후 재실행 필요)
• WebView DevTools 접근: adb shell "cat /proc/net/unix" | grep webview_devtools_remote로 소켓 찾기
• 로컬 포트로 포워딩: adb forward tcp:9223 localabstract:$WV_SOCKET
• curl http://localhost:9223/json을 통한 완전한 Chrome DevTools Protocol 접근

스크립트는 CDP를 사용한 탐색과 인증(JWT를 localStorage에 주입) 및 adb shell screencap을 사용한 스크린샷으로 약 90초 만에 앱의 모든 25개 화면을 훑습니다.

분석 및 버그 보고

스크린샷은 시각적 문제를 분석합니다: 깨진 레이아웃, 오류 메시지, 누락된 이미지, 빈 화면, 상태 표시줄 겹침. 문제가 발견되면 시스템은:

• zabriskie_bot으로 인증
• 스크린샷을 S3에 업로드
• 프로덕션 포럼에 버그 리포트를 다음 형식으로 제출: [Android QA] Shows Hub: RSVP 버튼이 장소 텍스트와 겹침

시스템은 예상 상태를 알고 있습니다: 크루 페이지에서 비회원에 대한 "Forbidden" 응답은 버그가 아니며, 빈 아바타 원은 버그가 아니고, 프로필 설정의 "Preview" 텍스트는 알려진 미관상 문제입니다.

iOS 구현

iOS 설정은 6시간 이상이 걸렸으며, 모바일 자동화 도구의 차이를 부각시킵니다. 이 기사는 이러한 대비를 언급하지만 Android와 비교하여 iOS 구현에 대한 구체적인 기술적 세부사항은 적게 제공합니다.

배포

전체 QA 시스템은 매일 아침 8시 47분에 예약 작업으로 실행됩니다.