Selenium IDE

Selenium IDE는 웹 브라우저 테스트를 쉽게 만들 수 있는 도구입니다. 설치부터 사용법, record and playback 기능을 사용해 테스트를 만들어 보겠습니다.

Selenium IDE 설치와 Record and Playback

Selenium IDE는 크롬과 파이어폭스의 Extention 형식으로 제공합니다. 파이어폭스는 Add-ons에서 다운 받을 수 있고 크롬은 Chrome Web Store에서 받을 수 있습니다.

IDE를 실행하면 첫 화면에서 "Create a new project"를 선택하고 프로젝트 이름을 입력한 후 생성합니다.

Selenium IDE 화면 구성

URL을 입력하고 Record 버튼을 누르면 새로운 창에 URL이 열리고 이후 해당 페이지에서 하는 모든 액션들이 기록되기 시작합니다. 기록이 끝나면 Stop Recording 버튼을 누릅니다. 이제 Play 버튼을 누르면 기록한 테스트를 똑같이 재연합니다.

실행 결과

기록된 커맨드들을 보면 창 크기를 정하고 마우스로 클릭한 HTML TAG의 정보들을 저장하고 키보드로 input 태그에 입력 했던 모든 액션들이 그대로 기록됩니다. Play 버튼을 누르면 커맨드들이 순차적으로 실행됩니다. 전체 커맨드가 성공하게 되면 로그에 위와 같은 성공 로그가 남겨집니다. 자세한 커맨드 정보는 Selenium 레퍼런스 문서에서 보거나 하단의 Reference 탭에서 볼 수 있습니다.

이러한 방법으로 하나의 프로젝트에 여러 개의 테스트를 만들거나 여러 프로젝트를 만들어서 테스트를 여러 번 실행하도록 할 수 있습니다. 이제 모든 기록이 끝나면 파일로 저장하고 해당 파일을 Selenium Grid로 보내서 다양한 브라우저에서 테스트를 하는 방법을 알아보도록 하겠습니다.

Selenium Grid

Selenium Grid 구성

Selenium Grid는 Hub와 Node로 구성되어 있습니다. Selenium IDE로 만든 파일을 Hub로 보내면 Hub에서 Node로 테스트를 보내 실행하게 합니다. Node에는 테스트할 브라우저와 그 브라우저에 맞는 브라우저 드라이버가 설치되어 있어야 합니다. 그럼 Hub에서는 Node에 설치된 브라우저들에 대한 정보를 관리하며 파일을 받았을 때 적절한 Node로 전송합니다.

Hub로 테스트를 전송하기 위해서는 먼저 npm에서 selenium-side-runner를 설치해야 합니다. (npm 설치가 되어 있지 않다면 설치가 필요합니다.)

그리고 노드 역할을 할 서버에는 테스트할 브라우저의 드라이버가 설치 되어 있어야 합니다.

그리고 허브와 노드를 실행 시켜야합니다. Selenium 홈페이지에서 Selenium stand alone jar 파일을 다운로드하고 java로 아래와 같이 Hub 역할을 할 서버와 Node 역할을 할 서버에서 다음과 같이 실행합니다.

Hub 서버

Node 서버

windows 서버에 작동되는 selenium node

이제 위에서 설치한 selenium-side-runner 명령어를 이용해 Hub로 Selenium IDE로 만든 파일을 전송하여 원격으로 브라우저 테스팅을 시작하면 됩니다. 또한 -c 옵션으로 어떤 브라우저에서 실행할지 지정할 수 있습니다.

Microsoft Edge 브라우저에서 실행한 결과 화면

실제 위에서 만든 테스트를 실행한 결과가 지정한 브라우저에서 성공적으로 완료 되었음을 보여주고 있습니다. 이러한 방식으로 브라우저 테스트를 자동으로 할 수 있습니다.

와탭의 front 배포는 일주일에 한 번씩 되고 있습니다. 그래서 배포가 성공적으로 완료될 때마다 front의 White Page 버그를 확인할 수 있는 selenium test들을 만들었고 이를 Jenkins Job으로 구성했습니다.. Jenkins Job을 통해 front 배포가 이루어지기 때문에 자동 후속 Trigger로 Selenium test job이 실행되게 구성할 수도 있습니다.

Selenium IDE 팁

Target 지정

페이지에서 Target 선택 기능을 사용하면 웹페이지에서 마우스로 클릭한 element를 Target으로 지정할 수 있습니다. 그리고 Target을 지정하다 보면 실제 테스트에서 찾지 못하는 경우가 있습니다. 그럴 때는 Selenium IDE에서 Command의 Target을 클릭해 보면 xpath를 이용한 방법으로 Target을 찾을 수 있는 방법을 제시하고 있습니다.

wait for element

커맨드 문서에 보면 wait for element로 시작하는 커맨드가 있습니다. 네트워크 환경이나 서버 성능에 따라 브라우저 load 시간이나 요청 순서가 매번 달라질 수 있기 때문에 페이지 내의 element들의 로드 완료 순서가 다를 수 있습니다. 그렇기 때문에 테스트를 할 때마다 브라우저에 특정 element를 지정하고 해당 element가 지정한 시간 안에 원하는 상태가 될 때까지 기다리게 할 수 있습니다. 만약 지정한 시간 안에 나타나지 않으면 실패로 끝납니다.

(pause라는 커맨드로 지정한 시간동안 테스트를 일시 중지시킬 수도 있지만 wait for element를 사용하길 권장합니다.)

해당 css class를 가진 element가 표현될 때까지 기다림. 제한시간 5초. 초과시 실패

store와 flow control

store 커맨드를 이용하여 특정 element의 text나 value, tiltle의 값을 Selenium IDE에서 값을 저장할 수 있습니다. 이 저장한 값을 이용해 if 커맨드를 이용하여 특정 target의 값과 비교하는 작업을 만들 수 있습니다.

store과 if 사용 예시

위 이미지와 같이 prj_name이라는 이름으로 target으로 지정된 element의 text를 저장하고 if 커맨드로 비교합니다. 해당 조건 만족 시 마우스 click을 실행하도록 하였고 그렇지 않을 경우 end 이후로 통과합니다. if는 항상 end 커맨드와 쌍으로 사용되어야 합니다. 그 외 else if, repeat if를 사용하여 여러 번 비교하도록 설정할 수 있습니다.

verify와 assert

위와 같이 값을 저장하고 if문으로 비교하여 흐름을 제어하는 방식 말고도 verfiy로 시작되는 명령어를 사용하면 지정한 element의 값이나 테스트가 원하는 것과 일치하는지를 확인하여 테스트 결과 성공 여부를 정할 수 있습니다.

verify 사용 예

assert로 시작하는 커맨드 또한 verify와 비슷한 방식으로 작동하지만 assert의 조건이 실패하면 이후 커맨드는 실행되지 않는 게 차이점입니다. 결과적으론 verify와 assert가 실패하면 둘 다 failure로 기록되지만 assert는 이후 커맨드들을 모두 무시하고 실행을 끝냅니다. 반면 verify는 이후 커맨드를 실행합니다. 확인해야 할 대상이 이후 실행에 영향을 미치는 크리티컬 한 것인지 아닌지를 파악하고 적절히 사용하면 됩니다.

execute script

어쩔 수 없이 javascript를 사용해 데이터를 구해야할 때가 있습니다. 예를 들어 date picker에서 실행 시점의 현재 날짜를 기준으로 일주일 전 날짜를 계산하고 싶을 때는 Date 객체를 이용해야 합니다. 이때 execute script 커맨드가 필요합니다. javascript Date 객체를 이용해 실행 시점의 날짜를 구하고 날짜 포맷을 맞춘 뒤 이를 기준으로 일주일 전 날짜를 계산하게 하는 로직을 만듭니다. 그리고 이를 return 하게 하여 store와 같은 방법으로 지정한 이름에 Date 객체를 이용한 결과 데이터를 저장하게 합니다.

excute script 예

위 이미지를 보면 Target에 짧은 javascript 코드가 들어가 있고 Value에는 Target에서 return된 결과를 저장할 데이터의 이름을 적어줍니다. 이후 다른 커맨드에서 이름으로 불러와 사용하면 됩니다.

Run in parallel

Selenium IDE에는 여러 test들을 모우게 할 수 있는 Test suites 단위가 있습니다. Suite를 생성하면 원하는 테스트들을 이곳에 담을 수 있습니다. Suite로 테스트를 그룹화하면 test가 순차적으로 실행되는데 이를 병렬로 실행할 수 있는 옵션을 지정할 수 있습니다. Test suites로 이동한 후 생성한 Suite위에 마우스를 올리면 옵션 버튼이 나타나는데 이때 Settings을 클릭하면 Run in parallel 옵션 체크박스가 있습니다. 이 옵션을 체크하면 병렬로 테스트들을 실행할 수 있습니다. 병렬로 실행하면 테스트들을 병렬로 실행하기 때문에 보다 빠르게 실행 결과를 받을 수 있습니다. 병렬로 실행할 때는 각 테스트가 독립적이 여야 합니다.

참고