프런트엔드 개발자를 위한 테스트 가이드

에란 킨스브루너 지음 | 김완섭 옮김

제이펍 2023년 09월 15일 출간 종이책 : 2023년 07월 07일 출간

작품소개

책소개

웹 애플리케이션을 테스트하는 것은 프런트엔드 개발자에게 결코 쉬운 일이 아니다. 다만, 테스트 자동화 프레임워크의 기능을 적극 활용한다면 그 수고를 최소한으로 줄일 수 있다. 다행히도 웹 애플리케이션이 복잡해지면서 테스트 자동화도 함께 발전하고 있다. 이 책은 셀레늄, 사이프러스, 퍼피티어, 플레이라이트 같은 강력한 프레임워크를 소개하고, 해당 프레임워크의 테스트 커버리지 기능을 활용하기 위한 가이드 역할을 한다. 현재 시장을 주도하고 있는 4개 주요 오픈소스 테스트 자동화 프레임워크의 고유한 기능과 그 장단점을 살펴보고, 앱의 변경에도 중단되지 않는 테스트를 생성하도록 각 프레임워크를 설정하는 방법을 알아보자.

목차

지은이·옮긴이 소개 xi
기술 감수자 소개 xii
옮긴이 머리말 xiii
베타리더 후기 xiv
추천사 xvi
이 책에 대하여 xvii

PART I 프런트엔드 웹 테스트 소개
CHAPTER 1 특정 브라우저에 종속되지 않는 테스트 방법론 3
1.1 웹 개발 환경 3
1.2 웹 애플리케이션의 유형 이해하기 5
__1.2.1 전통적 웹 애플리케이션 5
__1.2.2 반응형 웹 애플리케이션 6
__1.2.3 프로그레시브 웹 애플리케이션 8
1.3 웹 애플리케이션을 위한 테스트 유형 10
__1.3.1 웹 애플리케이션의 기능성 테스트 10
__1.3.2 웹 애플리케이션의 비기능성 테스트 11
1.4 앱 개발과 테스트를 위한 헤드 및 헤드리스 브라우저 이해하기 13
__1.4.1 헤드 브라우저와 헤드리스 브라우저 선택하기 13
__1.4.2 헤드리스 브라우저 테스트 프레임워크 16
1.5 요약 19

CHAPTER 2 프런트엔드 웹 개발자가 직면하는 도전 과제 21
2.1 웹 개발 시 직면하는 도전 과제 22
__2.1.1 품질 vs 속도 23
2.2 웹 개발자들의 대상 플랫폼 선택 문제 24
2.3 웹 애플리케이션 개발 시 비기능성 문제 29
__2.3.1 성능 문제 29
__2.3.2 접근성 문제 30
2.4 웹 애플리케이션의 규정 문제 31
2.5 요약 34

CHAPTER 3 대표적인 테스트 자동화 프레임워크 35
3.1 웹 테스트 시장의 개요 36
3.2 셀레늄 프레임워크 시작하기 38
__3.2.1 셀레늄 웹드라이브 설치하기 39
__3.2.2 셀레늄 그리드 실행하기 42
3.3 사이프러스 프레임워크 시작하기 45
__3.3.1 사이프러스의 주요 기능 47
3.4 구글 퍼피티어 프레임워크 시작하기 50
3.5 마이크로소프트 플레이라이트 프레임워크 시작하기 53
3.6 요약 55

CHAPTER 4 테스트 담당자와 유형별 테스트 자동화 프레임워크의 선택 57
4.1 필요한 환경 및 코드 58
4.2 웹 테스트 담당자의 개요 58
4.3 테스트 자동화 프레임워크 선택 시 고려해야 할 요소 및 사례 60
__4.3.1 커뮤니티 기반 60
__4.3.2 테스트 확장성 61
__4.3.3 툴 스택 연동 및 플러그인 61
__4.3.4 사용 및 도입의 용이성 61
__4.3.5 재사용성 및 유지관리 62
__4.3.6 보고서, 테스트 분석, 지능형 62
4.4 테스트 자동화 평가 매트릭스 63
4.5 요약 66

CHAPTER 5 주요 프런트엔드 웹 개발 프레임워크의 소개 67
5.1 필요한 환경 및 코드 68
5.2 주요 웹 개발 프레임워크의 소개 68
5.3 웹 개발 프레임워크의 선택 가이드라인 69
__5.3.1 리액트 70
__5.3.2 AngularJS 74
__5.3.3 Vue.js 76
__5.3.4 Ember.js 78
__5.3.5 스벨트 80
5.4 요약 81

PART II 웹 애플리케이션 개발자를 위한 지속적인 테스트 전략
CHAPTER 6 웹 애플리케이션을 위한 개발 테스트 전략과 핵심 고려사항 85
6.1 웹 애플리케이션 테스트 계획과 전략 시 핵심 고려사항 85
__6.1.1 대상 사용자 알기 87
__6.1.2 테스트 계획 수립하기 87
__6.1.3 툴 스택 및 환경 준비하기 88
__6.1.4 품질 기준 및 목표 정하기 88
__6.1.5 일정 88
__6.1.6 실행, 감시, 측정, 문서화 88
6.2 지속적인 테스트 전략의 성공 여부 측정 89
6.3 사례: 실제 웹 애플리케이션의 테스트 전략 91
6.4 요약 93

CHAPTER 7 주요 자바스크립트 기반 테스트 자동화 프레임워크의 핵심 기능 95
7.1 테스트 자동화 프레임워크의 기능 비교 95
__7.1.1 시각적 테스트 96
__7.1.2 API 테스트 99
__7.1.3 지원하는 개발 언어 101
__7.1.4 모바일 장치 테스트 102
__7.1.5 성능 테스트 104
__7.1.6 접근성 테스트 107
__7.1.7 네트워크 제어 테스트와 목 서비스 109
__7.1.8 웹 요소 처리 111
__7.1.9 CI/CD 통합 116
7.2 테스트 자동화 프레임워크의 재평가 116
7.3 요약 117

CHAPTER 8 웹 애플리케이션의 테스트 커버리지 측정 119
8.1 코드 커버리지 및 테스트 커버리지 소개 119
__8.1.1 테스트 커버리지 120
__8.1.2 코드 커버리지 121
8.2 웹 애플리케이션 개발자를 위한 자바스크립트 코드 커버리지 툴 122
__8.2.1 이스탄불과 사이프러스를 사용한 자바스크립트 코드 커버리지 측정 123
8.3 테스트 커버리지를 사용한 코드 커버리지 보완 127
8.4 요약 127

PART III 프 런트엔드 자바스크립트 테스트 자동화 프레임워크 가이드
CHAPTER 9 셀레늄 프레임워크 사용하기 131
9.1 필요한 환경 및 코드 132
9.2 셀레늄 프레임워크와 개별 컴포넌트 이해하기 132
__9.2.1 셀레늄 웹드라이버 132
__9.2.2 셀레늄 그리드 133
__9.2.3 셀레늄의 고급 기능 135
__9.2.4 셀레늄의 다양한 테스트 방법 140
9.3 셀레늄 프레임워크의 미래 145
9.4 요약 146

CHAPTER 10 사이프러스 프레임워크 사용하기 147
10.1 필요한 환경 및 코드 148
10.2 사이프러스 시작하기 148
__10.2.1 사이프러스 GUI 148
__10.2.2 사이프러스 IDE와 명령줄 실행 150
10.3 사이프러스 고급 테스트 자동화 기능 153
__10.3.1 사이프러스 테스트 재시도 154
__10.3.2 사이프러스의 스텁, 스파이, 클록 사용하기 155
__10.3.3 사이프러스와 CI 연동하기 157
__10.3.4 컴포넌트 테스트 158
__10.3.5 사이프러스 스튜디오 159
__10.3.6 사이프러스 플러그인 162
__10.3.7 사이프러스 API 테스트 164
10.4 사이프러스 프레임워크의 미래 165
10.5 요약 166

CHAPTER 11 플레이라이트 프레임워크 사용하기 169
11.1 필요한 환경 및 코드 170
11.2 플레이라이트 시작하기 170
11.3 플레이라이트 고급 테스트 자동화 기능 173
__11.3.1 플레이라이트 검사기 174
__11.3.2 모바일 장치 에뮬레이션하기 175
__11.3.3 플레이라이트 테스트 애너테이션 177
__11.3.4 플레이라이트 API 테스트 178
__11.3.5 플레이라이트 어서션 179
__11.3.6 플레이라이트 네트워크 모크 180
__11.3.7 플레이라이트 POM 181
__11.3.8 플레이라이트 테스트 보고서 181
__11.3.9 플레이라이트 테스트 실행기 182
__11.3.10 플레이라이트 추적 뷰어 183
__11.3.11 플레이라이트 고급 설정 184
__11.3.12 플레이라이트와 CI 연동 187
11.4 플레이라이트 프레임워크의 미래 188
11.5 요약 190

CHAPTER 12 퍼피티어 프레임워크 사용하기 191
12.1 필요한 환경 및 코드 192
12.2 퍼피티어 시작하기 192
12.3 퍼피티어의 고급 테스트 자동화 기능 196
__12.3.1 퍼피티어 네임스페이스 196
__12.3.2 퍼피티어의 웹 요소 사용하기 197
__12.3.3 퍼피티어 부하 테스트 200
__12.3.4 퍼피티어와 큐컴버 BDD 201
__12.3.5 퍼피티어 접근성 테스트 202
__12.3.6 퍼피티어 웹 애플리케이션 추적 204
__12.3.7 퍼피티어 API 테스트 204
__12.3.8 퍼피티어 구글 개발자 도구 205
__12.3.9 퍼피티어와 CodeceptJS 연동 206
__12.3.10 퍼피티어 테스트와 CI 연동 208
12.4 퍼피티어 프레임워크의 미래 209
12.5 요약 211

CHAPTER 13 로코드 테스트 자동화로 코드 기반 테스트 보완하기 213
13.1 로코드/코드리스 테스트 툴의 핵심적인 기능 214
13.2 오픈소스 코드리스 툴의 개요 216
__13.2.1 오픈소스 코드리스 툴의 종류 217
13.3 웹 애플리케이션용 주요 코드리스 테스트 툴 224
__13.3.1 퍼펙토 스크립트리스 웹의 개요 224
__13.3.2 테스팀 코드리스 웹 툴의 개요 227
__13.3.3 메이블 코드리스 웹 애플리케이션 툴 개요 232
13.4 요약 237

CHAPTER 14 마치며 239
14.1 이 책을 통해 얻을 수 있는 것 240
14.2 유용한 참고문서 및 북마크 241
__14.2.1 사이프러스 프레임워크 관련 241
__14.2.2 플레이라이트 프레임워크 관련 242
__14.2.3 셀레늄 프레임워크 관련 242
__14.2.4 퍼피티어 프레임워크 관련 242

찾아보기 244

책 속으로

최신 웹 기술과 반응형, 프로그레시브형을 포함한 웹 애플리케이션 유형에 대해 살펴본다. 특히 웹 개발자에게 영향을 주는 주요 기술 동향과 이와 관련된 다양한 테스트 유형에 대해 다룬다. 이런 웹 기술 관련 동향을 통해 다양한 프레임워크에 기반한 웹 애플리케이션의 기술을 이해할 수 있을 것이다. 반응형 웹과 프로그레시브형 웹, 플러터, 리액트 네이티브 등도 앞으로 소개할 애플리케이션 유형의 일부다. 이 장에서는 주요 애플리케이션의 유형과 각각의 특징, 그리고 서로 어떤 차이가 있는지 알아보며, 이를 통해 프런트엔드 개발자들이 상황에 맞는 적합한 테스트 기술을 선별해서 사용할 수 있도록 도움을 주고자 한다. (3쪽)

프런트엔드 웹 개발자에게 주어지는 아주 어려운 과제가 있다. 그것은 바로 웹 앱이 모든 디지털 채널, 즉 모든 웹 브라우저나 모바일에서 성능 및 기능에 아무 문제없이 실행돼야 한다는 것이다. 새로운 웹 브라우저 버전이 매달 배포되고 있는 시대에 수많은 스마트폰 종류와 OS 버전을 지원하는 앱을 만드는 것은 매우 어려운 작업이다. 프런트엔드 웹 개발자는 앱의 품질과 속도뿐만 아니라 안정성 문제와도 끊임없이 씨름해야 한다. (21쪽)

테스트 자동화 프레임워크와 관련해서 프런트엔드 개발자가 선택할 수 있는 폭은 매우 넓다. 오픈소스 커뮤니티는 기존 기술을 활용하거나 혁신하는 방법으로 테스트 프레임워크를 자동화하고 있으며 이를 통해 테스트 범위를 확장시켜 심도 있는 테스트를 실현하고 있다. 이 장에서는 시장을 선도하고 있는 4개의 주요 오픈소스 프레임워크를 다루며 각각의 사용법도 간단히 살펴보도록 한다. 애플리케이션 코드를 테스트할 수 있는 툴이 다양하므로, 웹 개발자는 주요 프레임워크의 아키텍처와 기본을 이해하고 상황에 맞는 툴을 선택하는 것이 중요하다. (35쪽)

테스트 자동화 프레임워크의 선택은 소프트웨어 개발 주기 관점에서 매우 중요한 과정이다. 테스트 자동화 프레임워크는 다양한 목표를 가지고 도입되며, 개발자뿐만 아니라 테스트 엔지니어의 서로 다른 요구를 충족시킬 수 있어야 한다. 특히 웹 애플리케이션 테스트는 프레임워크의 수가 많고 특징도 너무 다르다. 따라서 필요한 사항을 모두 고려하면서 현재 및 미래의 사용자 요구를 만족시킬 수 있는 프레임워크 선택 방법이 제시돼야 한다. (57쪽)

애자일과 데브옵스 팀은 일 단위 또는 주 단위의 릴리스 주기를 가지고 있으므로 마인드맵과 테스트 활동이 반드시 전략 안에 포함돼야 한다. 이를 통해 이전 버전과 현재 버전의 웹 애플리케이션 차이를 분석할 수 있고 CI 파이프라인 내의 테스트뿐만 아니라 그 외의 전체 테스트 범위를 정하고 최적화할 수 있다. 또한, 웹사이트가 변경되지 않았더라도 이 책의 앞부분에서 배웠듯이 새로운 웹 플랫폼 및 모바일 플랫폼이 몇 주 단위로 계속 등장하기 때문에 이를 완벽하게 지원해야 하며 그것이 바로 지속적인 테스트의 의미다. 즉, 고품질의 웹사이트를 보장하기 위해 지속적으로 테스트를 실행하고 자동화해야 하는 것이다. (93쪽)

지속적으로 소프트웨어를 배포하려면 프런트엔드 개발자와 SDET가 함께 테스트 시나리오를 평가하고 결과를 분석하고 테스트를 관리해야 한다. 또한, 시장에 나와 있는 오픈소스 툴과 유료 버전 툴을 모두 알고 있어야 테스트 커버리지와 기능을 향상시키기 위한 좋은 의사 결정을 할 수 있고 다양한 기술을 결합할 수 있다. (239쪽)

출판사 서평

웹 개발 기술이 끊임없이 변하는 요즘, 프런트엔드 개발자가 모든 웹 브라우저나 수많은 모바일 기기에서 버그 없이 완벽하게 실행되는 웹 애플리케이션을 개발하기는 상당히 어려운 일이다. 게다가 정해진 배포 주기 속도를 맞추며 품질의 균형까지 맞춰야 하는 환경에서 직접 웹 화면을 모두 테스트하는 것은 현실적으로 불가능에 가깝다. 이때 필요한 것이 테스트 자동화다. 테스트 자동화는 전체적인 품질을 유지하게 해주므로 소프트웨어 개발 속도에 기여하는 핵심 요소라고 할 수 있다.

이 책은 프런트엔드 개발자가 선택할 수 있는 테스트 자동화 프레임워크를 다룬다. 시장을 선도하는 4개의 주요 오픈소스 프레임워크인 셀레늄, 사이프러스, 퍼피티어, 플레이라이트를 중심으로 현장에서 테스트 자동화를 바로 적용할 수 있을 정도로 자세히 설명한다. 각 프레임워크의 기본적인 사용법부터 고급 테스트 자동화 기능까지 살펴보며, 상황에 맞는 최적의 테스트 자동화 프레임워크를 선택하는 방법도 안내하고 있다. 이 책을 통해 주요 테스트 자동화 프레임워크를 익히고, 본인이 개발하는 애플리케이션에 적합한 테스트 전략을 세워 개발 속도와 품질까지 모두 잡는 유능한 개발자가 되길 바란다.

작가정보

저자(글) 에란 킨스브루너

(Eran Kinsbruner)
퍼포스 소프트웨어의 수석 디렉터. DevOps.com이 선정한 2021년 데브옵스 에반젤리스트 중 한 명이기도 하다. 썬 마이크로시스템즈, 뉴스타, 텍사스 인스트루먼트, 제너럴 일렉트릭 등에서 수년간 개발 및 테스트 업무를 담당했으며, 소프트웨어 개발 및 테스트 커뮤니티에도 활발하게 참여하고 있다. 저서로는 《The Digital Quality Handbook(디지털 품질 핸드북)》, 《Continuous Testing for DevOps Professionals(DevOps 전문가를 위한 지속적 테스트)》, 《Accelerating Software Quality(소프트웨어 품질 가속화)》가 있다.

번역 김완섭

약 15년간 일본, 한국, 싱가포르에서 IT 및 GIS/LBS 분야 업무를 담당했다. 일본에서는 일본 정부 기관을 대상으로 한 시스템 통합(SI) 업무를 담당했으며, 야후 재팬으로 직장을 옮겨 야후 맵 개발 담당 시니어 엔지니어로 근무했다. 한국에서는 SK에서 티맵 등 내비게이션 지도 데이터 담당 매니저로 근무했으며, 현재는 싱가포르에서 독일계 회사의 솔루션 아키텍트로 근무하고 있다. 저서로는 《나는 도쿄 롯폰기로 출근한다》(삶과지식, 2014)가 있으며, 역서로는 《21개의 작고 재미난 파이썬 프로젝트》(2021), 《그림으로 공부하는 IT 인프라 구조, 개정판》(이상 제이펍, 2020) 등 40여 종이 있다.