Browser로 테스트하기

학습 목표

Browser에서 웹 애플리케이션을 실행할 수 있다
각 기능을 테스트할 수 있다
문제를 발견하고 수정 요청할 수 있다

1. Browser에서 앱 열기

1.1 방법 1: Browser 탭 사용

Editor 하단에서 Browser 탭 클릭
주소창에 파일 경로 입력

file:///Users/사용자이름/Documents/todo-app/index.html

Windows의 경우

file:///C:/Users/사용자이름/Documents/todo-app/index.html

1.2 방법 2: 파일 탐색기에서 열기

컴퓨터의 파일 탐색기 열기
todo-app 폴더로 이동
index.html 파일을 더블클릭
기본 브라우저에서 열림

그림 10-6: Browser에서 Todo 앱 확인

2. 기능 테스트

💡 테스트의 핵심 원칙

기능이 "작동한다"고 느껴져도 바로 넘어가지 마세요. 왜, 어떻게 작동하는지 확인하는 습관이 중요합니다.

확인 항목	방법
코드 이해	Review Changes에서 변경 내용 검토
실제 동작	Browser에서 직접 테스트
의도 확인	Walkthrough에서 변경 요약 확인

2.1 테스트 1: 할 일 추가

입력 필드에 "첫 번째 할 일" 입력
추가 버튼 클릭 (또는 Enter)
목록에 항목이 추가되는지 확인

확인 사항

입력한 텍스트가 목록에 표시되는가?
입력 필드가 비워지는가?
빈 텍스트로 추가하면 어떻게 되는가?

2.2 테스트 2: 할 일 완료 표시

추가된 항목의 체크박스 클릭
완료 상태로 변경되는지 확인

확인 사항

체크박스가 체크되는가?
텍스트에 취소선이 표시되는가?
다시 클릭하면 완료 해제되는가?

2.3 테스트 3: 할 일 삭제

항목의 삭제 버튼 클릭
목록에서 제거되는지 확인

확인 사항

항목이 목록에서 사라지는가?
다른 항목에 영향이 없는가?

2.4 테스트 4: 데이터 저장 (로컬 스토리지)

여러 개의 할 일 추가
일부 항목 완료 표시
페이지 새로고침 (F5 또는 Cmd/Ctrl + R)
데이터가 유지되는지 확인

확인 사항

새로고침 후에도 할 일 목록이 유지되는가?
완료 상태도 유지되는가?

그림 10-7: Todo 앱 기능 테스트

3. 문제 발견 시 대응

3.1 문제 유형별 대응

문제 유형	확인 방법	대응
버튼이 작동 안 함	개발자 도구 콘솔 확인	JavaScript 오류 수정 요청
디자인이 깨짐	화면 레이아웃 확인	CSS 수정 요청
데이터가 저장 안 됨	새로고침 후 확인	localStorage 코드 확인 요청

3.2 개발자 도구로 오류 확인

Browser에서 F12 또는 Cmd/Ctrl + Shift + I
Console 탭 선택
빨간색 오류 메시지 확인

오류가 있다면 내용을 복사하여 Agent에게 전달합니다.

3.3 Agent에게 수정 요청

문제를 발견하면 Agent에게 구체적으로 알려줍니다.

Todo 앱에서 다음 문제가 발생합니다

문제: 추가 버튼을 클릭해도 할 일이 추가되지 않습니다.
콘솔 오류: "Uncaught TypeError: Cannot read property 'value' of null"

이 오류를 수정해주세요.

4. Browser Subagent 활용

Chapter 5에서 배운 Browser Subagent를 활용하면 Agent가 직접 테스트할 수 있습니다.

4.1 Browser Subagent로 테스트 요청

Browser에서 todo-app의 index.html을 열고
다음 테스트를 수행해주세요.

1. "테스트 항목 1" 추가
2. "테스트 항목 2" 추가
3. 첫 번째 항목 완료 표시
4. 두 번째 항목 삭제
5. 페이지 새로고침 후 데이터 확인

각 단계의 결과를 알려주세요.

4.2 테스트 결과 확인

Browser Subagent가 테스트를 수행하면

Screenshots: 각 단계의 스크린샷
Browser Recordings: 테스트 과정 녹화
결과 보고: 성공/실패 여부

그림 10-8: Todo 앱 기능 테스트1

5. 디자인 확인

5.1 반응형 테스트

Browser 창 크기를 줄여보기
모바일 크기에서도 잘 보이는지 확인
버튼과 입력 필드가 사용하기 편한지 확인

5.2 디자인 수정 요청

디자인 개선이 필요하면

Todo 앱의 디자인을 수정해주세요

- 버튼 크기를 더 크게
- 모바일에서 입력 필드가 화면 너비에 맞게
- 완료된 항목은 회색으로 표시

6. 테스트 체크리스트

모든 테스트를 완료했는지 확인하세요.

기본 기능

할 일 추가가 작동한다
완료 표시가 작동한다
삭제가 작동한다
데이터가 저장된다 (새로고침 후 유지)

사용성

빈 텍스트 추가 시 적절히 처리된다
Enter 키로 추가할 수 있다
버튼이 명확하게 보인다

디자인

전체적으로 깔끔하다
완료 항목이 구분된다
모바일에서도 사용 가능하다

그림 10-9: Todo 앱 기능 테스트2

7. 다음 단계

테스트가 완료되었으면 프로젝트를 마무리하고 추가 기능을 구현해봅시다.

프로젝트 완성 및 확장