브라우저에서 앱 테스트하기

Lovable이 브라우저 테스트를 사용하여 버튼 클릭, 양식 작성, 플로우 테스트, 다양한 화면 크기에서의 동작 확인을 통해 앱을 검증하는 방법을 알아보세요.

브라우저 테스트는 Lovable이 가상 환경에서 실행되는 실제 브라우저에서 앱과 상호작용할 수 있게 해줍니다. 에이전트는 버튼을 클릭하고, 양식을 작성하고, 페이지를 탐색하고, 코드만으로는 알 수 없는 실제 사용자 동작을 스크린샷으로 검증할 수 있습니다.

브라우저 테스트를 사용하여 사용자 플로우를 검증하고, 시각적 또는 동작 문제를 디버그하고, 다양한 화면 크기에서 변경 사항이 예상대로 작동하는지 확인하세요.

브라우저 테스트를 사용해서 가입 플로우가 작동하는지 검증해줘.

브라우저 테스트로 할 수 있는 것

브라우저 테스트가 실행되면 에이전트는 다음을 수행할 수 있습니다.

• 앱 스크린샷 캡처
• 버튼과 링크 클릭
• 입력 필드 작성 및 양식 제출
• 페이지 간 이동
• 콘솔 로그 및 네트워크 요청 읽기
• 앱과 상호작용하는 동안 런타임 오류 감지
• 모바일, 태블릿, 데스크톱 레이아웃을 포함한 다양한 화면 크기 테스트. 기본적으로 미리보기와 동일한 크기를 사용합니다.

브라우저 테스트 작동 방식

Lovable은 더 빠른 검증 방법을 먼저 시도한 후 선택적으로 브라우저 테스트를 사용합니다.

브라우저 테스트는 다음 경우에 실행될 수 있습니다.

• 명시적으로 무언가가 작동하는지 확인을 요청할 때. 일반적인 트리거 문구:
  "작동하는지 확인해줘", "제대로 되는지 확인해줘", "이거 테스트해줘", "작동하는지 체크해줘"
• 로그나 코드 검사로는 시각적 또는 UI 문제를 찾을 수 없을 때
• 더 큰 기능 변경이 있고, Lovable이 플로우 테스트를 제안하며 사용자가 확인할 때

실행 위치

브라우저는 보안 가상 환경에서 원격으로 실행됩니다. 개인 브라우저가 아니며 로컬 세션을 차지하지 않습니다.

• 브라우저 테스트는 항상 현재 작업 중인 프로젝트의 미리보기에서 실행되며 보고 있는 앱의 정확한 버전을 테스트합니다.
• 앱이 인증을 사용하는 경우, 브라우저 테스트는 미리보기에서 현재 로그인한 앱 사용자로 실행됩니다. 미리보기가 로그아웃되어 있으면 Lovable이 앱에 로그인할 수 있습니다. 클릭하거나 트리거해서는 안 되는 작업이나 영역이 있다면 명시적으로 알려주세요.
• 내장 백엔드(Cloud)를 사용하는 일부 앱은 test 및 live 환경 기능을 사용합니다. 이 기능이 활성화되면 브라우저 테스트는 test 환경의 프로젝트 미리보기에서 실행됩니다.

로그인 뒤 페이지 테스트

브라우저 테스트가 로그인 화면에 도달하고 앱의 로그인이 내장 백엔드(Cloud)에서 실행되는 경우, Lovable은 로그인한 뒤 대시보드나 계정 페이지처럼 로그인 뒤에 있는 페이지를 테스트할 수 있습니다. Lovable이 어떤 앱 사용자로 로그인하는지는 앱과 요청에 따라 달라집니다.

• 앱에 사용자가 정확히 한 명이면 Lovable은 그 사용자로 로그인합니다.
• 본인으로 확인해 달라고 요청하면 Lovable 계정 이메일과 일치하는 앱 사용자로 로그인합니다.
• 특정 사람으로 로그인해 달라고 요청하면 Lovable은 먼저 프로젝트 채팅에서 승인을 요청합니다. 워크스페이스 관리자와 소유자만 특정 사람으로 로그인하도록 요청할 수 있으며, Lovable은 그 사람의 비밀번호를 사용하거나 변경하지 않습니다.
• 앱에 사용자가 여러 명이고 어떤 사용자를 쓸지 말하지 않았다면 Lovable은 로그인하기 전에 프로젝트 채팅에서 물어봅니다.

자체 외부 Supabase 프로젝트나 다른 인증 provider를 사용하는 앱은 로그인하지 않아도 되는 페이지만 테스트할 수 있습니다.

브라우저 테스트 실행 중 발생하는 일

Details view(Lovable이 작업하는 동안 채팅의 활동 카드를 클릭하면 열리는 상세 보기)에서 테스트 과정을 따라갈 수 있습니다. 여기서 에이전트는 다음을 수행합니다.

• 버튼 클릭이나 페이지 이동과 같이 수행 중인 단계 표시
• 앱 스크린샷 캡처
• 상호작용의 URL과 결과 표시
• 작동한 것과 작동하지 않은 것 요약

브라우저 테스트는 에이전트가 실제 브라우저와 상호작용하고 결과를 검증하기 때문에 일반 작업보다 느립니다.

예시: 브라우저 테스트 수동 트리거

아래 예시는 프로필 페이지 문제를 발견한 후 브라우저 테스트를 수동으로 트리거하는 방법을 보여줍니다. Lovable에게 문제를 재현하고, 수정한 다음, 수정이 작동하는지 확인하도록 요청하세요. 예.

프로필을 클릭하면 페이지가 충돌해. 브라우저에서 재현하고, 수정한 다음, 수정이 작동하는지 확인해줘.

제한 사항

• canvas 기반 또는 그리기 도구와 상호작용할 수 없습니다

• 표준 파일 입력은 작동하지만, 커스텀이나 복잡한 파일 업로드 위젯은 신뢰할 수 없을 수 있습니다

• 드래그 앤 드롭 상호작용을 수행할 수 있지만, 클릭보다 신뢰성이 낮습니다

• 클립보드 작업과 텍스트 선택을 수행할 수 있지만, 신뢰할 수 없습니다

• 미묘한 시각적 디자인 세부 사항이나 색상 차이를 평가하는 데 신뢰할 수 없습니다

• 텍스트 레이블이 있는 버튼에 비해 아이콘 전용 버튼과 상호작용하는 데 어려움이 있을 수 있습니다

• 로그인 상태 테스트는 내장 백엔드(Cloud)가 필요합니다. 자체 외부 Supabase 프로젝트나 다른 인증 제공자를 사용하는 앱은 로그인이 필요 없는 페이지만 테스트할 수 있습니다

FAQ

관련 주제

• Lovable와 채팅하며 앱 빌드하기
• 앱 테스트 및 검증하기
• Lovable에서 앱 미리 보고 테스트하기
• 앱에 결제 기능 추가하기
• Aikido에 앱 연결하기