이전 포스팅에서는 Locator의 종류를 설명했습니다.

이번 시간에는 Locator 사용방법을 설명드리겠습니다.

Selenium WebDriver에서 요소 찾기는 Selenium WebDriver 및 WebElement 클래스에서 제공하는 findElement() 및 findElements() 메서드를 사용하여 수행됩니다.

1. findElement() 메소드는 한개의 Web Element(웹요소) 를 동작하는데 사용합니다.  

    예 : driver.findElement(By.LocatorStrategy(“Locator Value”)

2. findElements() 메소드는 웹 페이지내의 Web Elements(웹요소들)을 동작하는데 사용합니다. 이 메소드는 목록 인터페이스를 통해 WebElement(웹요소) 목록을 반환하며, 이를 반복하고 작업을 수행할 수 있습니다.

    예 : List <WebElement> elementname = driver.findElements(By.Locator(“Locator Value”))

ID: ID 로케이터는 id 속성 값으로 WebElement를 찾는 데 사용됩니다. 대부분의 ID는 WebElement(웹요소)에 대해 고유합니다. 여기서 id 속성의 값을 매개변수로 전달해야 합니다.

사용방법 : driver.findElement(By.id(“element id”))

예 : driver.findElement(By.id(“nav-search-submit-button”))

Name: Name 로케이터는 이름 속성 값으로 WebElement를 식별하는 데 사용됩니다. 동일한 이름 로케이터를 가진 여러 요소가 있는 경우 페이지의 첫 번째 요소가 선택됩니다.

사용방법 : driver.findElement(By.name(“element name”))

예 : driver.findElement(By.name(“email”))

ClassName: ClassName 로케이터는 class 속성 값으로 WebElement를 식별하는데 사용합니다.

사용방법 : driver.findElement(By.className (“element class”))

예 : driver.findElement(By.className(“a-button-inner”))

 

TagName: TagName 로케이터는 findElements() 메소드와 함께 웹페이지에서 유사한 여러 항목을 식별하는 데 사용됩니다. HTML 태그의 도움으로 WebElements를 찾는 데 사용됩니다.

사용방법 : driver.findElement (By.tagName (“HTML tag name”));

예 : List<WebElement> lists=driver.findElements(By.tagName(“a”))

Link Text: 링크 텍스트는 정확한 텍스트로 요소를 식별하는 데 사용됩니다.

사용방법 : driver.findElement(By.linkText (“linktext”))

예 : driver.findElement(By.linkText(“Today's Deals”))

 

PartialLinkText: 이 방법은 링크 텍스트의 일부가 포함된 요소를 찾는 데 도움이 됩니다. (linkText는 텍스트 전부, PartialLinkText는 일부라고 생각하시면 됩니다.)

사용방법: driver.findElement(By.partialLinkText (“partiallinktext”))

예 : driver.findElement(By. partialLinkText (“Service”))

Xpath: XPath는 XML 경로 언어를 나타내며, 페이지의 HTML 구조를 탐색하는 데 사용됩니다. 또한 HTML DOM 구조를 사용하여 웹 페이지에서 요소의 위치를 ​​찾기 위해 HTML 및 XML 문서 모두에 사용할 수 있습니다.

사용방법 : driver.findElement(By.xpath (<xpath>))

예: driver.findElement(By.xpath("//input[@id='twotabsearchtextbox']")

CSS Selector(CSS stands for Cascading Style Sheet): CSS 선택기는 요소 선택기와 웹 페이지 내에서 웹 요소를 식별하는 값의 조합입니다. HTML 태그, 속성, ID 및 클래스의 문자열 표현입니다.

사용방법 : driver.findElement(By.cssSelector(“css selector”))

예 : driver.findElement(By.cssSelector(“#twotabsearchtextboxl”))

참조:

 

다음 시간에는 위 Locators 중 많이 사용되는 것들로 예제를 만들어서 동작시켜보도록 해보겠습니다.

Locator 란?

웹 페이지 내에서 웹 요소를 고유하게 식별할 수 있는 주소라고 할 수 있습니다. Locator는 작업을 수행하는데 필요한 웹 요소에 대해 Selenium에 알려주는 웹 요소의 HTML 속성입니다. 

쉽게 설명하자면 이렇습니다.

온라인으로 물건을 구매한다고 가정을 하겠습니다. 열심히 온라인으로 구매할 물건을 검색하여 최저가의 물건을 찾았고, 배송지를 입력하고 결제를 합니다. 

내가 살 물건은 어떤 행위를 해야할 대상입니다. 해당 대상을 찾았으면 배송지가 어디인지를 입력해야 하는데 그 배송지는 Locator라고 볼 수 있습니다. 해당 Locator 를 찾으면 결제 즉, 행동입니다. 그 행동은 클릭이 될 수 있고 글을 입력할 수 있는 것 등이 될 수 있습니다.

그러면 Locator는 종류가 무엇이고 어떻게 찾을 수 있을까요?

Locator의 종류는 아래와 같습니다.

- ID

- ClassName

- Name

- LinkText

- Xpath

-CSS Selector

다양한 Locator 들 가운데 일반적으로 가장 많이 사용되는 경우는 Xpath와 CSS Selector 입니다. (그 외에도 많이 사용합니다.)

Locator 를 찾는 방법을 알려드리겠습니다.

- 웹 브라우저(chrome)를 열어 놓습니다. (ex. google)

- F12 를 눌러서 개발자도구를 엽니다.

    1. 웹 요소를 식별하기 위해 검사 아이콘을 클릭합니다.

    2. 검사할 대상(요소)을 클릭합니다.

    3. 요소를 기록해둡니다. (ex. CLASS, ID..)

이와 같은 방법을 통하여 요소를 찾을 수 있습니다. 다음 시간에는 Locator 들을 하나씩 사용하는 예시를 알려드리겠습니다.

wait 는 말 그대로 '기다리라' 는 뜻입니다. 여기에는 2가지 타입이 있습니다. 바로 implicitly wait 과 explicitly wait 입니다.

하지만 여기서 implicitly wait 과 explicitly wait 를 배우기 전에 time.sleep 을 배우겠습니다.

time.sleep

time.sleep 은 물리적인 시간을 기다리는 명령어입니다.
사용하는 방법은 time.sleep(초) 를 사용하여 구글 웹페이지가 열린 후 1초, 5.5초, 10초를 기다립니다.

import time from selenium import webdriver from selenium.webdriver.chrome.service import Service from webdriver_manager.chrome import ChromeDriverManager chrome_options = webdriver.ChromeOptions() chrome_options.add_argument('start-maximized') chrome_options.add_argument('incognito') driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=chrome_options) driver.get(url='https://www.google.com/') time.sleep(1) # 1초 기다림 time.sleep(5.5) # 5.5초 기다림 time.sleep(10) # 10초 기다림 driver.quit()

컴퓨터의 사양과 상관없이 무조건 입력한 초가 지나야 다음 동작을 합니다. 그렇기에 적절하게 상황에 따라 사용하면 좋습니다.

Implicitly Wait

implicitly wait 는 웹페이지가 로딩 될때까지 기다리고 다음 동작을 합니다. 쉽게 설명하자면, 예를들어 구글 웹페이지를 오픈했는데 웹페이지를 불러올 때까지 최대 implicitly_wait(초) 까지 기다리라는 뜻입니다.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument('start-maximized')
chrome_options.add_argument('incognito')
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=chrome_options)

driver.get(url='https://www.google.com/')
driver.implicitly_wait(10) # 10초까지 기다리고 다음 동작

driver.quit()

위 예제에서 implicitly_wait(10)을 했는데 10초동안 웹페이지가 로딩될때까지 기다리고 10초가 넘어가면 웹페이지가 로딩이 됐던 안됐던 다음 명령어를 실행하겠다 는 뜻입니다. 이 또한 상황에 적정한 시간을 설정하면 됩니다.

time.sleep 과 implicitly_wait가 다른 점은 컴퓨터 성능이 좋아서 웹페이지 로딩하는데 1초가 걸렸습니다. 하지만 time.sleep은 무조건 10초를 기다리고 다음 동작은 하고, implicitly_wait는 1초가 됐을 때 다음 동작을 합니다.

Explicitly Wait

implicitly_wait의 경우는 모든 웹페이지가 호출될 때까지 기다리는지만, 컴퓨터 환경(PC성능 또는 서버, 네트워크 등)에 따라 전체가 아닌 일부가 먼저 노출되는 경우가 있습니다. (참고..이것을 동적 DOM이라고 부릅니다.)

예를들어서 implicitly_wait를 사용하여 웹페이지는 1초만에 넘어왔는데 넘어온 웹페이지의 일부분이 자바스크립트로 구현되어 있어서 그 일부분이 화면상에서 렌더링 되느라 비교적 늦게 브라우저에 표시되었다고 가정하면 (ex. 쿠팡 또는 광고 노출) 동작하는데 문제가 발생합니다.

이러한 문제를 해결하기 위해서 explicitly_wait 를 사용합니다. 즉, 내가 설정한 것이 표시가 될때까지 뭐뭐 할때까지 기다려라 라는 의미입니다.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.support import expected_conditions as EC

chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument('start-maximized')
chrome_options.add_argument('incognito')
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=chrome_options)

driver.get(url='https://www.google.com/')

element = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.CLASS_NAME, "gNO89b")))

driver.quit()

time.sleep 과 implicitly_wait 에는 괄호 안에 초를 사용하였지만, explicitly_wait는 사용하는 방법이 조금 다릅니다.
element 라는 변수에 WebDriverWait(driver, 10) 즉, driver는 셀레니움 구동한 드라이버가 10초까지 설정한 무엇이 나타날때까지 기다린다는 뜻입니다.
그 다음 .until(EC.presence_of_element_located((By.CLASS_NAME, “gNO89b”))) 의 EC.presence_of_element_located라는 것은 괄호안에 요소가 나타날때까지 기다리라는 의미인데, 괄호안에 요소는 하기와 같습니다.
(By.ID, ‘아이디이름’)
(By.CLASS_NAME, ‘클래스명’)
(By.XPATH, ‘xpath경로’)
(By.NAME, ‘네임명’)
(By.CSS_SELECTOR, ‘CSS셀렉터’)
(By.PARTIAL_LINK_TEXT, ‘텍스트링크일부분’)
(By.LINK_TEXT, ‘텍스트링크’)

EC.presence_of_element_located 말고 종류가 많이 있습니다.

EC.title_is(...)
EC.title_contains(...)
EC.presence_of_element_located(...)
EC.visibility_of_element_located(...)
EC.visibility_of(...)
EC.presence_of_all_elements_located(...)
EC.text_to_be_present_in_element(...)
EC.text_to_be_present_in_element_value(...)
EC.frame_to_be_available_and_switch_to_it(...)
EC.invisibility_of_element_located(...)
EC.element_to_be_clickable(...)
EC.staleness_of(...)
EC.element_to_be_selected(...)
EC.element_located_to_be_selected(...)
EC.element_selection_state_to_be(...)
EC.element_located_selection_state_to_be(...)
EC.alert_is_present(...)

위 방법 중에서 가장 많이 사용하는 것은 EC.presence_of_element_located 와 EC.element_to_be_clickable 이니 상황에 따라 사용하면 됩니다.

즉, 위 3가지 방법 중 상황에 맞는 것을 자유롭게 사용하시면 됩니다.

참조 :

webdriver.ChromeOptions() 함수를 실행할 때 크롬 드라이버의 경로만 매개변수로 지정 해줍니다.

여기에 chrome_options 매개변수를 추가로 입력하면 브라우저 크기, 시크릿모드, headless 모드 등 다양한 옵션을 설정할 수 있습니다. 아래는 대표적으로 많이 사용하는 옵션들로 맨 하단에 참고 부분에는 좀 더 많은 옵션들을 확인할 수 있습니다.

• headless : headless 모드 설정
• disable-gpu : gpu를 사용 안하도록 설정
• lang=ko_KR : 한국어로 실행되도록 설정
• start-maximized : 브라우저 최대화
• window-size=1920,1080 : 1920*1080 브라우저 크기로 오픈
• incognito : 시크릿모드
• disable-popup-blocking : 팝업 차단 해제

아래 간단한 예시로 크롬 브라우저를 실행할 때, 창을 최대화하면서 시크릿 모드로 구글 사이트로 진입하는 코드입니다.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

chrome_options = webdriver.ChromeOptions() # 크롬 옵션 객체 생성
chrome_options.add_argument('start-maximized')
chrome_options.add_argument('incognito')
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=chrome_options)

driver.get(url='https://www.google.com/')

driver.quit()

참고 : 

'Selenium webdriver 로 웹페이지 띄우기' 를 진행하며 chrome webdriver를 실행했는데, 아래와 같은 warning이 뜨는 경우가 있습니다.

DeprecationWarning: executable_path has been deprecated, please pass in a Service object 

이런 경우 service 키워드를 사용하면 됩니다.

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

chrome_options = webdriver.ChromeOptions()
driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=chrome_options)
driver.get(url='https://www.google.com/')

driver.quit()

아래는 실행 결과후 console 창에 

참고 : 

• https://stackoverflow.com/questions/64717302/deprecationwarning-executable-path-has-been-deprecated-selenium-python

Selenium webdriver로 웹페이지 띄우기(1) 에서는 chromedriver를 직접 다운 받아서 폴더에 넣고 경로를 지정해서 웹페이지 띄우는 방법을 보여드렸습니다.

chromedriver를 다운 받는 것은 어느 사이트를 보던 흔하게 있는 예제였는데요, 제가 이번에 보여드릴 예제는 webdriver-manager 라는 패키지를 설치함으로서 chromedriver 설치 및 경로 지정 없이 사용하는 방법을 알려드리겠습니다.

먼저, 새로운 프로젝트를 만들거나 혹은 지난 시간에 했던 프로젝트에 새로운 python 파일을 만듭니다.

저는 새로운 프로젝트를 만들었습니다. (새로운 프로젝트 생성 시, selenium 을 다시 설치하셔야 합니다.)

지난 시간에 selenium 설치하는 방법을 터미널을 통해 패키지를 설치하거나 pycharm IDE의 python interpreter 를 통해 패키지를 설치하는 방법을 알려드렸는데요, 이번에도 동일하게 어떤 것을 사용하시던 무방합니다.

다시 한번 복습겸 방법을 알려드리면 아래와 같습니다.

 첫번째 : 터미널로 pip install webdriver-manager 를 입력하고 엔터를 치면 설치가 됩니다.

 두번째 : File -> Settings -> Project: XXXX 로 적혀있는 부분 클릭 -> Python Interpreter 클릭 -> 여기서 [+] 버튼 클릭 -> 검색창에 webdriver-manager를 입력 후 [Install Package] 버튼을 클릭하면 됩니다.

webdriver-manager 패키지가 설치되고 나면 팝업창을 전부 닫아주세요.

저는 이전 시간과 마찬가지로 main.py 를 전부 지우고 작성하겠습니다.

하기와 같이 명령어를 입력하시면 됩니다.

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get(url='https://www.google.com/')

driver.quit()

전체를 보면 아래와 같습니다.

실행을 해보도록 하겠습니다. 실행은 마우스 오른쪽 버튼을 클릭하고, Run 'main' 하시거나 단축키 Control + Shift + F10 을 누르면 크롬 브라우저로 구글 웹페이지가 열렸다가 닫히는 것을 보실 수 있습니다. 

이전과 달라진 소스코드는 아래 영역으로, chromedriver를 다운 받아서 경로 지정하는 부분이 ChromeDriverMaanager().install() 로 경로 지정할 필요없이 알아서 설치가 되는 장점이 있습니다.

driver = webdriver.Chrome(ChromeDriverManager().install())

소스코드 : 

지난 시간에는 Selenium 설치방법 에 대해 알아봤습니다.

웹페이지를 브라우저로 열기 위해서는 크롬의 경우 chromedriver, 파이어폭스의 경우 geckodriver와 같은 webdriver 프로토콜이 필요합니다. (자세한 설명은 selenium 웹페이지에서 보시면 나와 있으니 궁금하신 분은 검색으로...)

거의 모든 예시는 chrome 브라우저를 가지고 들으며, 실제적으로 많이 사용하기 때문에 저 또한 chrome 브라우저를 통해 보여드리겠습니다.

chromedriver를 통해 웹페이지를 띄우는 방법은 2가지가 있습니다.

일단 첫번째는 많이들 사용하는 방법으로 chromedriver를 다운 받아서 경로를 지정하여 호출하는 방법입니다.

1. 구글에서 chromedriver를 입력하시면, 아래와 같이 ChromeDriver 웹페이지가 있습니다. 이걸 클릭해주세요.

2. ChromeDriver 사이트에 들어가면 Current Releases 에 각종 버전들이 있습니다. 일단 어떤 버전들이 있구나 보시면 됩니다.

3. 그리고 내가 사용하는 크롬 브라우저를 실행 시키고, 브라우저 창에 chrome://settings/help 를 입력해주면 현재 내가 사용하는 버전을 알 수 있습니다.

저는 96.04664.93 버전을 사용하고 있네요. (21년 12월 기준)

4. 현재 브라우저 버전을 기억하고 ChromeDriver 웹페이지를 보시면 96.04664.45 버전을 볼 수 있습니다. 맨 뒤의 숫자들보다는 맨 앞의 숫자를 맞춰서 다운 받아주시면 됩니다. (예를 들면 내가 현재 96.0.4664.93 버전인데 97.04692.36 버전을 받으면 동작이 제대로 안되는 경우가 발생합니다.)

96.04664.45 버전을 클릭하면 아래와 같이 각종 OS에 맞는 버전을 다운 받습니다. 저는 win10이기 때문에 chromedriver_win32.zip을 받았습니다.

5. 받은 파일의 압축을 풀면 chromedriver.exe 가 나오는데, 이걸 이전 시간에 만들었던 프로젝트 폴더 내에 넣어줍니다. (chromedriver.exe 파일 앞에 물음표가 있는데 무시하셔도 됩니다.)

6. main.py 파일을 사용해보겠습니다. main.py 내용 전부 삭제하시고, 하기와 같은 명령어를 입력하시면 됩니다.

(엄청 단순하죠? 처음이니까...쉬엄쉬엄...가야죠)

from selenium import webdriver

driver = webdriver.Chrome('./chromedriver.exe')
driver.get(url='https://www.google.com/')

driver.quit()

전체를 보면 아래와 같습니다.

7. 실행을 해보도록 하겠습니다. 실행은 마우스 오른쪽 버튼을 클릭하고, Run 'main' 하시거나 단축키 Control + Shift + F10 을 누르면 크롬 브라우저로 구글 웹페이지가 열렸다가 닫히는 것을 보실 수 있습니다. 

코드를 보면, 

먼저 webdriver.Chrome() 함수를 사용하여 드라이버를 로드합니다. 이걸 driver라는 변수에 저장합니다.

webdirver.Chrome() 함수 내에는 pythonProject2 폴더내에 바로 chromedriver.exe 파일이 위치하기 때문에 ./ 를 사용했습니다. 

그리고 get(url) 함수를 사용하여, 해당 URL을 브라우저에서 띄우게 됩니다.

마지막으로 driver.quit() 를 사용하여 브라우저를 닫게 됩니다.

소스코드 :

앞서 작성한 포스팅에서 Selenium Suite 패키지 중 가장 일반적으로 사용하는 것은 Selenium Webdriver 입니다.

Selenium 을 검색해보면 수 많은 자료들이 있는데 가장 기본적인 selenium webdriver 를 설치하는 방법이죠.

저 또한 설치하는 방법부터 시작하려고 합니다.

준비물 : Windows 환경, Pycharm

1. 최신 버전의 Python을 다운 받아서 설치합니다. (2021년 12월 6일 현재 3.10.0 버전)

2. Jet Brain사이트에 가서 Community 버전의 Pycharm IDE를 다운 받아서 설치합니다.

-> Pycharm 이란?  컴퓨터 프로그래밍, 특히 Python 언어에 사용되는 통합 개발 환경입니다.

3. Pycharm IDE를 실행 시킵니다.

File -> New Project -> (Location 변경 가능) Create 버튼을 클릭합니다.

프로젝트가 생성되면 하기의 이미지와 같이 나옵니다. 

4. selenium 을 설치하기 위해서 2가지 방법이 있습니다. 

 첫번째 : 터미널로 pip install selenium 입력하고 엔터를 치면 설치가 됩니다.

 두번째 : File -> Settings -> Project: XXXX 로 적혀있는 부분 클릭 -> Python Interpreter 클릭하면, 아래와 같은 화면이 나옵니다.

여기서 [+] 버튼 클릭 -> 검색창에 selenium 입력 후 [Install Package] 버튼을 클릭하면 됩니다.

테스트 자동화 도구는 상용 및 오픈소스가 있지만 Selenium 이라는 오픈소스를 전세계적으로 가장 많은 사람들이 사용하고 있습니다.

그 이유는 다양한 환경에서 지원하며 요소 로케이터를 Xpath, ID, CSS 와 같은 다양한 방식으로 지원. Java, Perl, PHP 등과 같은 다양한 언어를 지원하고 있으며 인터넷에서 많은 정보가 공개되어 있기 때문입니다.

Selenium은 단순한 도구나 유틸리티가 아니라 여러 테스트 도구의 패키지이며 이와 같은 이유로 Suite라고합니다. 이러한 각 도구는 다양한 테스트 및 테스트 환경 요구 사항을 충족하도록 설계되었습니다.

Suite 패키지는 다음 도구 세트로 구성됩니다.

• Selenium 통합 개발 환경 (IDE) – Selenium IDE는 기록 및 재생 도구로 테스트 케이스를 컴퓨터가 실행할 수 있는 스크립트로 변환하는 방법 중 대표적인 것으로 Firefox Plugin을 통해 구현됩니다.
• Selenium RC – Selenium Webdriver가 나오기전에 있었던 버전으로 사용자가 원하는 프로그래밍 언어로 테스트 스크립트를 작성할 수있는 서버입니다.
  > 한정적으로 지원되는 브라우저 내에서 테스트 스크립트를 실행할 수 있습니다.
  > 테스트 스크립트를 실행하기 전에 서버를 시작해야 합니다.
  > Android 애플리케이션 테스트 지원 안합니다.
  
  
• Selenium Grid – Selenium Grid는 여러 플랫폼과 환경에서 동시에 테스트 수행하는데 사용됩니다.
  
  
• Selenium WebDriver – WebDriver는 Selenium RC에 비해 다양한 장점이있는 완전히 다른 도구입니다.
  > WebDriver는 웹 브라우저와 직접 통신하고 기본 호환성을 사용하여 자동화합니다.
  > GUI가 없거나 헤드리스 브라우저인 HtmlUnitDriver를 지원합니다.
  > iPhone / Android 애플리케이션의 테스트를 효율적으로 지원하도록 설계되었습니다.