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

책의 목차를 보는데, 처음보는 기술들이 많이 보였습니다. 기술이라고 표현한것은 처음보는 오픈소스 SW들에 대한 부분입니다.

이런 생각을 들었습니다. 블랙박스테스트를 하는데 이것이 프런트엔드 테스트라고 생각해도 될까?

사용자 화면에서 보이는 것을 뒤에 이루어지는 비지니스 로직을 검증하지 않았지만, 실제 화면에 입력되는 input value와 실제 화면에 보여지는 출력 value에 대해서 눈으로 확인하는것이니 100% 동일하지는 않지만, 비슷하다고 불수도 있지 않을까?

 

요즘은 자동화 AutomationTool들도 많이 나와 있습니다. 하지만, 해당 Tool을 실제 사용하기 위해서는 역시 따로 개발을 해야 합니다.

쉬운것이 없습니다. 책을 읽기전의 지식으로 "화면에 있는 것을 기준으로 동작테스트를 진행"하려고 한다면, 크롤링 기술 기반의 셀레니움 정도가 생각이 납니다. 하지만 요즘의 화면은 반응형 웹, 모두 동적 dom을 핸들링하고 있고, 기본적으로 Ajax등 비동기 동작을 하고 React, Vue등의 프런트프레임워크를 사용하기 때문에 실제 적용을 해보면 많은 시행착오가 발생할 것으로 생각이 됩니다.

 

 

• 우선 책에서 어떠한 개념으로 프런트엔드 테스트를 바라보는지 살펴보고 싶습니다.
• 활용가능한 다양한 SW를 살펴보고, 실제 업무에 적용가능한 것들이 어떠한 것이 있는지 체크해보고 싶습니다.
• 테스트 개념에 대해서도 다시한번 remind하고 개념을 다시 살펴보고 싶습니다.

 

PART I 프런트엔드 웹 테스트 소개

PART II 웹 애플리케이션 개발자를 위한 지속적인 테스트 전략

PART III 프 런트엔드 자바스크립트 테스트 자동화 프레임워크 가이드

총 3개의 파트로 크게 구성되어 있습니다. 

 

 

■ 웹테스트 

https://npmtrends.com/cypress-vs-playwright-vs-puppeteer-vs-selenium-webdriver

cypress vs playwright vs puppeteer vs selenium-webdriver | npm trends

 

1년 기준으로 사용빈도를 조회해보면, cypress와 puppeteer가 가장 많이 사용되는것을 볼수 있다.

비교 트랜드

 

- 프레임워크 4대장 소개 : p.37의 내용인데 위사항만 보면 처음으로 시도해볼만한 프레임워크는 cypress가 눈에 들어온다.

책에서는 위 4가지 모두 실습하는 방법이 소개됩니다.

 

 

■ cypress 시작해보자 (p.45)

# 설치
npm install cypress

# GUI실행
npx cypress open

- 참고 url

https://example.cypress.io/

Cypress.io: Kitchen Sink

https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test

Writing Your First E2E Test | Cypress Documentation

 

https://docs.cypress.io/guides/references/cypress-studio (처음 접하는 분들을 위한 cypress tool)

Cypress Studio | Cypress Documentation

 

https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab/related?hl=ko  (구글 플로그인) 

Cypress Recorder

 

- 왼쪽 화면을 보면, 단위테스트 하는 것처럼 녹색 Pass다 된 화면이다.

 

 

■ 4가지 프레임워크중에 어떠한 것을 사용해야 할것인가?

대표적으로 많이 사용하는 것이 있지만, 회사마다 / 업무마다 모두 상이합니다.

그래서 우리는 선택을 해야 합니다. p.64/p65에 걸쳐서 각 기능별 비교표를 제공합니다.

이것을 기준으로 프레임워크를 선택하는데 바로미터를 제공합니다.

 

 

■ 프런트앤드 프레임워크 소개 및 기타 내용

요즘 많이 사용하고 있는 frontend framework를 소개합니다.

기본 설치 및 특징점, 테스트시 참고해야 하는 부분들이 설명되어집니다.

해당 부분은 frondend개발자 분이 보시면, 기초적인 내용일수도 있지만 실제 테스트를 하는 입장에서는 해당 기술요소를 모두다 알기가 쉽지 않습니다. 또한 frondend 개발자분도 아래의 모든 사항을 다 알수없습니다.

이러한 소개는 프런트앤트 테스트를 할때, 개념을 잡아주고 실습해볼수 있는 좋은 내용구성 같습니다.

 

 

 

6장에서는 테스트를 하기 위해서 필요한 테스트 기법, 전략등에 대해서 소개됩니다.

내용이 진부하지 않고, 웹을 테스트 하기 위한 소개 및 이론이여서 테스트 조직에서 기준을 잡을때 참고되는 부분이 있습니다.

 

PART3에서는 위에서 언급된 4가지 테스트 도구에 대해서 조금더 심화 과장을 설명하고, 차이점을 비교하는 구성으로 되어 있습니다.

프런트엔드 테스트를 위해서 좋은 책이 출간된것 같습니다. 보통 이렇게 4가지 기술을 처음부터 끝가지 비교해가면서 소개하는 구성이 쉽지 않은데 이 책을 통해서 현재 지금 자신에게 가장 맞는 테스트툴을 찾을수 있는 정보와 설명을 충분히 제공하는 책이라고 생각합니다.

 

"제이펍에서 책을 제공받아 작성된 서평입니다."