by
Nov 12. 2022
JetBrains Aqua IDE 살펴보기
React App E2E Test Automation
JetBrains에서 테스트 자동화를 위한 Aqua IDE를 출시했습니다.
SDET로써 Early Testing 가능한 SW QA 프로세스 확립 및 웹 모바일 테스트 자동화(UI, API) 프레임워크 개발뿐 아니라 사내 서비스에 사용할 자동화 도구를 개발하고 QA Engineering에 필요한 기술(기능, 비기능)과 방법론 도입에 있어서 보다 기술에 대한 이해도를 높이고자 DeepDive 중인 요즘인데요. 우선 실무 관점에서 앞으로 해결 필요한 문제는 QA Engineer분들의 스크립트 작성과 유지보수 서포트 관점에서 필요한 생산성 향상입니다.
프레임워크를 유지보수 용이한 구조로 설계하여 스크립트 개발에 필요한 기본적인 가이드라인을 문서화시키고 유지 보수할 예정이지만 동료분들께서 최소한의 노력으로 많은 효율을 이끌어 낼 수 있는 방법에 대해서 고민하던 중 Aqua IDE 출시 소식을 접하게 되었습니다.
사이드 프로젝트로 진행 중인 React App 서비스를 개발하는 과정에서 Aqua IDE를 간단히 살펴보며 느낀 점에 대한 포스팅을 진행하게 되었습니다.
Aqua IDE?
https://www.jetbrains.com/help/aqua/2022.3/getting-started-aqua.html
자바, 코틀린, 파이썬, 자바스크립트, 타입스크립트 언어로 단위, UI, API 테스트 작성을 편리하게 도와주는 도구입니다. 또한 데이터베이스와 도커를 자체적으로 지원하고 있습니다.
자세한 사항은 위 공식 문서를 참고하면 좋습니다.
React App 구현 사항
개요
사이드 프로젝트로 QA Engineering에 필요한 기술 강의 사이트를 제작하고 있습니다.
프론트 초기 버전은 바닐라 자바스크립트로 구현 했었지만 코드가 점점 많아지고 다양한 페이지가 구현될수록 유지 보수하기 어렵겠다는 생각이 들어 현재는 리액트로 다시 작업했습니다.
현재 컴포넌트, jsx, props, useEffect, state와 같은 개념들로 구현되었습니다.
강의 데이터는 어디서 받아오나요?
아직 프론트 작업할 사항이 많이 남았고 서버와 데이터 베이스 또한 구현되어있지 않은 상태입니다. 우선 프론트 구현 과정에서 필요한 테스트를 위해 Postman으로 mock 서버를 생성하여 axios를 활용 중입니다.
https://gist.github.com/Jiveloper/b6361615f33e03e4e5bb76a245ddfced
Postman Collections에 GET {{url}}/products로 접속하여 Status Code 200을 받을 수 있도록 구성해놓은 상태입니다.
https://gist.github.com/Jiveloper/a650bc2cbb9fd5efe3e35460900c1fd1
MainPage 함수에서 axios로 네트워크 통신이 성공할 때 Postman Mock 서버의 데이터를 받아올 수 있도록 처리했습니다.
이후 return 내부에 product-list에 해당하는 요소를 map으로 순회하면서 강의 이름과 가격 정보 등이 프론트에 나타나도록 구현되어 있습니다.
Aqua IDE 셋업
Selenium Java로 초기 프로젝트를 구성했습니다. 위 코드는 Aqua IDE 프로젝트 생성간에 원하는 구성을 선택하면 자동으로 생성되는 코드입니다.
Selenium 4.6 버전업이 되면서 자체 기능으로 Webdriver Manager가 구현되어 있어 driver 객체만 생성하면 바로 사용 가능한 모습입니다.
기본 구성은 implicitlyWait까지 작성되었습니다.
Aqua IDE 초기 구성 캡슐화 여부
https://gist.github.com/Jiveloper/71676200e422b72f01aa2b25d36abb6e
위 코드는 Aqua IDE에서 프로젝트를 셋업 하면 자동으로 생성되는 기본 코드입니다.
서비스에 필요한 값만 바꿔서 편리하게 사용토록 자동 생성하는 모습입니다. 캡슐화가 안되어있거나 mainPage처럼 중간 정도의 수준으로 되어있습니다. 최소한 mainPage 정도의 캡슐화로 구현되는 것이 유지보수 관점에서 편리하고 가독성도 뛰어납니다.
Aqua IDE에서 지원하는 Page Objects 자동 생성 템플릿 코드를 수정하거나 테스트 파일에서 UI 구조의 세부 정보가 나타나지 않도록 자동 생성된 mainPage 코드를 참고하여 PageObjects로 구현하면 좋을 것 같습니다.
Web Inspector
