View Source

h1. Selenium을 이용한 UI 테스트


{toc:style=disc|indent=20px|minLevel=2|maxLevel=3}

h2. 1. Selenium 개요
h3. 1.1 Selenium이란
* Selenium은 웹 어플리케이션을 위한 테스팅 프레임워크로 자동화 테스트를 위한 여러가지 강력한 기능을 지원해준다.
* 다양한 브라우저들을 지원하며, 다양한 테스트 작성 언어(Java, Ruby, Groovy, Python, PHP, and Perl.)를 지원한다.
* 현재 WebDriver라는 웹 자동화 툴과 통합하는 작업이 진행되고 있다. (2.0ax 버전)
* 홈페이지 : http://seleniumhq.org/, http://code.google.com/p/selenium/


h3. 1.2 Selenium Components
h6. 1.2.1 Selenium IDE
* Selenium Test Case를 만들고 실행하기 위한 통합 개발 환경
* 파이어폭스 확장 플러그인으로 제공되며, Selenium Test Case를 쉽게 작성할 수 있도록 도와준다
* 레코딩이 쉽고, 재생을 지원한다.
* 브라우저 내의 사용자의 행동을 저장하여 다양한 언어(C#, Java, Perl, PHP, Python, Ruby 등)로 변환 가능 하다.
* 참고 : http://seleniumhq.org/projects/ide/


h6. 1.2.2 Selenium Core
* Selenium의 Core 라이브러리


h6. 1.2.3 Selenium RC(Remote Control)
* http 를 통해 command 를 받는 Java 로 작성된 서버
* Selenium API로 작성한 테스트 코드를 실행시켜 주는 역할을 한다.
* 테스트용 PC 에 설치를 한 후 원격지에서 unit 테스트 framework로 웹어플리케이션의 자동화 테스트를 가능하게 한다.
* 참고 : http://seleniumhq.org/projects/remote-control/
|!selenium-rc.png!|



h6. 1.2.4 Selenium GRID
* Selenium GRID를 이용해 테스트 코드를 여러대의 Selenium RC에서 동시에 실행 할 수 있다.
* 테스트 수행속도를 향상시키기 위해 분산해서 처리하거나 여러가지 환경에서 테스트가 필요할 때 사용한다.
* 서로다른 브라우저 환경에서 일관성있는 테스트가 가능하다.
* 참고 : http://selenium-grid.seleniumhq.org/how_it_works.html
|!Selenium_GRID.png!|


h2. 2. Selenium IDE의 사용
h3. 2.1 Selenium IDE 설치
h6. 2.1.1 다운로드 및 설치
* 다운로드 : http://release.seleniumhq.org/selenium-ide/
* 최신버전(현재 1.0.7) 다운로드 후 더블클릭해서 설치

h6. 2.1.2 설치 확인
* "Fire Fox > 도구" 메뉴 에서 설치 확인

h6. 2.1.3 Selenium IDE Toolbar
|!Selenium_IDE_Toolbar.png!|
* 1. Speed Control : 테스트 케이스의 속도 재생 속도 조절
* 2, Run All : Test Suite를 재생
* 3. Run : Test Case를 재생
* 4. Pause/Resume : 테스트 케이스의 정지와 리스타트
* 5. Step : 클릭 시 한번에 한 라인씩 수행
* 6. TestRunner Mode : 브라우저 내에서 테스트 실행 및 결과를 HTML Table 형식으로 볼 수 있음 (Firefox 3.6에서 잘 안 됨)
* 8. Record : 유저 브라우저의 액션을 레코딩 시작/정지 버튼


h3. 2.2 Selenium IDE 테스팅 예제
* Selenium IDE에서 Recording 후 저장된 테스트코드를 수행하면 된다.

h6. 2.2.1 Recording
* ① Firefox를 열어서 도구 => Selenium IDE를 선택해서 IDE를 활성화 시킨다
* ② Test하기 원하는 사이트로 이동 한다. 또는 Base URL 입럭
* ③ 빨강색 Record버튼을 누른다.
* ④ Firefox창에서 원하는 액션을 수행하면 해당내용이 자동으로 저장된다.
* ⑤ 원하는 테스트가 끝났으면 다시 빨강색 Record버튼을 눌러서 종료시킨다.


h6. 2.2.2 저장된 테스트코드 수행
* ① 테스트 수행속도를 설정한다.
* ② Play 버튼을 눌러서 테스트를 수행한다.

h6. 2.2.3 테스트를 자바코드로 전환
* Selenium IDE에서 테스트 작성 후 IDE 메뉴에서 Options => Format 으로 원하는 언어를 선택하면 된다.
* 아래는 JUnit4 기반의 테스트 코드 예제이다.
* 테스트 코드의 "Untitled" 와 "change-this-to-the-site-you-are-testing"를 수정하면 된다.
{code}
package com.example.tests;

import com.thoughtworks.selenium.*;
import java.util.regex.Pattern;

public class Untitled extends SeleneseTestCase {
public void setUp() throws Exception {
setUp("http://change-this-to-the-site-you-are-testing/", "*chrome");
}
public void testUntitled() throws Exception {
selenium.open("/home/index.nhn");
selenium.type("query", "리쌍");
selenium.click("//input[@type='image']");
selenium.waitForPageToLoad("30000");
verifyTrue(selenium.isTextPresent("개리"));
}
}
{code}



h6. 2.2.4 간단 데모
* [Selenium IDE 데모 동영상 보기|^Selenium_IDE.wmv]
* [XPather Firefox AddOn|https://addons.mozilla.org/ko/firefox/addon/1192 ]을 이용하면 XPath를 쉽게 알 수 있다.



h2. 3. Selenium RC의 사용
h3. 3.1 다운로드 및 설치
* 다운로드 : http://selenium.googlecode.com/files/selenium-remote-control-1.0.3.zip
* 압축 해제 및 java -jar selenium-server.jar 로 실행한다.

h3. 3.1 Selenium RC 예제
h6. 3.1.1 Selenium RC 서버 Start
* java -jar selenium-remote-control-1.0.3\selenium-server-1.0.3\selenium-server.jar

|!Selenium_RC_start.png!|


h6. 3.1.2 JUnit 테스트
* 아래는 Selenium IDE로 저장한 자바코드를 Selenium RC를 이용해 테스트하는 예제이다.
{code}

import com.thoughtworks.selenium.SeleneseTestCase;

public class SimpleRCTest extends SeleneseTestCase {
public void setUp() throws Exception {
setUp("http://dev.music.naver.com/", "*firefox");
}

public void testSearch() throws Exception {
selenium.open("/home/index.nhn");
selenium.type("query", "리쌍");
selenium.click("//input[@type='image']");
selenium.waitForPageToLoad("30000");
verifyTrue(selenium.isTextPresent("개리"));
}
}

{code}

* Selenium관련 maven 빌드 설정
{code}
-- repository 설정
<repositories>
<repository>
<id>selenium-repository</id>
<url>http://selenium.googlecode.com/svn/repository/</url>
</repository>
</repositories>

-- dependency 설정
-- 아래서 WebDriver 간단설명 예정으로 WebDriver 포함 버전으로 설정했음.
<dependencies>
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium</artifactId>
<version>2.0a4</version>
<scope>provided</scope>
</dependency>
</dependencies>
{code}


h6. 3.1.3 간단 데모
* [SeleniumRC 데모 동영상 보기|^Selenium_RC.wmv]



h2. 4. WebDriver를 이용한 UI 테스트

h3. 4.1 WebDriver 개요
* 홈페이지 : http://code.google.com/p/selenium/?redir=1

h6. 4.1.1 WebDriver란?
* 단순한 API들로 구성된 개발자 중심의 웹 UI 테스트 자동화 도구 이다.
* 다양한 브라우저(FireFox, Internet Explorer, Safari, Chrome...)에서 일관성 있는 테스트를 할 수 있다.
* Selenium 1.0에서 지원하지 못하던 테스트 기능 문제를 개선하였다.
* multiple frames, multiple browser windows, popups, and alerts, Page navigation, Drag-and-drop, AJAX-based UI elements등 테스트 가능하다
* 현재 Selenium과 통합되어 2.0a 버전이 개발되고 있다.


|!WebDriver.png!|

h6. 4.1.2 WebDriver 장점
* Driver 변경만으로 다양한 환경에서 테스트 수행이 가능 하다.
* 표준 API 지원을 통해 개발자 UI 테스트에 최적화 되어 있다.
* Real browser 외에도 HtmlUnitDriver 지원을 통한 빠른 테스트 피드백이 가능 하다.
* 현재 Selenium과 연계를 통해 장단점 상호 보완 중이다.

h6. 4.1.3 WebDriver 단점
* 개발자 중심의 UI 테스트 도구인 관계로 초기 학습 시간 및 비용에 대한 부담이 발생한다.
* 시나리오에 기인한 테스트케이스의 작성이 까다롭고 불명확할 수 있다.


h3. 4.2 WebDriver 예제
h6. 4.2.1 간단 예제

* 참고 : http://seleniumhq.org/docs/09_webdriver.html#the-5-minute-getting-started-guide
* By.id, By.name, By.tagName, By.xpath, By.className, By.cssSelector를 이용해 쉽게 element 접근이 가능하다
* Selenium API 사용이 가능하다.
** Selenium selenium = new WebDriverBackedSelenium(driver, baseUrl);

{code}
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.htmlunit.HtmlUnitDriver;

public class Example {
public static void main(String[] args) {
// Create a new instance of the html unit driver
// Notice that the remainder of the code relies on the interface,
// not the implementation.
WebDriver driver = new HtmlUnitDriver();

// And now use this to visit Google
driver.get("http://www.google.com");

// Find the text input element by its name
WebElement element = driver.findElement(By.name("q"));

// Enter something to search for
element.sendKeys("Cheese!");

// Now submit the form. WebDriver will find the form for us from the element
element.submit();

// Check the title of the page
System.out.println("Page title is: " + driver.getTitle());
}
}
{code}