20분이면 충분한 셀레니움 UI 테스트.

UI 테스트는 효율이 중요하다고 생각합니다.

때문에 너무 부담 가지거나 어렵게 생각하지 않아도 됩니다.

QA팀에 결과물을 넘기기 전에, 또 퇴근하기 전에 오늘 개발한 컴포넌트들의 UI 테스트를 자동으로 돌려놓으면

브라우저별 결과물들을 확인하기 편리합니다.

 

개인적으로 쓰려고 아주 간단(허접)하게 만든 모듈인데, npm에 배포해놨습니다.

 

지금부터 하나씩 따라 해 보시면 대략 20분이면 모든것이 준비됩니다.

1. 크롬 / 파이어 폭스의 익스텐션으로 셀레니움 IDE를 설치합니다. (1분)

2. 프로젝트를 만들고 프로젝트의 이름을 입력합니다. (1분)

3. test case를 작성합니다. 테스트 시나리오는 간단하고 짧을수록 관리하기 좋고 결과가 명확해집니다. (5분)

 

4. 테스트 케이스를 동작시켜 봅니다.(5분)

애니메이션에 효과에 의한 시간차나 레이어 중첩으로 인해 테스트가 바르게 진행되지 않는다면 인위적으로 속도를 조절하지 마시고

command란에 wait 명령어를 직접 입력해 줍니다.

그 외에는 사용자 시나리오에서 크게 벗어나지 않을 것입니다.

만족스러운 테스트 코드가 완성되었다면 우측 상단의 저장버튼을 눌러 .side 확장자 파일로 저장합니다.

나중을 위해 이름을 체계적으로 지어주세요.

5. 이제 해당 테스트 케이스를 자동으로 다양한 브라우저에서 실행할 수 있도록 자동화 코드를 작성해봅시다. (5분)

• 폴더를 하나 만듭니다. mkdir selenium-test

• npm 초기화. cd selenium-test && npm init -y

• 자동화 모듈 설치 npm install simple-selenium-tester

• 폴더를 하나 만듭니다. mkdir files

• side 파일을 files 폴더에 넣어줍니다.

• index.js 파일을 하나 만들고 아래와 같이 코드를 작성해 줍시다.

simple.setBrowserList(["chrome", "firefox", "internet explorer", "edge", "safari"]); // 테스트할 브라우저 리스트
simple.setFilePath("./files"); // 테스트 시나리오가 저장된 폴더
simple.setLogPath("./logs"); // 테스트 결과가 저장될 폴더
simple.start();

• 브라우저별 드라이버를 설치해 줍니다.

npm install -g chromedriver-
npm install -g geckodriver
npm install -g edgedriver (Windows environment.)
npm install -g iedriver (Windows environment.)

• index.js를 실행시켜 줍니다.

6. 밥먹고 와서 결과를 확인합니다.

 

# 참고로 말씀드리자면, 해당 모듈은 완전히 동기적으로 수행됩니다.