E2E 테스트 자동화

어떻게 해야 e2e 테스트를 좀 더 늘려서 통합 테스트, 유닛테스트를 좀 더 줄이거나 효율적으로 할 수 있을까? 발표에서 tdd, 테스트 파이프라인 자동화는 안 다룬다.

e2e 자동화 도구(최신 도구 playwright), 효율성 향상, 프론트에서 효율추구

selenium, puppeteer가 있었지만 puppeteer는 코드 제네레이션, 셀렉터, wait 기능 등에서 부족했다.

playwright는 chromium, firefox, webkit을 다양하게 지원하고 테스트 병렬 실행(속도 up), 강력한 네트워크 제어 등등 지원하는 장점이 있다. 가장 좋은 건 자동 코드 생성이 높은 수준, selector를 role 기반으로 매우 잘 쓸 수 있다. 자동 스크린샷 확인 지원. 브라우저 실행하는 arm 프로세스 개선

자동으로 동작 녹화를 통해서 테스트 코드 생성이 가능하다. 미쳤는데?

단계별 자동 스크린샷, DOM 스냅샷 등 지원

테스트 환경 설정을 할 수도 있지만(매번 컨테이너 띄우기 등) 운영, 검증 환경 등을 사용할 수도 있다.

고려해야 할 건 테스트를 위해서 추가 API를 만들어야 하는 건 최대한 자제하기. 예를 들어 이메일이라면 그런 걸 처리해 주는 API를 만들어서 테스트를 진행하는 게 아니라, 그런 메일 받기 테스트를 지원하는 라이브러리 등을 사용

사실 playwright 코드 생성만 하더라도 매우 많은 작업을 할 수 있다. 이런 테스트 코드를 모듈화하려면 AST를 이용해 만들어진, 발표에서 나온 라이브러리를 쓸 수 있다.

캡챠도 통과 가능?

고정된 데이터의 경우 2번째 테스트에서는 실패할 수도 -> faker.js로 입력 데이터 난수화

테스트 독립성을 깨면 안되는데...로컬 DB를 이용해서 변수를 공유하도록 함

playwright를 쓰면 대부분 잘 되지만 10% 정도는 개발자가 코드를 수정해야 한다.

• selector 커스텀 조작 -> 셀렉터들의 우선순위 점수를 설정 파일에서 매길 수 있다. 그리고 화면에 나오는 용어들에 name attribute 추가하고 이런 용어들을 모두 구글 드라이브에 넣고 상수화. 예를 들어 welcome_message라면 name="welcome_message"로 셀렉트하게 해놓으면 웰컴메시지 내용이 바뀌어도 테스트 코드 그대로 쓸 수 있다.(i18n next, ally라는 플러그인으로 key를 쓴 코드의 값도 바로 볼 수 있다)
• 테스트 케이스를 모듈화
• 결과 리포트 활용
• 체크포인트부터 다시 시작 -> playwright에서 세션 스토리지 api를 제공한다. 이를 이용해서 특정 포인트를 클릭하면 특정 테스트를 클릭해서 돌아갈 수도 있게 할 수 있다

이메일 렌더링은 플랫폼마다 다르다..가령 네이버, 구글, 아웃룩 등등. 이를 위해서 emailonacid라는 서비스를 이용, appium을 통한 캡처 etc.

playwright 커스텀 리포트에는 아주 많은 정보가 들어갔는데 이걸 써서 정보를 받을 수 있다.

툴이 없다고 하더라도 e2e 테스트를 어느 정도 작성할 수 있다. vscode 플러그인을 쓴다든가

테스트 원격 실행의 경우 MOON이라는 라이브러리를 써서 대용량 e2e 테스트를 진행 가능하다. 이걸 쓸 일이 있을지는 모르겠는데

reporting을 이용해서 API 호출 범위까지 연결할 수 있을지도?

오픈소스 기여 어렵지 않아요 라이트닝 토크 - 김관식

발표자 소개를 보면 오픈소스 기여만 소개해도 누군지 들어오는 게 인상깊다... 회사 같은 건 아무것도 모르지만 이런 사람이 되고싶은데

• 생태계 이해
• 기여경험, 인사이트
• 기여를 통한 성장

오픈소스는 지금의 프론트엔드 생태계를 떠받치고 있는 기반 중 하나다. 프론트 기술도 오픈소스 생태계를 통해 성장함.

오픈소스 기여방법

• 코드작성, 버그제보(이슈), 문서 작성, 번역

발표에서 다룰 2가지 경험

• 새로운 기능 제안
• 개발 중 발견한 버그 개선, 기여

vitepress -> 뷰 기반으로 정적 문서를 생성하는 프레임워크임

여기에 npm 소셜 링크를 추가하고자 하는 설득 이슈를 날렸음. 기존 메인테이너는 커스텀 링크 추가 기능을 넣음으로써 더 이상 소셜 링크를 넣지 않을 듯이 했지만 왜 npm 소셜 링크가 필요한지를 설득.

근거를 바탕으로 이슈를 작성하고 접근 방법을 서술, 용기내서 도전

• 개발 중 발견한 버그 개선, 기여

큰 규모의 라이브러리도 결국 오픈소스고 사람이 하는 거기 때문에 버그가 있을 수 있다. 가령 발표자는 tanstack query를 쓰다가 버그를 발견하고 기여.

탠스택 쿼리 코드는 매우 방대해서 뭘 봐야 할지 애매했지만 일단 필요한 부분, useQueries부터 보았다. 하지만 무작정 보는 건 쉽지 않기에... 커뮤니티(이슈, 기존 PR)를 분석해서 힌트를 찾을 수도 있다.

오픈소스는 커뮤니티와 함께 문제 찾기
문제 해결에 필요한 힌트, 정보 찾고 + 큰 규모 라이브러리도 두들겨 보고 사용

기여의 장점

• 라이브러리 딥 다이브 가능
• 효율적인 테스트 코그
• 다양한 개발 환경, 도구(nx ci 툴 등) 경험

개인적으로도

• 코드에 대한 자신감, 문제 분석/해결능력(오픈소스는 해결해야 할 문제 목표가 애매할 때도 많다)
• 새로운 도전, 목표

한국 오픈소스

토스 suspensive, es-toolkit, es-hangul

당근 stackflow 웹뷰 프레임워크

채널톡 bezier-react(디자인 시스템)

QnA

오픈소스의 방대한 코드를 어떻게 하면 잘 이해하고 읽을 수 있을까?

-> 규모 있는 라이브러리들은 이미 스코프로 많이 나눠져 있을 때가 많고 서로 영향이 크지 않을 때가 많아서 전체 코드베이스를 이해할 필요는 없다. 필요한 부분만 캐치해서 이해하는 편

테스트 코드?

-> 규모가 큰 라이브러리는 사실 대부분 테스트 코드가 많다. 그래서 새로운 버그라고 해도 그걸 기반한 테스트 코드만 새로 작성해야 할 때가 많다.

버그 재현

-> ts playground, 스샷 등으로 가능

토스 suspensive 메인테이너는?

탠스택 쿼리에는 한국 개발자 기여자가 한 명 더 있었는데 그분이 토스에 다녀서 suspensive 메인테이너가 되었다.