DEVOCEAN

Web3 세상에서는 중앙 서버가 해체되어 존재하지 않게 됩니다 (Decentralized).

Web3 세상은 중앙 서버가 아니라 P2P 프로토콜에 의해 지탱됩니다.

Web3 세상에서는 웹 브라우저가 플랫폼 역할을 수행할 것이라고 생각합니다.

그래서 웹 프론트엔드 기술이 중요해질 것이라고 생각합니다.

그런 맥락에서 Web3 프론트엔드 어플리케이션의 e2e 테스트에 대해 소개합니다.

Cypress 와 Synpress 두 단어만 기억하시면 성공입니다.

e2e 테스트가 필요한 순간

• TDD (Test Driven Development) 방식으로 Web3 어플리케이션을 개발하고 있었음

• 터미널 한쪽 구석에 Unit Test를 실행시켜 놓고 소스 파일을 수정할 때마다 모든 Unit Test를 통과하는지 확인하며 개발했음

• 하지만, 모든 Unit Test를 통과했음에도 버그가 발생하는 상황을 겪음

• 서버, 네트워크, 브라우저 애드온 같은 모든 컴포넌트가 참여하는 상황에서만 확인 가능한 버그가 있었음

e2e 테스트 도구, Cypress

• 현재 많이 쓰이는 e2e 테스트 도구는 Cypress와 Selenium

• Cypress는 브라우저 안에서 일어나는 거의 모든 일을 JavaScript로 확인 가능한 개발자 친화적 도구

• 반면 Selenium은 QA 엔지니어 친화적 도구

Web3 어플리케이션 테스트를 위한 Cypress 플러그인, Synpress

• Web3 어플리케이션은 MetaMask 브라우저 애드온이 있어야 동작

• MetaMask 브라우저 애드온이 개입하는 사용자 시나리오를 테스트하기 위해 Synpress가 필요

  (MetaMask 활성화 시나리오, MetaMask wallet-connect 승인 시나리오, MetaMask TX 승인 시나리오, ...)

Cypress & Synpress 테스트 팁

• Cypress 테스트 구문은 query-assert 또는 query-command 형태

  • Cypress 구문은 assert나 command로 마무리 짓는 것이 Good Practice (assert나 command 이후에 query를 덧붙이지 않는다)

• 이더리움 메인넷을 타겟으로 하는 테스트는 Synpress의 task setupMetamask 단계에서 실패함

  • Synpress가 MetaMask 애드온을 설정하고 나서 설정 성공 여부를 판정하기 위해 mainnet 문구를 찾지만,

    한글 브라우저에서는 메인넷이라고 표시되기 때문에 문자열 불일치로 인한 assertion fail이 발생한다

  • 메인넷 대신 테스트넷을 타겟으로 테스트 시나리오를 작성하는 편이 좋다

그래서 e2e 테스트는?

• 모든 컴포넌트가 참여하는 상황에서만 확인할 수 있는 버그가 있음. 이를 잡아내는 것이 e2e 테스트

• Unit Test 수행 시간은 msec 단위, e2e 테스트 수행시간은 min 단위 (테스트 비용이 크다)

• 테스트 피라미드가 제시하는 바대로 e2e 테스트는 아껴 써야 함

출처: "Testing Vue.js Applications"/ Edd Yerburgh 지음/ Manning Publications 펴냄

e2e 테스트 실행화면

Ref.

별 4개급 참조 문서

• End-to-end testing using Synpress

  • 2023-04-06

  • 클레이튼 dApp을 Synpress로 테스트하는 튜토리얼

  • 유용한 샘플 코드 제시

• Synpress-examples 소스 레포

  • 유용한 샘플 코드 제시

• Cypress 문서: Retry-ability

  • Cypress 테스트 구문은 query-assert 또는 query-command 체이닝 형태

  • 체이닝 구문은 assert나 command로 마무리 짓는 것이 Good Practice

• Cypress 문서

• Synpress 소스 레포

별 3개급 참조 문서

• Story: “What is the Most Challenging in E2E Test Automation?”

  • 테스트에 있어 가장 어려운 것은 '테스트 유지/보수'

• [Track 1-6] 김동우 - 진정한 CI CD를 위한 E2E Test 시작하기

  • 2019-11-18, 40분 동영상

  • 단위 테스트가 성공하더라도 실제 동작에서 오류가 발생할 수 있다

  • e2e 테스트는 UI에 의존적, 그래서 테스트 코드 변경이 자주 필요하다

• 개발 생산성과 품질 향상을 위한 E2E 테스트 자동화로 얻은 것 -한국어판-

  • 2022-11-30, 40분 동영상

  • 적은 인력으로 장기적으로 보수해야 하는 상황에서 테스트 자동화가 필요

• Cypress 튜토리얼: Writing Your First E2E Test

  • cy.get()으로 엘리먼트를 찾고, .type()으로 문자열을 입력하고, .should()로 검증한다

  • action 명령 다음엔 chain을 걸지 않는 것이 베스트 프랙틱스다

• 프론트엔드 TDD 요약

  • '프론트엔드 테스트 피라미드' 소개

(끝)