Selenium을 이용한 UI 테스트

Selenium을 이용한 UI 테스트

Added by 김정식, last edited by 김정식 on 11월 03, 2010

• 이 문서는 오라클클럽에서 작성하였습니다.
• 이 문서를 다른 블로그나 홈페이지에 게재하실 경우에는 출처를 꼭 밝혀 주시면 고맙겠습니다.~^^
• 출처 : http://www.gurubee.net/pages/viewpage.action?pageId=6259762&
• 오라클클럽 지식창고의 모든 문서는 크리에이티브 커먼즈의 저작자표시-비영리-동일조건변경허락(BY-NC-SA) 라이선스에 따라 자유롭게 사용할 수 있습니다.

• 1. Selenium 개요
• 1.1 Selenium이란
• 1.2 Selenium Components
• 2. Selenium IDE의 사용
• 2.1 Selenium IDE 설치
• 2.2 Selenium IDE 테스팅 예제
• 3. Selenium RC의 사용
• 3.1 다운로드 및 설치
• 3.1 Selenium RC 예제
• 4. WebDriver를 이용한 UI 테스트
• 4.1 WebDriver 개요
• 4.2 WebDriver 예제

1. Selenium 개요

1.1 Selenium이란

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

1.2 Selenium Components

1.2.1 Selenium IDE

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

1.2.2 Selenium Core

• Selenium의 Core 라이브러리

1.2.3 Selenium RC(Remote Control)

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

1.2.4 Selenium GRID

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

2. Selenium IDE의 사용

2.1 Selenium IDE 설치

2.1.1 다운로드 및 설치

• 다운로드 : http://release.seleniumhq.org/selenium-ide/
• 최신버전(현재 1.0.7) 다운로드 후 더블클릭해서 설치

2.1.2 설치 확인

• "Fire Fox > 도구" 메뉴 에서 설치 확인

2.1.3 Selenium IDE Toolbar

• 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 : 유저 브라우저의 액션을 레코딩 시작/정지 버튼

2.2 Selenium IDE 테스팅 예제

• Selenium IDE에서 Recording 후 저장된 테스트코드를 수행하면 된다.

2.2.1 Recording

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

2.2.2 저장된 테스트코드 수행

• ① 테스트 수행속도를 설정한다.
• ② Play 버튼을 눌러서 테스트를 수행한다.

2.2.3 테스트를 자바코드로 전환

• Selenium IDE에서 테스트 작성 후 IDE 메뉴에서 Options => Format 으로 원하는 언어를 선택하면 된다.
• 아래는 JUnit4 기반의 테스트 코드 예제이다.
• 테스트 코드의 "Untitled" 와 "change-this-to-the-site-you-are-testing"를 수정하면 된다.

  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("개리"));
  	}
  }

2.2.4 간단 데모

• Selenium IDE 데모 동영상 보기
• XPather Firefox AddOn을 이용하면 XPath를 쉽게 알 수 있다.

3. Selenium RC의 사용

3.1 다운로드 및 설치

• 다운로드 : http://selenium.googlecode.com/files/selenium-remote-control-1.0.3.zip
• 압축 해제 및 java -jar selenium-server.jar 로 실행한다.

3.1 Selenium RC 예제

3.1.1 Selenium RC 서버 Start

• java -jar selenium-remote-control-1.0.3\selenium-server-1.0.3\selenium-server.jar

3.1.2 JUnit 테스트

• 아래는 Selenium IDE로 저장한 자바코드를 Selenium RC를 이용해 테스트하는 예제이다.

  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("개리"));
      }
  }

• Selenium관련 maven 빌드 설정

  -- 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>

3.1.3 간단 데모

• SeleniumRC 데모 동영상 보기

4. WebDriver를 이용한 UI 테스트

4.1 WebDriver 개요

• 홈페이지 : http://code.google.com/p/selenium/?redir=1

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 버전이 개발되고 있다.

4.1.2 WebDriver 장점

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

4.1.3 WebDriver 단점

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

4.2 WebDriver 예제

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);

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());
    }
}

문서정보

• 이 문서는 오라클클럽에서 작성하였습니다.
• 이 문서를 다른 블로그나 홈페이지에 게재하실 경우에는 출처를 꼭 밝혀 주시면 고맙겠습니다.~^^
• 출처 : http://www.gurubee.net/pages/viewpage.action?pageId=6259762&
• 오라클클럽 지식창고의 모든 문서는 크리에이티브 커먼즈의 저작자표시-비영리-동일조건변경허락(BY-NC-SA) 라이선스에 따라 자유롭게 사용할 수 있습니다.