서론

전 시간에는 Selenium 을 사용하기 위한 환경을 구성하였고, 이번 시간에는 구성된 Selenium 을 이용해서 실제로 테스트 코드를 작성하는 방법을 알아 볼 예정이다. 만약에 환경 구성하는 방법에 대해서 아직 읽지 않은 분은 읽으면서 찬찬히 환경을 구성해보길 바란다.

그럼 바로 테스트 코드 작성 방법에 대해서 알아보도록 하자!

테스트 환경은 다음과 같다.

OS : Window 10 Pro
IDE : Pycharm Ultimate Edition
Python SDK : Python 3.8 (링크를 누르면 설치페이지로 이동합니다.)
Web browser : Google Chrome 90 (Chrome 권장)
Python Environment : virtualenv (pip)

본론

먼저 자신이 Selenium 코드 작성을 위해 사용하는 IDE를 실행시킨다. 그리고 이전에 만들었던 프로젝트를 켠다. (필자는 PyCharm 을 이용한다.)

여기서 잠깐!🖐
작성에 앞서서 많이 사용되는 Selenium 코드에 대해서 짚고 넘어가 볼 예정이다.

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait


def main():
    # 자신이 사용하는 웹드라이버 가져오기
    driver = webdriver.Chrome("C:/Users/junsugi/Desktop/chromedriver.exe")
    # get 메서드는 해당 URL로 이동한다.
    driver.get("https://google.com")
    # id로 element 찾기
    driver.find_element_by_id("id")
    # class로 하나의 element 찾기
    driver.find_element_by_class_name("className")
    # class로 여러개의 element 찾기
    driver.find_elements_by_class_name("className")
    # class 이외에도 name, tag name 등 다양한 요소로 element를 찾을 수 있다.
    # 필요한 상황에 따라서 진행하면 될 것 같다.

    # xpath로 element 찾기 (글에서 자세히 다룰 예정)
    driver.find_element_by_xpath("xpath")
    # 페이지 로딩 기다릴 수 있도록 해주는 라이브러리
    wait = WebDriverWait(driver, 5)

생각나는건 이정도 밖에 없다. 추가로 도움이 될만한 내용이 생각하면 적어넣도록 하겠습니다.

보통 Selenium 코드는 자신이 개발한 웹 사이트 테스트를 위해서 사용하지만 우리는 우선 시중에 나와있는 유명 사이트에서 어떻게 코드를 사용하는지를 확인해보겠습니다. 따라서 저는 LostArk 게임 홈페이지에서 저의 게임 아이디의 정보를 검색하고 데이터를 가져오는 시나리오로 해보겠습니다.

우선 로스트아크 공식홈페이지에 접속합니다. 그리고는 개발자 도구(F12) 를 켜서 자신이 찾아야 하는 element 를 찾습니다. 저는 전투정보실이라는 버튼의 element를 찾겠습니다.

여기서 내가 원하는 element 의 속성을 빠르게 찾는 방법은 개발자 도구를 켜면 다음과 같은 아이콘이 보입니다.

해당 아이콘을 누르고 내가 원하는 element를 클릭하면 곧바로 개발자도구에서 위의 그림과 같이 파란색으로 선택해줍니다.

이 과정에 단축기가 존재하는데 Ctrl + Shite + C 를 누르면 아이콘을 누르지 않아도 자동으로 Select 모드로 전환됩니다.

그리고나서 element 를 확인해봤더니 ID 값도 없고 Class, Name 값이 전부 없어서 위에서 배운 코드로는 element 를 찾을 수가 없는데, 이때 사용하는 방법이 xPath 입니다.

따라서 xPath를 이용해서 다음의 element 를 찾으면 다음과 같이 찾을 수 있습니다.

character = driver.find_element_by_xpath("//nav[@class='nav']//ul//a[@href='/Profile/Character']")
character.click()

왜 저렇게 xPath 가 입력이 되었는지 html 을 통해 살펴보자.

전투정보실 element가 들어있는 첫 시작 태그가 div 로 나와있다. 따라서 처음부터 타고 들어가는 방법도 있지만 나는 nav 태그가 이곳에서만 사용되는걸 개발자도구에서 검색해서 알았고 nav 부터 타고 들어가는 방향으로 택했다. 그런데 확실하게 내가 원하는 nav 로 검색되길 원했고 따라서 class 를 명시해줬다.

따라서 //nav[@class='nav'] 로 xPath 의 스타트를 끊었다. 그리고 nav 밑에 존재하는 태그가 h2 와 ul 이 있는데 h2 는 우리의 목적과 상관 없는 태그니까 무시하고 ul 태그를 열어보자. 그러면 많은 개수의 li 들이 있는데 우선 여기까지 하면 //nav//ul 이렇게 작성이 된다.

여기까지는 그냥 손쉽게 따라할 수 있다. 그 다음에 여기서 핵심인데, li 를 특정하게 구분해줄 수 있는 selector 가 없다. 그래서 필자가 생각한 부분은 a 태그에 href 값으로 전투정보실 element 를 찾는방법을 떠올렸다. 그래서 xPath 는 다음과 같이 적힐 수 있다.

//nav[@class='nav']//ul//a[@href='/Profile/Character']

따라서 ul 태그 밑에 a 태그를 찾는데 href 내용이 /Profile/Character 인 a 태그를 찾겠다는 의미다. 여기서 한가지 중요한 문법이 나오는데 태그이름[@셀렉터='값'] 으로 적으면 해당 element 를 찾을 수 있다. 셀렉터에는 id, class, name, href 등 다양한 값이 적힐 수 있는데 자세한 내용은 구글에 검색해보면 알 수 있다.

그래서 xPath 를 최종적으로 적어보면 다음 코드처럼 적힐 수 있다.

character = driver.find_element_by_xpath("//nav[@class='nav']//ul//a[@href='/Profile/Character']")
character.click() # a 태그 클릭하기

find_elements_by_xpath 가 있고 find_element_by_xpath 가 있는데 우리는 전투정보실 하나만 필요하기 때문에 element 로 사용한다. 혹시 복수의 element 를 찾아야 하는 경우는 elements 로 검색한다.

그리고 실행하면 전투정보실로 페이지가 이동하는 것을 볼 수 있다.

여기서 내 닉네임을 검색하고 정보를 print 해보는 부분까지 진행해보자. xpath 부분이 설명이 길어져서 그러지 나머지는 금방이다.

따라서 다시 html 을 분석해야 되는데 내가 값을 입력해야 되는 input 태그 element 를 찾아야 한다.

로밍아웃 ㄷㄷ 💁‍♂️

다행(?)스럽게도 input 태그에는 뭐가 많이 적혀있다. 따라서 이 부분도 class 를 이용해서 element 를 찾아보도록 하겠다. 코드는 다음과 같다.

    input = driver.find_element_by_class_name("input--profile-search")
    input.send_keys("저거좀")
    submit = driver.find_element_by_class_name("button--profile-search")
    submit.click()

send_keys 는 input 태그에 값을 넣을 때 사용된다. (자세한 부분은 추후에 설명)
click() 메서드는 버튼을 클릭할 때 사용한다.

여기까지 실행하면 다음과 같다.

마지막으로 검색된 값을 print 해서 console에 찍어보면 끝나는데, 해당 부분은 전부 다 똑같고 .text 메서드만 이용하면 된다. 따라서 간단하게 닉네임 데이터만 가져오면 다음과 같다.

    name = driver.find_element_by_class_name("profile-character-info__name")
    print(name.text)

작아서 보일지 모르겠는데 console 창에 '저거좀' 이 뜬 모습을 볼 수 있다.

따라서 이 과정을 전체 코드로 적으면 다음과 같다.

import time

from selenium import webdriver

def print_hi():
    # 자신이 사용하는 웹드라이버 가져오기
    driver = webdriver.Chrome("C:/Users/junsugi/Desktop/chromedriver.exe")
    # get 메서드는 해당 URL로 이동한다.
    driver.get("https://lostark.game.onstove.com/Main")
    character = driver.find_element_by_xpath("//nav[@class='nav']//ul//a[@href='/Profile/Character']")
    character.click()

    input = driver.find_element_by_class_name("input--profile-search")
    input.send_keys("저거좀")
    submit = driver.find_element_by_class_name("button--profile-search")
    submit.click()

    name = driver.find_element_by_class_name("profile-character-info__name")
    print(name.text)

    # driver session 종료
    driver.close()

if __name__ == '__main__':
    print_hi()

결론

최대한 쉽게 설명을 하려고 했는데 뭔가 중구난방 설명한 것 같았다. 지금까지 설명한 부분은 Selenium 의 기초의 기초만 설명했다. 나도 아직 전문적인 지식을 가진건 없지만 조금 더 알아야 할 부분들이 존재한다.

대게 페이지 로딩이 끝나기도 전에 element 를 찾는 경우 에러가 뜨는데 그 때 페이지 로딩을 기다렸다가 element 를 찾는 아주 좋은 라이브러리들도 있다.

이런 부분들은 다음 포스팅에서 다뤄보도록 할 예정이다.

다음 포스팅도 재빠르게 올릴 수 있도록 노력하겠습니다.

감사합니다.