Selenium IDE는 브라우저에서 테스트를 쉽게 기록하고 재생하는 Chrome, Firefox, Edge의 확장프로그램이다.
Selenium IDE
Selenium IDE는 사용자가 행하는 동작을 명령어(command)로 기록한다. 명령어에 따라 대상(target)과 입력 값(value)을 가진다.
Command
아래 표는 자주 사용되는 Selenium IDE 명령어를 정리한 것이다.
Command | Target | Value | |
click | locator | target을 클릭한다. | |
open | url | URL을 열고 페이지가 로드될 때까지 기다린다. | |
pause | wait time | 지정된 시간동안 기다린다. | |
select | select locator | option locator | 드롭다운 메뉴에서 element를 선택한다. |
send keys | locator | key sequence | 값을 키 별로 입력한 것처럼 시뮬레이션한다. (ex. ${KEY_ENTER}) |
type | locator | value | 입력 필드에 값을 설정한다. |
Selenium IDE는 조건, 반복 등 제어 흐름 명령어를 제공한다.
Command | Target | |
if - else if - else - end |
JavaScript expression | 조건식의 True 여부에 따라 명령을 실행한다. |
times - end | number | 지정한 횟수 명령을 반복한다. |
do - repeat if | JavaScript expression | repeat if의 조건식이 True인 동안 명령을 반복한다. |
while - end | JavaScript expression | while의 조건식이 True인 동안 명령을 반복한다. |
Locator
Locator는 Selenium IDE가 명령을 수행할 target의 위치를 찾는 방법이다. Selenium IDE는 테스트를 기록하는 동안 사용자가 동작한 target의 적절한 locator를 찾는다. 페이지가 로드될 때마다 locator(ex. ID)가 변경되는 경우 다른 locator를 사용해야 한다.
ID Locator
Target element가 가진 id 속성을 사용한다.
ex. <label id="my_id"/>
Target: id=my_id
Name Locator
Target element가 가진 name 속성을 사용한다.
ex. <input type="text" name="username"/>
Target: name=username
Link Locator
지정된 텍스트가 포함된 링크를 찾는다.
ex. <a href="https://www.selenium.dev/">Selenium Dev</a>
Target: link=Selenium Dev
XPath Locator
Target element의 XPath를 사용한다.
ex.
<html>
<head> ... </head>
<body>
<table> ... </table>
</body>
</html>
Target: xpath=/html/body/table
CSS Locator
CSS Selector를 사용하여 Target element를 찾는다.
ex. <button type="button" name="car" value="tesla">
Target: css=button[value="tesla"]
Selenium IDE으로 항공권 검색하는 테스트 케이스를 생성해보자. 날짜는 추석 연휴이고, 뉴욕으로 떠날 것이다.
항공권을 검색하기 위해 필요한 동작을 정리하면 다음과 같다.
1. 대한항공 페이지 열기
2. 도착지 클릭
3. 텍스트 박스에 'NYC 뉴욕/모든 공항' 입력
4. Enter 키 입력
5. 탑승일 클릭
6. 가는 날 텍스트 박스에 '2021.09.18.' 입력
7. 오는 날 텍스트 박스에 '2021.09.22.' 입력
8. 왕복 선택 클릭
9. 검색 버튼 클릭
항공권 검색 과정을 Selenium IDE으로 기록하고, 기록한 내용을 재생하면 [그림 2]의 좌측 이미지와 같이 오류가 발생한다. 페이지가 로드될 때마다 target의 ID가 변경되어 기록 당시의 ID를 찾지 못해서 발생한 오류이므로 target을 다른 locator로 설정해야 한다. [그림 2]의 우측 이미지는 ID Locator를 Xpath Locator로 변경하여 오류 없이 모든 명령어를 수행한 결과이다.
일부 불필요한 command를 제거하면 다음과 같이 정리할 수 있다.
No | Test step | Command | Target | Value |
1 | 대한항공 페이지 열기 | open | /kr/ko | |
2 | 도착지 클릭 | click | xpath=//button[2]/span | |
3 | 텍스트 박스에 'NYC 뉴욕/모든 공항' 입력 |
type | xpath=//ke-airport-chooser/div/div/input | NYC 뉴욕/모든 공항 |
4 | Enter 키 입력 | send keys | xpath=//ke-airport-chooser/div/div/input | ${KEY_ENTER} |
5 | 탑승일 클릭 | click | css=.quickbooking__date | |
6 | 가는 날 텍스트 박스에 '2021.09.18.' 입력 |
type | id=ipt-depature | 2021.09.18. |
7 | 오는 날 텍스트 박스에 '2021.09.22.' 입력 |
type | id=ipt-arrival | 2021.09.22. |
8 | 왕복 선택 클릭 | click | css=.dialog__confirm:nth-child(2) | |
9 | 검색 버튼 클릭 | click | css=.quickbooking__find |
+ 내용 추가 (2021.09.26)
위 command 대로 실행하면 테스트가 성공하는 경우도 있고, sendKeys에서 Dom Error와 함께 실패하는 경우도 있다.
sendKeys on xpath=//ke-airport-chooser/div/div/input with value ${KEY_ENTER} Failed:
{"code":-32000,"message":"DOM Error while querying"}
Target을 XPath Locator에서 CSS Locator로 수정하면 해결된다.
XPath Locator | CSS Locator |
xpath=//ke-airport-chooser/div/div/input | css=ke-airport-chooser>div>div>input |
'Selenium' 카테고리의 다른 글
Selenium WebDriver (1) | 2021.09.29 |
---|---|
Selenium (0) | 2021.08.26 |
댓글