안정된 서비스 제공, 사용자 경험 향상, 손쉬운 유지보수, 웹 브라우저 간 호환성 확인, 보안 강화
고려 사항: 규모와 복잡성, 테스트 목표, 전문성 확보, 예산
수동 테스트
👍🏻 초기에도 테스트 O, 돌발 상황 유연하게 대응, 사용자 관점에서 테스트
👎🏻 많은 시간 소요, 일관되지 않은 테스트 결과, 비용 발생
자동화 테스트
👍🏻 짧은 시간 소요, 일관된 테스트 결과, 비용 절감
👎🏻 초기 비용 발생, 제한된 범위, 유지보수 필요
- 유닛 테스트: 웹 애플리케이션에서 독립적으로 분리할 수 있는 가장 작은 코드 단위를 테스트
- 통합 테스트: 여러 기능을 통합해 한 번에 테스트
- E2E 테스트: 웹 애플리케이션을 처음부터 끝까지 실행해보면서 올바르게 동작하는지 테스트
- 시각적 회귀 테스트: 웹 애플리케이션의 시각적인 디자인과 레이아웃 확인
- 접근성 테스트: 시각, 청각, 운동, 인지 장애가 있는 사람이 사용할 때 불편한 점이 없는지 테스트
- 성능 테스트: 데이터를 불러오거나 사용자 입력 양식을 전송할 때 속도가 느려 불편하지 않는지 테스트
개발자 도구
Elements: html. css 코드 확인 & 코드 수정
Console: 자바스크립트로 코딩 시 디버깅 하는 용도
Network: 현재 웹에 나타난 페이지를 불러오는 데 사용한 모든 HTTP 요청 및 응답 표시
Sources: 웹에 나타난 페이지의 모든 리소스 표시
Performance: 웹에 나타난 페이지의 성능을 측정할 때 사용
Memory: 웹 페이지의 메모리 누수 여부
Lighthouse: 성능, 접근성, 모범 사례, 검색 엔진 최적화, 프로그레시브 웹 앱 측면 품질 검사
Application: 스토리지, 캐시, 백그라운드 서비스, 프레임 등 테스트
Jest: 유닛 테스트 도구, Mocha: 통합 테스트 도구, Cypress: E2E 테스트 도구, Percy: 시각적 회귀 테스트 도구, aXe: 접근성 테스트 도구, Lighthouse: 성능 테스트 도구