[사이냅소프트 사내 기술 세미나 Inno Tech Day #2] Selenium의 종류와 활용법

2022-06-22 | 개발 이야기

안녕하세요.
인공지능·전자문서 전문기업 사이냅소프트입니다.

2022년, 사이냅소프트 혁신개발본부에서 진행된 기술세미나 ‘Inno Tech Day’의 두 번째 이야기!😊

”동료와 함께 배우고 공유하며 성장합니다.”

세상에는 많은 개발 기술이 존재합니다. 문제를 해결하기 위한 방법들도 너무 많을 것이고요.
이 모든 것들을 누군가 혼자서 공부해서 알기도 어렵고 해결책을 찾아낼 수도 없을 것입니다.
우리가 해결해야 할 문제와 알아야 할 것들이 많아진 지금, 스스로의 노력과 더불어 타인을 통해 배우고 타인과 함께해야만 원하는 만큼 성장하고 발전할 수 있는 때인 것 같습니다.
우리에게는 좋은 동료가 있고, 좋은 환경이 있고, 꽤 오랜 시간 쌓아놓은 노하우도 있습니다. 기술혁신본부에서는 멋진 동료들이 축적한 기술적 가치를 함께 나누고 함께 성장할 수 있는 기회를 만들기 위해 사이냅소프트의 사내 기술 세미나 ‘Inno Tech Day’를 시작하게 되었습니다.

by. Mobidic

——————-

Inno Tech Day. 두 번째 이야기

Selenium의 종류와 활용법

문서솔루션팀 배선영

사이냅소프트 개발자들의 작업 효율성을 높일 수 있는 브라우저 자동화 도구인 Selenium을 소개하려 합니다.

Selenium은 브라우저 동작을 자동화할 수 있는 도구이며, 주로 테스트를 목적으로 사용됩니다!
사용 목적에 따라 다양하게 활용할 수 있는 소프트웨어죠.

이번 세미나에서는 Selenium의 종류와 구동 방식, 그리고 사이냅소프트에서는 현재 어떻게 사용하고 있는 지 간단하게 설명할게요!

Selenium의 종류

3가지의 종류가 있으며, 사용 목적에 맞춰 적합한 것을 선택할 수 있습니다.

종류

Selenium IDE

Selenium WebDriver

Selenium Grid

특징

– 프로그래머가 아니어도 손쉽게 사용.

– UI 를 통해 ‘Capture + Replay + 파일 저장’ 가능

– Chrome, FireFox, Edge의 확장 프로그램으로 이용 가능

– 스크립트를 통해 브라우저를 컨트롤하여 동작 수행

– 여러가지 프로그램 언어에서 사용 가능한 API를 제공하여 세밀한 브라우저 제어 가능

– Grid 기반 분산 환경 구성 가능

– 여러 컴퓨터와 다양한 브라우저로 병렬 수행 가능

Selenium 아키텍처

Selenium의 아래 그림과 같이 좌측부터 Selenium Client Libary, JWP(JSON Wire Protocol). Browser Driver, Real Browser로 구성됩니다.

위 아키텍처를 통해 구동되는 방식은 다음과 같습니다.

먼저 Selenium Client Libary가 JWP(JSON Wire Protocol)를 통해 Browser Driver에게 구동을 명령합니다.
이때 Selenium은 다양한 언어를 지원하고 있어 사용자가 편한 언어를 사용해 스크립트를 작성할 수 있어요.

💡여기서 잠깐! JWP가 뭘까요?

JWP는 Client와 Server가 통신을 원활하게 하는 Connect 역할을 수행합니다. JSON 포맷과 Rest API, HTTP를 사용해 통신하고 있죠.

자, 다시 돌아와서~
명령을 수신한 Browser Driver는 자동화 스크립트를 이용하여 Real Browser에게 명령을 전달하고!
사용자가 요청한 명령은 Real Browser를 통해 실행됩니다.

Selenium 활용

마지막으로 저희가 Selenium을 어떻게 사용하고 있는지 소개하겠습니다.
저희는 Selenium을 주로 테스트 목적으로 사용하고 있습니다.

1. HTML 문서뷰어 품질 테스트

HTML 문서 뷰어는 문서의 변환 결과를 HTML 파일로 변환하여 전용 오피스나 아래한글 프로그램 없이 브라우저상에서 언제든 문서 뷰잉을 하는 프로그램입니다.
많은 공공 기관 홈페이지에 적용되어 있어서 첨부파일 미리보기 기능으로 사용해 보신 적이 한번 쯤은 있으실 겁니다.

웹 브라우저 상에서 동작하는 HTML 문서 뷰어는 크로스 브라우저 환경에서 발생하는 다양한 문제를 정확히 파악하고 신속하게 해결할 필요가 있었습니다.
이를 위해서 Selenium WebDriver를 도입하여 HTML 결과에 대한 비교 검증을 수행하고 있습니다.

간단한 수행 단계는 다음과 같이 진행됩니다.

실제로 테스트를 해보면 아래와 같은 결과가 출력됩니다.
세 가지 이미지는 원본, 비교 대상, 비교 결과 순서이며 비교 시 차이 있는 부분은 붉은 색으로 표시됩니다.

참고할 수 있도록 Selenium 스크립트의 일부를 공개하겠습니다. 짜잔!

1. 웹페이지 캡처 Selenium 스크립트 (링크)

짧은 스크립트 몇 줄로 HTML 결과를 캡처할 수 있습니다. 참 쉽죠.

# 브라우저 열기

options = webdriver.ChromeOptions()

options.add_argument(‘headless’) # 창이 뜨지 않게 설정

options.add_argument(‘window-size=970×1080’) # 창 크기 조절

options.add_argument(“disable-gpu”)

driver = webdriver.Chrome(‘chromedriver’, chrome_options=options)

# 웹페이지 캡처

driver.get(url) # 페이지 열기 요청

driver.implicitly_wait(3) # 본문 로딩을 기다림

driver.get_screeshot_as_file(outputPath) # 캡처

2. 이미지 파일 비교 생성 (feat. ImageMagick)

이미지의 픽셀 비교는 ImageMagick 오픈소스의 compare 기능을 활용하고 있습니다.

# 이미지 파일 비교 생성

# prevImagePath, nextImagePath : 비교할 이미지 경로

# diffImagePath : 비교된 이미지를 저장할 경로

def generateImageDiff(prevImagePath, nextImagePath, diffImagePath):

retCode, maxMemory, executeTime, fo = SysCall([IMAGE_MAGICK_PATH, “compare”, “-metric”, “PSNR”, prevImagePath, nextImagePath, diffImagePath], 600)

return fo

품질을 확인하기 위해 문서 별, 브라우저 별로 일일이 눈으로 확인해야 하는 노동집약적인 작업을

이렇게 자동화하여 비교적 간단히(?) 해결할 수 있습니다.

크로스 브라우징 시 렌더링 문제로 골머리를 앓고 있으신 다른 개발자 분들에게 도움이 될 수 있기를 바랍니다. 🙂

2. 문서 뷰어 스킨 UI Test

문서 뷰어 스킨은 다양한 브라우저상에서 문서를 편리하게 볼 수 있도록 여러 가지 기능(검색, 어노테이션, 인쇄, …)을 제공합니다.
사용자는 뷰어 스킨을 통해 다양한 브라우저 상에서 여러 기능을 사용하게 되는데요.
원활한 사용자 경험을 제공하기 위해 다양한 브라우저 UI Test 가 필수적이었고 Selenium을 도입하여 짧은 시간에 효과적이고 정확한 검증을 수행할 수 있었습니다.

다양한 환경에 대응하고 시간을 절약을 위하여 Selenium Grid 를 사용하였고 CI 도구(젠킨스)와 연계하여 정의한 테스트 시나리오를 자동으로 수행하고 결과를 검증하도록 하였습니다.

Selenium Grid 환경은 “젠킨스 Selenium Grid 플러그인”을 사용해 구성했습니다.
자세한 설명은 젠킨스 플러그인 공식 사이트에서 확인할 수 있어요.
https://plugins.jenkins.io/selenium/

추후 시간이 허락한다면 관련 내용도 포스팅 준비해 보겠습니다. 나중에…..!

다음 영상을 통해 실제로 테스트되는 과정을 확인하실 수 있습니다.
정말 빠르죠. 기계는 일하고 우리는 커피 마시고….