[Python] Selenium 사용법

webdriver 다운로드

Selenium 사용전 사용하는 브라우저에 맞는 webdriver를 다운로드받아서 해당 파일이 있는 곳을 PATH에 추가해두는 것이 좋다. https://pypi.org/project/selenium/ 의 Drivers 섹션을 참고.

특정 페이지를 열기

from selenium import webdriver

driver = webdriver.Firefox()
driver.get("blog.dasomoli.org")

페이지를 열고 난 후 기다리기

어느 페이지를 열고 난 후 동작을 시작하려면 해당 페이지가 열렸을 때 나타나는 element를 기다려서 동작을 시작해야 한다. link text라면 다음과 같은 식으로 기다릴 수 있다. 아래에서 20은 20초를 의미한다. 첫번째 인자가 괄호로 둘러싸여 있음에 유의하라.

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.LINK_TEXT, "Ult-Build-1")))

다음처럼 어느 태그가 나타나길 기다릴 수도 있다.

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

element = WebDriverWait(driver, 10).until(EC.text_to_be_present_in_element((By.TAG_NAME, "h1"), "Project INTEGRATED_BUILD_SYSTEM_TOOL"))

페이지 내의 특정 element 찾기

element = driver.find_element_by_name("userName")

element가 찾기 쉽게 id나, class name 등으로 되어 있다면 find_element_by_id() 혹은 find_element_by_class_name() 등으로 쉽게 찾을 수 있다. 아니라면 tag name 등으로 찾은 후 돌리면서 찾아본다. 함수명이 element가 아닌 elements 임에 유의하라.

import re

ultp = re.compile('^Ult-Build-[12].*')
ult_req = { }

elements = driver.find_elements_by_tag_name("tbody")
for tag in elements:
    if ultp.match(tag.text):
        wordlist = tag.text.split()
        if len(wordlist) >= 2:
            ult_req[wordlist[0]] = wordlist[1]

키 입력이나 클릭하기

찾은 element가 input과 같은 입력이 가능한 element라면 바로 send_keys()로 입력이 가능하다.

from selenium.webdriver.common.keys import Keys

element = driver.find_element_by_id("j_username")
element.send_keys("dasomoli")

element = driver.find_element_by_name("j_password")
element.send_keys("password", Keys.ENTER)

직접 element를 찾기 어렵다면 근처 element를 찾은 후 click한 후 key를 입력할 수도 있다.

from selenium.webdriver.common.action_chains import ActionChains

elements = driver.find_elements_by_class_name("setting-name")
for element in elements:
    if element.text == "P4_Shelve_CLs":
        shelve_element = element

actions = ActionChains(driver)
actions.move_to_element_with_offset(shelve_element, shelve_element.rect['width'] + 5, shelve_element.rect['height'] / 2).click().send_keys("12345678", Keys.ENTER)
actions.perform()

send_keys() 대신 click() 을 이용하면 마우스 클릭이 가능하다. 마우스 클릭 지점을 찾기 힘들 때는 context_click()을 사용하면 우클릭되는데, 이 때 나타나는 context menu로 클릭 지점을 대충 파악할 수 있다.

마우스 클릭 등으로 선택된 element를 얻기

actions = ActionChains(driver)
actions.move_to_element_with_offset(workspace_element, workspace_element.rect['width'] + 23, workspace_element.rect['height'] / 2).click()
actions.perform()
element = driver.switch_to.active_element

select form에서 값 선택

from selenium.webdriver.support.ui import Select

select = Select(element)
if value != "":
    select.select_by_visible_text(value)
else:
    select.select_by_index(0)

참고

  1. Selenium with Python – Read the Docs
  2. Selenium Documentation
  3. Selenium Browser Automation Project (한글 버전도 있다)

[HTML5&CSS] Form styling하기

label을 styling하기 위해서 font와 text의 크기를 조절한다.

textboxes나 textareas는 일반적으로 그 크기를 바꾸고, border를 제거한다. 또 예시 입력값인 placeholder를 추가해서 어떤 값을 입력하면 되는지를 도와주도록 한다.

 

button을 styling하기 위해서 일반적으로 배경색과 크기를 바꾼다. button의 box 바깥이 흉하므로 좀 손본다.

 

Select boxes를 styling하기 위해서는 일반적으로 text box처럼 보이게 만들고, 오른쪽의 아래 화살표를 styling한다.

 

form validation을 위해서 HTML은 required attribute를 제공한다. 입력이 꼭 필요한 field는 required attribute를 사용한다. CSS에서 이를 select하기 위해서 :valid 와 :invalid pseudo selector를 사용할 수 있다.

[HTML5&CSS] Form Elements

다음 form을 구성하는 HTML elements에 대해서 알아보자.

  • form
  • input
  • label
  • textarea
  • fieldset
  • select
  • button

 

form element는 다른 input이나 button elements들을 담는 element이다. form에는 action과 method, 두가지 attributes를 넘겨야 한다. action attribute는 그 form의 data를 어디로 submit할지를 정한다. method attribute는 그 form의 data를 get으로 보낼지, post로 보낼지를 정한다. 일반적으로 get method는 query string으로 표현되므로 unsecured data를 다룰 때 사용되고, post는 secure data를 다룰 때, 또는 많은 양의 data를 다룰 때 사용된다. 다음과 같은 형식이다.

input element는 text input field, radio buttons, checkboxes를 만든다. type과 name attribute가 필요하다. type attribute는 입력의 type을 정한다. name attribute는 form을 submit할 때 구분할 unique name을 정한다. form data는 key-value pairs로 구성되는데, 이 때 키가 되는 것이 name이고, 해당하는 값이 value가 된다.

text type의 예제는 다음과 같다. maxlength attribute로 최대 길이를 정할 수 있다.

E-mail의 입력에는 email type을 사용할 수 있다.

password의 입력에는 password type을 사용할 수 있다.

checkboxes를 사용할 때는 checkbox type을 사용한다. name에 unique한 값을 주고, 각 checkbox의 value에도 unique한 값을 준다.

radio buttons를 사용할 때는 radio type을 사용한다. 모든 name에 같은 값을 주고, 각 button의 value에 unique한 값을 준다.

 

label element는 input elements들과 연관된 text를 줄 때 사용한다. 예를 들면 위에서 “이름 :” 같은 것들. 스크린리더를 사용하는 사람들에게 도움이 된다. label element는 input의 id attribute와 연관되는 for attribute를 가진다.

 

textarea element는 여러 줄의 text 입력을 위해 사용한다. rows와 cols attributes로 size를 지정할 수 있다.

 

fieldset element는 여러 form 내의 elements들을 그룹짓고 싶을 때 사용한다.

 

select element는 select boxes를 만든다. 매우 긴 list의 옵션 중 하나를 선택할 때 쓴다. select element 안에 option element의 list를 넣어서 만든다.

 

button element는 form을 submit할 때 사용한다. type attribute로 세가지 값을 사용할 수 있다. 첫번째로 아무 행동도 안하는 것, 두번째로 “reset”, 이걸 누르면 form 값들이 모두 리셋된다. 마지막으로 “submit”, 클릭하면 submit한다.