[Selenium, Selenide] 셀레니움과 셀레나이드

셀레니움(Selenium)

셀레니움

• 셀레니움은 브라우저 인스턴스를 원격으로 제어하고 사용자와 브라우저의 상호 작용을 도와주는 웹 브라우저 자동화를 위한 프레임워크이다.
• 셀레니움을 사용하면 최종 사용자가 수행하는 일반적인 활동을 시뮬레이션할 수 있다.
• 필드에 텍스트 입력, 드롭 다운 값 및 확인란 선택, 문서의 링크 클릭 또한 마우스 이동, 임의 Javascript 실행 등과 같은 다른 많은 컨트롤을 제공한다.
• 사용자에게 브라우저를 제어할 뿐만 아니라 이러한 그리드를 쉽게 확장하고 배포할 수 있는 도구와 문서를 제공하여 이를 현실로 만드는 데 도움을 주는 것이 목표이다.
• 셀레니움의 장점으로는 일반 코드 재사용 기능, 코드 유지 관리 용이성, 코드 가독성 향상, 테스트 실행 시간 감소, 스크립트 유지 관리 비용 감소, 보고 용이성 등이 있다.

 

웹 드라이버(Web Driver)

• 웹 드라이버는 웹 브라우저의 동작을 제어하기 위한 언어 중립적 인터페이스를 정의하는 API 및 프로토콜이다.
• 웹 드라이버는 사용자가 셀레니움 서버를 사용하여 로컬 또는 원격 시스템에서 브라우저 자동화 측면에서도 도약을 표시하는 것처럼 기본적으로 브라우저를 구동한다.
• 웹 드라이버를 통해 셀레니움은 Chrome, Firefox, Edge 및 Safari와 같은 주요 브라우저를 지원한다. 가능한 경우 웹 드라이버는 자동화를 위한 브라우저의 기본 제공 지원을 사용하여 브라우저를 구동한다.
• Driver 설치시, 버전 확인 후 설치하기 (버전이 다르면 실행이 안될 수도 있음)

 

브라우저 상호 작용 

브라우저 정보 얻기

타이틀 얻기 : 브라우저에서 현재 페이지 제목을 읽을 수 있다.

drive.title

 

현재 URL 가져오기 : 브라우저의 주소 표시줄에서 현재 URL을 읽을 수 있다.

driver.currentUrl

 

 

브라우저 탐색

이동 : 웹 사이트를 열 수 있다.

// Convenient
driver.get("https://selenium.dev")

// Longer way
driver.navigate().to("https://selenium.dev")

 

뒤로 가기 : 브라우저의 뒤로 버튼 누르기

driver.navigate().back()

 

앞으로 가기 : 브라우저의 앞으로 버튼 누르기

driver.navigate().forward()

 

새로 고침 : 현재 페이지를 새로 고침

driver.navigate().refresh()

 

 

JavaScript 알림, 프롬프트 및 확인

Alerts : 사용자 지정 메시지를 표시하는 경고와 대부분의 브라우저에서 OK로 레이블이 지정된 경고를 해제하는 단일 버튼

webDriver는 팝업에서 텍스트를 가져오고 이러한 경고를 수락하거나 해제할 수 있다.

// 경고를 활성화하기 위한 링크 클릭
driver.findElement(By.linkText("See an example alert")).click()

// 경고가 표시될 때까지 기다렸다가 변수에 저장
val alert = wait.until(ExpectedConditions.alertIsPresent())

// 경고 텍스트를 변수에 저장
val text = alert.getText()

// OK 버튼 누를 때
alert.accept()

 

Confirm : Confirm Box는 사용자가 메시지 취소를 선택할 수 있다는 점을 제외하면 Alerts 와 유사하다.

// 경고를 활성화하기 위한 링크 클릭
driver.findElement(By.linkText("See an example alert")).click()

// 경고가 표시될 때까지 기다림
wait.until(ExpectedConditions.alertIsPresent())

// 경고를 변수에 저장
val alert = driver.switchTo().alert()

// 재사용을 위해 경고를 변수에 저장
val text = alert.text

// 취소 버튼 누를 때
alert.dismiss()

 

prompt : Prompt는 텍스트 입력도 포함한다는 점을 제외하면 Confirm과 유사하다. WebDriver의 전송 키를 사용하여 응답을 채울 수 있다. 취소 버튼을 누르면 텍스트가 제출되지 않는다.

// 경고를 활성화하기 위한 링크 클릭
driver.findElement(By.linkText("See an example alert")).click()

// 경고가 표시될 때까지 기다렸다가 변수에 저장
val alert = wait.until(ExpectedConditions.alertIsPresent())

// 메세지 입력
alert.sendKeys("Selenium")

// OK 버튼 누를 때
alert.accept()

 

 

디자인 패턴 및 개발 전략 - POM

Page Object Model (POM)

개요

• 페이지 객체(Page Object)는 테스트 유지 관리를 강화하고 코드 중복을 줄이기 위해 테스트 자동화에서 널리 사용되는 디자인 패턴이다.
• 테스트는 해당 페이지의 UI와 상호 작용해야 할 때마다 이 페이지 객체 클래스의 메서드를 사용한다.
• 즉, 페이지에 대한 UI가 변경되면 테스트 자체는 변경할 필요가 없고 페이지 객체 내의 코드만 변경하면 된다.

 

장점

• 테스트 코드와 페이지 별 코드 사이에는 명확한 구분이 있다.
• 이러한 서비스를 테스트 전체에 분산시키지 않고 페이지에서 제공하는 서비스 또는 작업에 대한 단일 리포지토리가 있다.

 

Assertions in Page Object

• 페이지 객체 자체는 verifications나 assertions를 수행하면 안된다. 이는 테스트의 일부이며 페이지 객체가 아닌 테스트 코드 내에 있어야 한다.
• 페이지 객체에는 페이지의 표현과 메서드를 통해 페이지가 제공하는 서비스가 포함되지만 테스트 대상과 관련된 코드는 페이지 객체 내에 없어야 한다.
• 페이지 객체 내에 있을 수 있는 단일 verifications은 페이지 및 페이지의 중요한 요소가 올바르게 로드되었는지 확인하는 것이다. 이 verifications은 페이지 객체를 인스턴스화하는 동안 수행해야 한다.

 

구현 참고 사항

• 구현보다는 상호 작용하는 서비스에 대해 생각하고 시도하도록 권장하기 때문에 PageObjects는 기본 WebDriver 인스턴스를 노출하지 않도록 해야 한다.
• 이를 용이하게 하려면 PageObject의 메서드가 다른 PageObject를 반환해야 한다. 
• 페이지가 서로 관련되는 방식으로 구성되어야 한다.

 

 

 

 

셀레나이드(Selenide)

셀레나이드

• 셀레니움 WebDriver 도구가 정확히 테스트 도구가 아니라 브라우저 구동 도구라는 점을 감안할 때 Selenium을 통해 생성된 다른 솔루션
• 셀레나이드는 본질적으로 프로그램 코드를 통해 자동화된 테스트를 작성하기 위한 도구로 만들어졌다.
• 서버/그리드에서 HTTP 요청을 생성하고 보내는 데 도움이 된다.
• 간단한 구성, 간결한 구문 및 스마트 대기와 같은 고유한 기능의 긴 목록을 제공한다.
• 셀레나이드를 사용하는 주요 목적 중 하나는 웹 제품의 작동을 쉽게 테스트할 수 있도록 스크립트를 만드는 것이다.
• 장점으로는 필요한 웹 개체 감지, 이벤트 실행 확인, UI(사용자 인터페이스) 작업에 집중하는 것이다. 또한 유창한 API와 함께 안정적인 테스트를 위한 Ajax 지원을 제공한다.

 

간단한 기능 3가지

1. 페이지 열기
2. $(요소).doAction()
3. $(요소).check(조건)

open("/login");
$("#submit").click();
$(".message").shouldHave(text("Hello"));

 

셀레나이드 공식문서 : https://selenide.org/javadoc/current/

 

셀레니움과 셀레나이드의 차이

Selenium	Selenide
셀레니움 WebDriver는 자동화된 브라우저 테스트 도구이다. 개발자가 다양한 브라우저와 플랫폼에서 웹 애플리케이션의 유효성을 검사할 수 있도록 개발 되었다.	반면 셀레나이드는 셀레니움의 WebDriver를 기반으로 하는 프레임워크이다. 더 간단하고 쉬운 옵션으로 자동 테스트를 하기 위해 개발되었다.
셀레니움은 무엇보다도 웹 브라우저 자동화 도구의 역할을 독점적으로 수행하도록 설계되었다.	셀레나이드는 셀레니움 WebDriver를 사용하여 Java에서 간결하고 읽기 쉽고 상용구가 없는 테스트를 작성하기 위한 라이브러리 역할을 한다.
셀레나이드는 UI 테스트에서 셀레니움 WebDriver를 사용하기 위한 간결한 API를 제공한다.	셀레나이드는 대부분 Ajax/타이밍 문제를 해결하여 테스트를 안정적으로 만든다.
Selenium Example:By username = By.name("username"); driver.findElement(username).click();	Selenide Example:By username = By.byName("username"); $(username).click();
셀레니움 WebDriver는 더 넓은 범위의 작업에 적합한 저수준 API를 제공한다.	셀레나이드 API는 더 높은 수준이지만 UI 및 승인 테스트를 위해 특별히 설계되었다.

 

오늘날 애플리케이션 개발에서 볼 수 있는 새로운 복잡성으로 인해 많은 개발자가 셀레니움 WebDriver 도구 대신 셀레나이드 도구를 선택한다.

이것은 주로 셀레나이드가 셀레니움 WebDriver를 사용하여 테스트 자동화를 위해 특별히 개발되었기 때문이다.

또한 셀레니움 WebDriver와 쉽게 연결할 수 있는 좋은 API도 함께 제공된다.

 

특정 프로젝트에서 웹 브라우저를 작동하기 위해 광범위한 라이브러리가 필요한 경우 셀레니움을 사용하는 것이 더 좋다.

셀레니움은 웹 기반 응용 프로그램을 테스트하기 위해 특별히 설계되었기 때문이다.

 

궁긍적으로 셀레니움과 셀레나이드 사이의 이상적인 선택은 프로젝트 요구 사항과 주어진 시간 프레임 및 설정된 예산 내에서 원하는 결과를 달성하는 데 도움이 될 수 있는 것이 무엇인지에 따라 크게 달라진다.

 

XPath

정의

• XPath(XML Path Language)는 W3C의 표준으로 XML(Extensible Markup Language) 문서의 구조를 통해 경로(Path) 위에 지정한 구문을 사용하여 항목을 배치하고 처리하는 방법을 기술하는 언어이다.
• XML 표현보다 더 쉽고 약어로 되어 있으며, XSL변환(XSLT)과 XML지시자 언어(XPointer)에 쓰이는 언어로 XML 문서의 Node를 정의하기 위해 경로식(Path Expression)을 사용하며, 수학 함수와 기타 확장 가능한 표현들이 있다.
• XPath는 W3C의 권고 사항으로 견고한 표준이 확립되어 있고, 다양한 API와 함수, 경로 식(Path Expression) 덕분에 유연성과 확장을 요하는 서버 통신이나 도큐먼트 출력, 기타 XML을 사용하는 여러 분야에 널리 사용되고 있다.

 

XPath의 데이터 모델

• XML 문서는 트리 구조의 Node들로 구성된다.
• XML 문서의 트리 구조는 단지 개념적 구조이다.
• XPath는 XML 문서를 트리 구조로 모델링 하여 처리한다.
• XML 문서의 계층 구조, 즉 트리 구조에서 Node들을 식별, 선택, 조작하기 위해 XPath 표현 식을 사용한다.

 

XPath의 표현식과 함수

• Expression : XPath는 XML에서 특정 Node나 Node들을 선택하고자 할 때 파일 경로와 비슷한 경로 식(Path Expression)을 사용한다. 파일 경로와 마찬가지로 절대 경로와 상대 경로 또한 가진다.
• Functions : XPath는 100여개 이상의 내장함수를 포함하고 있다. 이러한 함수들은 문자열, 숫자, 날짜와 시간 비교, 시퀀스 생성, 논리값 등 매우 다양하다.

 

XPath의 문법

1. Node 선택
2. 표현설명

   nodename	Node명이 "nodename"인 Node 선택
   /	루트 Node로 부터 선택
   //	현재 Node로부터 문서상의 모든 Node를 조회
   .	현재 Node 선택
   ..	현재 Node의 부모 Node 선택
   @	현재 Node의 속성 선택

3. 술부(Predicates) : '[...]'의 형태로 기술되며, 특정 값이나 조건에 해당 하는지 여부를 판별한다.
   ex) //title[@lang] : 속성 lang을 갖는 모든 title 엘리먼트를 선택
4. 불특정 Node 선택 : wildcard를 이용하여 특정하지 않은 Node(들)를 선택한다.
5. 표현설명

   *	매칭 되는 모든 ElementNode
   @*	매칭 되는 모든 속성 Node
   Node()	현재 Node로부터 문서상의 모든 Node를 조회

6. 복수경로 선택 : 복수의 경로식을 사용하여 Node(들)를 선택한다.
   ex) //title | //price : 문서상의 모든 title ElementNode와 price ElementNode를 선택
7. 축(Axes) : 현재 Node와 관련된 Node 셋을 정의한다.