교차 브라우저 테스팅
이 모듈은 웹 프로젝트를 다양한 브라우저에서 테스트하는 것에 중점을 둡니다. 주요 타겟 사용자층을 식별하는 방법(예: 어떤 사용자, 브라우저, 기기를 가장 신경 써야 하는가?), 테스트를 수행하는 방법, 다양한 코드 유형에서 직면하게 될 주요 문제와 이를 완화하는 방법, 문제를 테스트하고 해결하는 데 가장 유용한 도구, 그리고 테스트 속도를 높이기 위해 자동화를 사용하는 방법에 대해 다룹니다.
전제조건
여기서 설명된 도구를 사용하기 전에 기본적인 HTML, CSS, JavaScript 언어를 먼저 학습하는 것이 좋습니다.
안내서
- 교차 브라우저 테스트 소개
-
이 글은 "교차 브라우저 테스트란 무엇인가?", "가장 일반적으로 직면하는 문제 유형은 무엇인가?", "문제를 테스트하고 식별하며 수정하는 주요 접근 방식은 무엇인가?"와 같은 질문에 답하면서 교차 브라우저 테스트 주제에 대한 개요를 제공합니다.
- 테스트 수행 전략
-
다음으로, 테스트 수행에 대해 심도 있게 다루며 타겟 사용자층을 식별하는 방법(예: 어떤 브라우저, 기기 및 기타 세그먼트를 테스트해야 하는지), 저기술 테스트 전략(다양한 기기와 가상 머신을 구비하고 필요할 때 즉흥적으로 테스트 수행), 고기술 전략(자동화, 전용 테스트 앱 사용), 사용자 그룹과의 테스트 등을 살펴봅니다.
- 일반적인 HTML 및 CSS 문제 처리
-
본격적으로 HTML 및 CSS 코드에서 발생할 수 있는 일반적인 교차 브라우저 문제를 살펴보고, 문제를 방지하거나 발생한 문제를 해결하는 데 사용할 수 있는 도구를 소개합니다. 여기에는 코드 린팅, CSS 접두사 처리, 브라우저 개발자 도구를 사용한 문제 추적, 브라우저에 기능을 추가하기 위한 폴리필 사용, 반응형 디자인 문제 해결 등이 포함됩니다.
- 일반적인 JavaScript 문제 처리
-
일반적인 교차 브라우저 JavaScript 문제와 그 해결 방법을 살펴봅니다. 여기에는 브라우저 개발자 도구를 사용한 문제 추적 및 해결, 폴리필 및 라이브러리를 사용한 문제 해결, 최신 JavaScript 기능을 구형 브라우저에서 작동하게 하는 방법 등이 포함됩니다.
- 일반적인 접근성 문제 처리
-
다음으로 접근성 문제에 대해 다루며, 일반적인 문제, 간단한 테스트 방법, 접근성 문제를 찾기 위한 감사/자동화 도구 활용 방법에 대한 정보를 제공합니다.
- 기능 감지 구현
-
기능 감지는 브라우저가 특정 코드 블록을 지원하는지 여부를 파악하고, 지원 여부에 따라 다른 코드를 실행하여 모든 브라우저에서 충돌하거나 오류가 발생하는 대신 항상 작동하는 환경을 제공할 수 있도록 하는 것입니다. 이 글에서는 간단한 기능 감지 코드를 작성하는 방법, 구현 속도를 높이기 위해 라이브러리를 사용하는 방법,
@supports
와 같은 기능 감지를 위한 기본 기능에 대해 설명합니다. - 자동화된 테스트 소개
-
여러 브라우저와 기기에서 하루에도 여러 번 수동으로 테스트를 실행하는 것은 지루하고 시간이 많이 소요될 수 있습니다. 이를 효율적으로 처리하기 위해 자동화 도구에 익숙해지는 것이 좋습니다. 이 글에서는 사용 가능한 도구, 작업 실행기(task runner)를 사용하는 방법, Sauce Labs 및 Browser Stack과 같은 상용 브라우저 테스트 자동화 앱을 사용하는 기본 사항에 대해 살펴봅니다.
- 자체 테스트 자동화 환경 설정
-
이 글에서는 Selenium/WebDriver 및 Node용 selenium-webdriver와 같은 테스트 라이브러리를 사용하여 자체 자동화 환경을 설치하고 테스트를 실행하는 방법을 설명합니다. 또한 이전 글에서 논의한 상용 앱과 로컬 테스트 환경을 통합하는 방법도 살펴봅니다.