React에 Selenium 시작하기

멋쟁이 개발자
8 min readMar 7, 2021

--

Selenium?

Selenium은 웹 브라우저(Chrome, Firefox, IE, Safari 등)의 자동화를 가능하게 하고 지원하는 다양한 도구와 라이브러리를 포함한 프로젝트입니다.

웹 브라우저들은 같은 방법으로 웹 어플리케이션을 출력합니다. 그러나 각각의 브라우저들은 고유의 렌더링 엔진이 있고, HTML을 약간씩 다르게 다룹니다. 그렇기 때문에 웹 개발자는 웹 어플리케이션을 동시에 여러 장비와 브라우저에서 정상적으로 동작하는지 테스트를 해야 합니다. 이 과정에서 Selenium을 이용하면 마치 사람이 이용하는 것처럼 웹 브라우저를 제어해서 요청하고 응답을 받아올 수 있습니다.

Selenium 시작하기

웹 드라이버 다운받기

웹 브라우저 중에 크롬을 선택해서 진행했습니다.

  1. 크롬 버전 확인하기
    브라우저에 맞지 않는 버전을 다운받으면 스크립트가 구동되지 않으므로, 현재 설치된 버전을 먼저 확인합니다.

크롬에서 맞춤설정 및 제어 > 도움말 > Chrome 정보에서 현재 설치된 크롬의 버전정보를 확인할 수 있습니다.

2. Webdriver Download

구글에서 chrome webdriver download를 검색해서 위의 링크에 접속합니다.

자신의 버전에 해당하는 드라이버 다운로드를 클릭하면 위와 같은 화면이 보여지는데 스스로의 운영체제에 맞는 드라이버를 다운받습니다.

저는 맥북을 사용하기 때문에 mac64를 다운받았습니다.

3. 다운로드 한 드라이버의 경로 알기

드라이버의 경로는 아래의 간단한 예제를 진행할 때 아주 중요합니다. 예제를 간단하게 진행하기 위해서 다운로드 한 드라이버를 데스크탑으로 옮기겠습니다.

아주 간단한 예제

아주아주 간단한 예제로 Selenium을 맛보겠습니다.

카운터 예제

우선 리액트에서 아래와 같은 카운터 컴포넌트를 만들어줍니다. +버튼을 클릭하면 counter의 숫자가 증가하고, -버튼을 클릭하면 counter의 숫자가 감소합니다.

Selenium 적용

Selenium은 Python을 사용해서 구현하며, 개발도구는 PyCharm을 사용했습니다.
selenium을 사용하기 위해서 PyCharm Terminal에서 install을 합니다.

pip install selenium
Pycharm에서 selenium 설치

그 후 실행할 파이썬 파일에서 다음 세줄의 코드만을 입력하면 웹 브라우저를 실행할 수 있습니다.

# selenium 설치 후 import
from selenium import webdriver
# Chrome을 조작용 driver로 선언
driver = webdriver.Chrome('chromedriver 경로')
# 크롬드라이버로 웹 사이트 접속
driver.get('http://192.168.1.4:3000')

두번째 코드의 괄호() 안에는 설치한 chromedriver 경로를 작성합니다. 저의 경우는 위에서 데스크탑에 옮겼기 때문에 다음과 같이 작성했습니다.

driver = webdriver.Chrome('/Users/go-eunjeong/Desktop/chromedriver')

위 세줄만 입력해도 아래 이미지와 같이 크롬드라이버가 정상적으로 동작하는 것을 확인할 수 있습니다.

크롬드라이버를 이용해서 리액트 웹 접속

웹 사이트 제어

Selenium을 이용해서 카운터를 조작하겠습니다.

  1. +버튼 3번 클릭
  2. - 버튼 4번 클릭
  3. 브라우저 디바이스 닫기
  • 1번과 2번을 구현하기 위해서는 버튼 객체에 접근해야 합니다. 객체의 아이디를 이용해서 접근하고, 클릭 이벤트를 발생시켜서 동작하도록 합니다.
# id가 'plus'인 객체를 찾아서 클릭이벤트 발생
driver.find_element_by_id('plus').click()
  • 크롤링은 짧은 시간안에 빠르게 동작하기 때문에, 육안으로 확인하기가 어려워서 버튼을 반복 클릭할 때 time함수를 사용해서 지연시켰습니다.
# time 모듈을 import해서 1초 일시정지
import time
time.sleep(1)
  • 3번을 구현하기 위해서는 close함수를 사용합니다.
driver.close()

Notification — 카카오

Selenium이 결국 자동화 테스트를 위해서 사용하는 거라면, notification 처리가 필요하겠죠?

간단하게 카운터가 음수가 되었을 때, 나에게 카카오톡 메시지를 보내도록 구현해보겠습니다.

Kakao Developers에서 애플리케이션 등록을 한 후

위의 기능을 구현하기 위해서는 Kakao Developers에서 애플리케이션 등록하고, 토큰 키를 발급받는 과정이 먼저 필요합니다.

애플리케이션을 등록하는 방법은 생략하고, 토큰 키를 발급받는 과정은 Git에서 selenium > getKakaoToken.py 파일을 확인해 주시기 바랍니다.

getKakaoToken.py에서 !!!Rest API!!! 의 영역에는 kakao deveolpers > 요약정보 > REST API키를 입력해줍니다.

REST API 키 값 얻기

getKakaoToken.py에서 !!!인증 코드 입력!!! 의 영역에는 인증코드를 입력해야하는데, 인증코드는 여기를 참고해주시면 되는데, 요약하면 다음 URL을 만들어주면 됩니다.

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code&scope=talk_message

{REST_API_KEY}의 자리엔 위의 REST API키를 입력하고, {REDIRECT_URI}의 자리에는 아래 이미지처럼 내 애플리케이션 > 제품설정 > 카카오로그인의 Redirect URI값을 입력합니다.

Redirect URI 얻기

그렇게 완성된 URL로 접속하면, 토큰값을 확인할 수 있습니다.

토큰 키 값 확인

이렇게 얻은 토큰 값으로 메시지를 보낼 수 있습니다.

Git에서 selenium > main.py 에서 메시지 전송 코드를 확인 할 수 있습니다.

구현 영상은 및 카카오 메시지는 다음과 같습니다.

구현영상
카카오 메시지

전체 코드는 Git에서 확인이 가능합니다.

--

--