※ Selenium 설치, 실행법은 다음 링크를 참고하세요.
http://xinics.tistory.com/entry/Selenium-설치-및-사용법
인터페이스
1. 작성한 테스트 스크립트가 보여지는 창
2,3,4. 명령어 입력 창. 각각 명령어, 대상, 값
5. 클릭하면 target에 지정된 엘리먼트가 highlight됩니다.
6. 클릭하면 기록 모드로 변하고, 다시 클릭하면 기록을 중지합니다. 기록 모드인 상태로 브라우저(파이어폭스)를 사용하면 실행한 행동들이 기록됩니다.
7. 테스트 실행 버튼.
8. 테스트 결과. 성공한 테스트와 실패한 테스트의 개수를 보여 줍니다.
튜토리얼
XE에서 게시판에 글을 작성했을 때 최신 댓글 위젯에 새 글이 표시되는 것을 테스트하는 테스트 스크립트를 작성해 보면서 Selenium의 사용법을 배워 보도록 하겠습니다.
튜토리얼에서 사용되거나 자주 쓰이는 명령어/셀렉터는 글 아래 부분에 정리해 두었으니 함께 보세요.
글이 하나, 댓글이 하나 있는 상태를 초기 상태라고 가정합시다.
Selenium IDE를 켜고 게시판에 접속한 뒤,
글 제목을 클릭해 봅시다.
Selenium에 open, clickAndWait 커맨드가 입력된 것을 알 수 있습니다. 그런데 clickAndWait의 대상이 글의 제목으로 설정되어 있네요. 글의 제목이 달라져도 사용할 수 있도록 target을 수정해 봅시다.
우선 Selenium의 기록 기능을 끄고,
이전 페이지로 돌아간 다음에 Firebug를 이용해 HTML 구조를 확인합니다. Firebug 콘솔의 화살표 버튼을 누른 상태로 알아볼 위치를 클릭하면 그 부분의 HTML 코드가 보입니다.
HTML 코드를 보니 <td class="title"> 안의 <a>태그를 클릭하면 되는 것 같습니다. target을 css=td.title > a로 수정하고 Find 버튼을 눌러 봅시다.
우리가 클릭하려고 했던 링크가 노랗게 highlight되는 걸 확인할 수 있습니다. 제대로 선택한 게 맞네요. 그럼 다음으로 넘어갑시다.
덧글을 쓰려면 덧글 텍스트 상자를 target으로 지정해야겠죠. Firebug로 다시 한 번 찾아 봅시다.
이번엔 <body class="xe_content">를 선택하면 되겠네요. 확인해 봅시다.
그럼 이제 댓글을 작성해야겠죠? 커맨드는 type, 값은 '2등!'으로 입력해 봅시다. 작성한 명령을 더블 클릭하면 실행이 됩니다.
텍스트 창에 댓글이 제대로 입력되었네요. 명령이 녹색으로 변한 건 오류 없이 실행되었다는 의미입니다.
그럼 이제 마지막으로 댓글 등록 버튼을 누르면 되겠네요. 다시 Selenium의 기록 모드를 켠 다음 댓글 등록 버튼을 클릭해 봅시다.
댓글이 등록되었고, Selenium에는 clickAndWait css=input[type=submit] 이라고 잘 기록되었네요.
자 이제 최신 댓글 페이지로 돌아가서 댓글이 잘 등록되었나 확인해 볼까요?
open 커맨드를 이용해 최신 댓글 페이지 링크로 이동하니
댓글이 잘 작성되어 있네요. 그럼 이제 테스트를 해 봅시다. 가능한 명령어를 확인하기 위해 2등! 링크에서 오른쪽 버튼을 눌러 봅시다.
우리는 assertText를 사용할 수 있을 거 같네요. 대신 Target을 좀 손봐야 할 것 같습니다.
첫 번째 <li>의 <a> 태그니 XPath형태로 //li[1]/a 로 지정하면 되겠네요. 다시 확인해 보고,
자, 이제 테스트를 작성했으니, 실행해 볼까요? Selenium IDE의 테스트 실행 버튼을 클릭해 봅시다.
자! 모두 성공했습니다 J
명령어
명령어
|
설명
|
Target
|
Value
|
예제
|
open
|
페이지를 엽니다.
|
URL
|
|
open /admin
|
type
|
텍스트를 입력합니다.
|
엘리먼트
|
텍스트
|
type uid admin
|
click
|
클릭합니다. (페이지가 전환되지 않는 경우 clickAndWait 대신 사용하고 waitFor~ 로 기다리도록 합니다)
|
엘리먼트
|
|
click //input[@type='submit']
|
clickAndWait
|
클릭하고 페이지가 전환될 때까지 기다립니다. 페이지가 전환되지 않으면 실패합니다.
|
엘리먼트
|
|
clickAndWait //input[@type='submit']
|
select
|
<select> 태그의 리스트에서 선택합니다.
|
엘리먼트
|
값
|
select sortkey_text label=날짜 △
|
pause
|
지정한 시간 동안 멈춥니다. (밀리초)
|
시간
|
|
pause 300
|
assertText
|
텍스트를 검증합니다. 텍스트가 다르면 실패합니다.
|
엘리먼트
|
텍스트
|
assertText num_channel 5/6
|
assertElement
Present
|
엘리먼트가 있는 지 검증합니다. 엘리먼트가 없으면 실패합니다.
|
엘리먼트
|
|
assertElementPresent //tr[2]
|
assertElement
NotPresent
|
엘리먼트가 없는 지 검증합니다. 엘리먼트가 있으면 실패합니다.
|
엘리먼트
|
|
assertElementNotPresent //tr[2]
|
assertVisible
|
엘리먼트가 보이는 상태인지 검증합니다. 엘리먼트가 숨겨져 있다면 실패합니다.
|
엘리먼트
|
|
assertVisible newest_comments
|
assertNotVisible
|
엘리먼트가 보이지 않는 상태인지 검증합니다. (예: display: none) 엘리먼트가 보이는 상태라면 실패합니다.
|
엘리먼트
|
|
assertNotVisible newest_comments
|
assertConfirmation
|
confirm()의 메시지를 검증합니다. 해당 메시지를 가진 confirm()이 실행되지 않으면 실패합니다.
|
메시지
|
|
assertConfirmation 수정하시겠습니까?
|
assertAlert
|
alert()의 메시지를 검증합니다. 해당 메시지를 가진 alert()가 실행되지 않으면 실패합니다.
|
메시지
|
|
assertAlert 채널을 생성하였습니다.
|
waitForText
|
엘리먼트에 지정한 텍스트가 나타날 때까지 기다립니다. 시간 내에 나타나지 않으면 실패합니다.
|
엘리먼트
|
텍스트
|
waitForText num_channel 5/6
|
waitForAlert
|
target에 지정한 alert()가 나타날 때까지 기다립니다. 시간 내에 나타나지 않으면 실패합니다.
|
메시지
|
|
waitForAlert 제목을 입력해주세요.
|
대상
Selenium은 대상 지정 방식으로 DOM, CSS, XPath 방식을 지원합니다.
이 글에서는 그 중 CSS, XPath 방식을 예제를 통해 간단히 설명하도록 하겠습니다.
튜토리얼에서 사용된 최신 댓글 위젯을 조금 간단하게 수정해 봤습니다.
CSS 셀렉터
Selenium의 target으로 CSS 셀렉터를 이용하기 위해서는 앞에 css= 접두어를 붙여야 합니다. (위의 튜토리얼에 사용된 예가 있으니 확인하세요)
엘리먼트
|
CSS 셀렉터
|
설명
|
|
#title
|
id='title'인 것
|
p#title
|
<p> 중 id='title'인 것
|
div#title_bar #title
|
<div id="title_bar">의 자손 중 id='title'인 것
|
※ 원래는 둘 모두 선택되어야 하나
Selenium은 첫 번째 것만 선택
|
li.comment a
|
<li class='comment'>의 자손인 <a>
|
li.comment > a
|
<li class="comment">의 직계 자식인 <a>
|
|
li.comment > a[href='/746']
|
<li class="comment">의 직계 자식인 <a> 중 href='/746'인 것
|
a[href='/746']
|
<a> 중 href='/746'인 것
|
|
li.comment > a[href='/747']
|
<li class="comment">의 직계 자식인 <a> 중 href='/747'인 것
|
a[href='/747']
|
<a> 중 href='/747'인 것
|
|
img#button_hide
|
<img> 중 id='button_hide'인 것
|
img[align=right]
|
<img> 중 align='right'인 것
|
XPath 셀렉터
Selenium은 XPath가 기본으로 설정되어 있으니, XPath를 사용하는 경우에는 별도의 접두어를 붙일 필요가 없습니다.
엘리먼트
|
XPath 셀렉터
|
설명
|
|
//*[@id='title']
|
아무 태그나 id='title'인 것
|
//p[@id='title']
|
<p> 중 id='title'인 것
|
//div[@id='title_bar']/p[@id='title']
|
<div id="title_bar">의 직계 자식 중 id='title'인 <p>
|
※ 원래는 둘 모두 선택되어야 하나
Selenium은 첫 번째 것만 선택
|
//li[@class='comment']//a
|
<li class="comment">의 자손인 <a>들
|
//li[@class='comment']/a
|
<li class="comment">의 직계 자식인 <a>들
|
|
//li[@class='comment'][1]//a
|
<li class="comment"> 중 첫 번째 것의 자손인 <a>
|
//li[@class='comment'][1]/a
|
<li class="comment"> 중 첫 번째 것의 직계 자식인 <a>
|
//a[@href='/746']
|
<a> 중 href='/746'인 것
|
|
//li[@class='comment'][2]/a
|
<li class="comment"> 중 두 번째 것의 직계 자식인 <a>
|
//li[@class='comment'][last()]/a
|
<li class="comment"> 중 마지막 것의 직계 자식인 <a>
|
//a[@href='/747']
|
<a> 중 href='/747'인 것
|
|
//img[@id='button_hide']
|
<img> 중 id='button_hide'인 것
|
//img[@align='right']
|
<img> 중 align='right'인 것
|
