selenium+python元素定位总结
前言
元素定位是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标签
还是以这个搜索框为例
# 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)
弟弟找完哥哥，但哥哥怎么去找哥哥嘞？
文章图片
4哥哥
弟弟
# 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
# 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定位
1.Jquery-ID
# coding=utf-8
from selenium import webdriver
【selenium+python元素定位总结】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="https://www.it610.com/article/TEST";
'其他获取比如name的话，吧getElementById换成getElementsByName
driver.execute_script(inputTest)
六.定位辅助工具
以firefox浏览器为例：Firebug，Firepath，xpathChecker，不过不建议元素定位时，偷懒使用Firepath直接获取的元素进行定位
文章图片
如上图，就会出现这种定位，又臭又长！工具是辅助，定位元素是自动化测试的最基本功！
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 三国谋略22（找准你的定位）
- 你也许不知道的Vuejs|你也许不知道的Vuejs - 花式渲染目标元素
- React.js的表单(六)
- 渠道云定位
- 集合框架(集合嵌套存储和遍历元素的案例代码实现)
- 品牌定位及纠偏|品牌定位及纠偏 | 大牌训练营第二次作业 | 张胜萍
- 第六课|第六课 js管理页面元素位置大小
- css|css中元素的显示与隐藏
- EXCEL的汽车导航-全能的GPS定位