Selenium을 사용한 웹 UI 테스트 자동화 환경 구축

서론

해당 글은 Selenium을 사용해 UI 테스트 자동화 환경을 구축하는 것을 정리한 글입니다.

 

UI 테스트 자동화에 Selenium을 사용한 이유는

UI 테스트 자동화를 지원하는 솔루션은 많지만 사용할 만한 솔루션은 유료이고 또 대부분의 솔루션이 Selenium을 base로 

만들어졌기에 인터넷에 관련 자료가 많아 굳이 유료 솔루션을 사용하는 것 보다는 Selenium을 직접 사용해 구현하는 것이 좋을 것 같아서 입니다.

 

이 글은 다음과 같은 순서로 구성됩니다.

• Selenium IDE 설치 (크롬 익스텐션)
• 크롬 드라이버 다운로드
• UI 테스트 자동화 프로젝트 생성 (IntelliJ, JAVA, MAVEN)
• dependency 추가 (selenium, unit, assert)
• UI 테스트 자동화 코드 작성 (Selenium IDE 활용)
• 실행 및 테스트

 

1. Selenium IDE 설치 (크롬 익스텐션)

HTML 구성 요소를 하나 하나 찾아가면서 UI 테스트 자동화 코드를 작성하는 것은 매우 지난한 작업이므로 이를 간단하게 도와주는 Selenium IDE를 설치합니다.

Selenium IDE는 크롬 익스텐션 프로그램으로 이를 사용하면 직접 개발한 개발자가 아니더라도 UI 테스트 자동화 코드를 작성할 수 있습니다.

 

설치

• 크롬 실행
• 우측 상단의 “확장 프로그램 설치” 버튼 클릭
• 내 확장 프로그램에서 "Selenium IDE” 검색 후 설치

 

설치하면 확장 프로그램에 아래와 같이 Selenium IDE가 보여집니다.
설치된 Selenium IDE를 클릭해 실행합니다.

 

처음 실행이므로 “Record a new test in a new project”를 클릭합니다.

 

임의의 프로젝트 이름 입력 후 OK 버튼 클릭합니다.

레코딩을 시작할 시작 URL 입력 후 “Start Recording” 버튼 클릭합니다.

 

그럼 아래와 같이 입력한 URL로 크롬이 실행되고 우측 하단에 셀레니움 IDE가 레코딩 중이라고 표시됩니다.

 

이제 해당 브라우저 화면에서 임의의 Action(중앙의 검색창을 선택한 후 ’selenium’이라는 문자 입력 후 엔터키 선택)을 취하면 아래 그림과 같이 Selenium IDE에 해당 Action들이 기록됩니다.

 

우측 상단 레코딩 아이콘을 눌러 레코딩 중지 후 아래와 같이 임의로 테스트 이름 입력 후 “OK” 버튼 클릭합니다.

 

다시 우측 최상단 디스켓 아이콘을 눌러 프로젝트 저장합니다.

 

저장한 파일의 Play는 selenium IDE의 상단 중앙 쯤에 있는 play 아이콘을 클릭하면 크롬 브라우저가 실행되어 방금전 녹화한 내용이 PLAY되는 것을 확인 할 수 있습니다.

 

 

2. 크롬 드라이버 다운로드

selenium UI 테스트 자동화 기능을 구현하기 위해서는 내 PC에 설치된 크롬 브라우저와 동일한 버전의 크롬 드라이버를 설치해주어야 합니다

버전 확인은 설치된 크롬의 정보에서 버전 정보 확인 가능(아래 그림 참조)합니다.

버전에 맞는 크롬 드라이버를 아래 사이트에서 다운로드 받습니다.
  -> https://chromedriver.chromium.org/downloads

제 PC에 설치된 크롬은 120.xx 버전이라 해당 사이트 접속 후 상단 붉은색 글자의 내용을 참고하여 관련 대시보드 화면으로 이동하여 다운로드 받았습니다.

 

다운로드한 zip 파일은 압축 해제 후 잘 관리합니다.
  -> chromedriver-mac-x64.zip

3. UI 테스트 자동화 프로젝트 생성 (IntelliJ, JAVA, MAVEN)

사전 작업은 완료하였으므로 이제 본격적으로 UI 테스트 자동화 프로젝트를 생성하도록 하겠습니다.

IntelliJ를 실행해 “New Project” 선택 후 아래와 같이 JAVA, MAVEN을 선택 후 “Create” 버튼을 눌러 프로젝트를 생성합니다.

 

4. dependency 추가 (selenium, unit, assert)

생성된 프로젝트의 pom.xml 파일을 선택해 아래와 같은 dependency(selenium, junit, assertj)들을 추가합니다.

<dependencies>
        <dependency>
            <groupId>org.seleniumhq.selenium</groupId>
            <artifactId>selenium-java</artifactId>
            <version>3.141.59</version>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-api</artifactId>
            <version>5.9.3</version>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-engine</artifactId>
            <version>5.9.3</version>
        </dependency>
        <dependency>
            <groupId>org.junit.platform</groupId>
            <artifactId>junit-platform-commons</artifactId>
            <version>1.9.3</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.assertj/assertj-core -->
        <dependency>
            <groupId>org.assertj</groupId>
            <artifactId>assertj-core</artifactId>
            <version>3.24.2</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

 

dependency 추가 후 “sync” 아이콘을 클릭해 문제 없는지 확인합니다.

 

5. UI 테스트 자동화 코드 작성 (Selenium IDE 활용)

이제 준비가 끝났습니다.
HTML을 분석해서 UI 테스트 자동화 코드를 작성하는 것은 매우 지난한 일이므로 Selenium IDE를 활용해 UI 테스트 자동화 코드를 작성해보도록 하겠습니다.
크롬 확장프로그램에서 Selenium IDE를 실행 해 아까 저장한 테스트 프로젝트를 불러옵니다.

 

좌측 “더보기” 아이콘을 선택 후 “Export” 버튼을 선택합니다.

 

“Java JUnit”를 선택하고 “Export” 버튼을 선택해 IDE가 자동으로 작성한 테스트 코드를 Java JUnit 코드로 내보냅니다.

 

내보낸 테스트 코드를 프로젝트에서 불러옵니다.

 

이렇게 불러온 코드를 아레와 같이 Main.java 파일의 main()함수에 추가합니다.

 

추가 후 코드의 맨 앞과 맨 하단에 누락된 작업을 추가합니다.
   - 압축해제한 크롬 드라이버 위치 설정

 

프로젝트를 Run하면 크롬 브라우저가 실행되어 위 코드에 맞는 동작을 수행하는 것을 확인할 수 있습니다.