前言
元素定位是UI自動化的基本功,也是最基礎的技術。所以筆者今天來總結下Selenuim+Python最基本的幾種定位方式及實例說明,希望能幫助到大家。
以https://daohang.qq.com/?fr=hmpage 網址為例
一.基本的定位方式
1.ID
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_id("smart_input").send_keys("TEST")
2.Name
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_name("query").send_keys("TEST")
3.ClassName
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_class_name("usersearch").send_keys("Test")
4.LinkTest
以“人民網”這個link舉例
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_link_text(u"人民網").click() python2 中文前面加U
二.XPATH定位
1.Xpath標簽
<input id="smart_input" class="usersearch ab" type="text" disableautocomplete="" autocomplete="off" name="query" value="">
還是以這個搜索框為例
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_xpath("//input[@id='smart_input']").send_keys("TEST")
2.Xpath層級
父級元素定位:如圖該搜索欄的父級元素為searchForm,而我們所要定位的所屬欄為該父級元素下面第一個input
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_xpath("//form[@id='searchForm']/input[1]").send_keys("TEST")
driver.implicitly_wait(20)
弟弟級定位哥哥元素:
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_xpath("//input[@name='hdq']/preceding-sibling::input[1]").send_keys("TEST")
driver.implicitly_wait(20)
弟弟找完哥哥,但哥哥怎么去找哥哥嘞?
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_xpath("//span[@class='add-bubble']/following-sibling::span[1]").click()
3.Xpath-contains
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_xpath("//input[contains(@id,'smart_input')]").send_keys("TEST")
三.CSS定位(*強烈推薦)
1.CSS-id
<input id="smart_input" class="usersearch ab" type="text" disableautocomplete="" autocomplete="off" name="query" value="">
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_css_selector("#smart_input").send_keys("TEST")
driver.implicitly_wait(20)
2.CSS-class
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_css_selector(".usersearch").send_keys("TEST")
driver.implicitly_wait(20)
3.CSS-其他
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_css_selector("input[id='smart_input']").send_keys("TEST")
4.CSS-層級
子元素
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_css_selector("#searchForm>#smart_input").send_keys("TEST")
后代元素
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_css_selector("#searchForm #smart_input").send_keys("TEST") #searchForm #smart_input 中間空格
nth-child的使用(從字面解釋就是第幾個孩子)
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_css_selector("#searchForm>input:nth-child(1)").send_keys("TEST") 在searForm元素下的第一個input標簽
first-child的使用
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_css_selector("#searchForm>input:first-child").send_keys("TEST")
last-child的使用
以搜索按鈕為例
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
driver.find_element_by_css_selector("#searchForm>input:first-child").send_keys("TEST")
driver.find_element_by_css_selector("#searchForm>input:last-child").click() #點擊搜索按鈕
四.Jquery定位
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
inputTest="$('#smart_input').val('TEST')"
driver.execute_script(inputTest)
2.Jquery-Class
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
inputTest="$('.usersearch').val('TEST')"
driver.execute_script(inputTest)
3.Jquery-Type
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
inputTest="$(':text').val('TEST')"
driver.execute_script(inputTest)
4.Jquery-其他
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
inputTest="$('input[id=smart_input]').val('TEST')"
driver.execute_script(inputTest)
5.Jquery-層級
子元素
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
inputTest="$('#searchForm>#smart_input ').val('TEST')"
driver.execute_script(inputTest)
后代元素
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
inputTest="$('#searchForm #smart_input ').val('TEST')" #searchForm #smart_input中間空格
driver.execute_script(inputTest)
選擇第N個元素
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
inputTest="$('#searchForm>input:first ').val('TEST')" searchForm父級元素下的第一個input標簽
driver.execute_script(inputTest)
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
clickbutton="$('#searchForm>input:last ').click()" searchForm父級元素下的最后一個input標簽
driver.execute_script(clickbutton)
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
inputTest="$('#searchForm>input:eq(0)').val('TEST')" eq(0):serachForm父級元素下的第一個input標簽,用nth-child(1)也是ok的
driver.execute_script(inputTest)
五.JS定位
# coding=utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://daohang.qq.com/?fr=hmpage")
inputTest='document.getElementById("smart_input").value="TEST";' 其他獲取比如name的話,吧getElementById換成getElementsByName
driver.execute_script(inputTest)
六.定位輔助工具
以firefox瀏覽器為例:Firebug, Firepath, xpathChecker,不過不建議元素定位時,偷懶使用Firepath直接獲取的元素進行定位
如上圖,就會出現這種定位,又臭又長!工具是輔助,定位元素是自動化測試的最基本功!