Selenium元素定位的30种方式(史上最全)


Posted in Python onMay 11, 2020

Selenium对网页的控制是基于各种前端元素的,在使用过程中,对于元素的定位是基础,只有准去抓取到对应元素才能进行后续的自动化控制,我在这里将对各种元素定位方式进行总结归纳一下。

这里将统一使用百度首页(www.baidu.com)进行示例,f12可以查看具体前端代码。

WebDriver8种基本元素定位方式

find_element_by_id()

采用id属性进行定位。例如在百度页面中输入关键字 Selenium 进行搜索。百度部分关键源码如下:

<span class="bg s_ipt_wr quickdelete-wrap">
    <span class="soutu-btn"></span>
    <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
    <a id="quickdelete" class="quickdelete" href="javascript:;" rel="external nofollow" title="清空" style="top: 0px; right: 0px; display: none;"></a>
</span>
<span class="bg s_btn_wr">
    <input id="su" class="bg s_btn" type="submit" value="百度一下">
</span>

可以看到输入框和百度一下的按钮都有id,那么定位代码如下:

#coding=utf-8
from selenium import webdriver
import time
from selenium.webdriver.common.by import By
 
driver = webdriver.Chrome()
driver.implicitly_wait(10)
driver.get("http://www.baidu.com")
 
driver.find_element_by_id("kw").send_keys("Selenium")
driver.find_element_by_id("su").click()
 
time.sleep(2)
driver.quit()

find_element_by_name()

 find_element_by_class_name() 

根据name元素和class的名字进行定位,这两种定位方式和id定位相似,在前端代码中,id、name和class一般都至少会有其中的一种,比如百度的搜索框具有name属性,我们可以用name定位搜索款,class定位百度一下的按钮:

driver.find_element_by_name("wd").send_keys("Python")
driver.find_element_by_class_name("s_btn").click()

find_element_by_xpath() 

xpath是XML路径语言,它可以用来确定xml文档中的元素位置,通过元素的路径来完成对元素的查找。HTML就是XML的一种实现方式,所以xpath是一种非常强大的定位方式。xpath也分几种不同类型的定位方法。

一种是绝对路径定位。这种定位方式是利用html标签名的层级关系来定位元素的绝对路径,一般从<html>标签开始依次往下进行查找。如百度搜索框的绝对路径xpath定位可以是这样的:find_element_by_xpath("/html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input")

还有一种是利用元素属性来进行xpath定位,搜索框还可以利用id和name属性去定位:

find_element_by_xpath("//input[@id='kw']")

find_element_by_xpath("//*[@name='wd']")

其中的标签名input也可以用*来代替,而且只要是在该标签内,任意属性都可以,比如搜索框的maxlength属性:

find_element_by_xpath("//input[@maxlength='255']")

有的时候我们会发现绝对路径定位路径太长,而且光凭路径完全不可以猜测到其指向的具体页面元素,如果只有单纯的元素属性不一定可以每次查找的元素都可以又唯一的属性去方便定位,这个时候我们可以将这两种定位方式结合起来使用。

比如查找搜索框的时候发现其上级元素form又唯一的id方便定位,就可以先查找到form元素然后依次往下写路径:

find_element_by_xpath("//form[@id='form']/span/input")

这种定位方式的使用过程中,如果元素的单个属性无法确定其唯一性,可以用and连接多个属性去确定。

find_element_by_css_selector()

CSS属性定位可以比较灵活地选择控件的任意属性,定位方式也会比xpath快。

同样是那个百度搜索的例子,可以试一下:

driver.find_element_by_css_selector(".s_ipt").send_keys("selenium")
driver.find_element_by_css_selector("#su").click()

如果有css基础的话就应该可以看懂,一般class是用.标记,id是用#标记,标签名直接写具体标签名就好了。

css定位里面也可以通过属性或者组合方式定位:

driver.find_element_by_css_selector("input[autocomplete='off']").send_keys("Python")
driver.find_element_by_css_selector("span.bg.s_btn_wr>input#su").click()

具体说一下百度一下那个按钮的组合定位方式,这样写的定位顺序是这样的,先定位到一个class名为bg s_btn_wr的span标签,在这个标签下面有一个id为su的input标签,这样就定位到了。

值得注意的是,在css里面下级标签元素用>连接,如果class里面有空格,空格用.进行连接。

find_element_by_tag_name ()

通过标签名去定位的方式一般是这样的:find_element_by_tag_name("input")
可见仅仅通过标签名去定位时,一般一种标签在一个页面里面会出现不止一次甚至大量出现,这种定位方式的作用不是很大,所以用的也就比较少。

find_element_by_link_text()

find_element_by_partial_link_text()

这两种定位方式是专门用于定位超链接的,也就是对应html页面中的<a>标签,括号里传的值就是a标签中的超链接文字,两者的区别在于一个是完整的超链接文字,一个是可以只写部分超链接文字。

比如点击百度首页中右上角的新闻超链接,可以这样去定位:

driver.find_element_by_link_text("新闻").click()
driver.find_element_by_partial_link_text("闻").click()

By定位

通过对上面8种基本元素定位方式的学习,在使用过程种可以根据实际的情况去选择对应的的定位方式,我们可以用By来设置定位策略,具体语法如下:

find_element(By.ID,"kw")
find_element(By.NAME,"wd")
find_element(By.CLASS_NAME,"s_ipt")
find_element(By.TAG_NAME,"input")
find_element(By.LINK_TEXT,u"新闻")
find_element(By.PARTIAL_LINK_TEXT,u"新")
find_element(By.XPATH,"//*[@class='bg s_btn']")
find_element(By.CSS_SELECTOR,"span.bg s_btn_wr>input#su")

上面这些使用的前提是需要导入By类:from selenium.webdriver.common.by import By

最简单粗暴却失传已久的8种定位

据说这种定位方式在江湖上都快要失传了,实在想不通为什么,明明写起来最简单粗暴啊~

driver.find_element("name","wd").send_keys("Selenium2")
driver.find_element("id","su").click()

相信通过上面的两只栗子,大家一定会和我一样觉得这种方式的定位实在是太省事了~只要写find_element就好啦,下面我们来总结一下这8种写法与基本定位方法类比过来该怎么写:

by_id -> find_element("id","")

by_xpath -> find_element("xpath","")

by_link_text -> find_element("link text","")

by_partial_text -> find_element("partial link text","")

by_name -> find_element("name","")

by_tag_name -> find_element("tag name","")

by_class_name -> find_element("class name","")

by_css_selector -> find_element("css selector","")

elements复数定位

在上面的例举的八中基本定位方式种,都有对应的复数形式,分别是下面这些:

id复数定位find_elements_by_id()
name复数定位find_elements_by_name()
class复数定位find_elements_by_class_name()
tag复数定位find_elements_by_tag_name()
link复数定位find_elements_by_link_text()
partial_link复数定位find_elements_by_partial_link_text()
xpath复数定位find_elements_by_xpath()
css复数定位find_elements_by_css_selector()

这些复数定位方式每次取到的都是具有相同类型属性的一组元素,所以返回的是一个list队列,我们也可以利用这个去定位单个的元素。比如百度首页种,右上角有新闻、视频、地图、贴吧等一些链接,我们通过f12查看源码可以发现,这些链接都有共同的class, 。

Selenium元素定位的30种方式(史上最全)

举个例子,比如定位排在第六个的学术,可以这样定位:driver.find_elements_by_class_name("mnav")[5].click()

还可以通过css的复数定位写法:driver.find_elements("css selector",".mnav")[6].click()

当然,也可以借助pop()函数,一般pop()或pop(-1)表示获取元素种的最后一个,pop(2)表示第三个:

driver.find_elements("css selector",".mnav").pop().click()

JS的5种定位方式总结

其实看到这里,上面的定位方式应该就基本够用了,但是有的时候就是会出现一些诡异的定位失效或者定位到了点击失效的问题,这个时候如果用js进行直接执行该事件,往往就可以解决那些诡异的事情~

id定位:document.getElementById()
name定位:document.getElementsByName()
tag定位:document.getElementsByTagName()
class定位:document.getElementsByClassName()
css定位:document.querySelectorAll()

其中只有id对象用的是Element返回是单个对象,其他都是Elements返回的是一个list这点千万要注意,具体用法和上面的webdriver基础定位一样。先写好对应的js语句,可以先赋值给一个变量,然后后调用execute_script进行执行一下js就好了,下面还是结合那个百度搜索的栗子,我写的脚本,可以对应学习实验一下:

search_js = "document.getElementsByName('wd')[0].value='selenium';"
search_js2 = "document.querySelectorAll('.s_ipt')[0].value='selenium';"
button_js = "document.getElementById('su').click();"
button_js2 = "document.getElementsByClassName('s_btn')[0].click()"
driver.execute_script(search_js2)
driver.execute_script(button_js2)

以上分别结合常用的四种js定位方式写了四条js语句,然后要执行的就execute_script一下就好啦~

超神的jQuery定位

据说会jQuery定位的在定位的路上就是披襟斩棘,所向披靡~如此超神的定位,还是可以了解一下的~

jQuery语法是为HTML元素的选取编制的,可以对元素执行一些具体的操作

基础语法是$(selector).action()

$符号定义jQuery,selector选择器用来查询具体的HTML元素,通过action()来执行对元素的具体操作。

其中我们经常用到的action()在jq中有这么几种:

$(selector).val('input_value') 其中input_value表示要输入的文本的值

$(selector).val('') 如果为空,则执行后是清空的意思

$(selector).click() 行为也是肯定有的

让我们结合百度的栗子看一下,用jQuery的写法和js有一点点的类似,但明显简洁多了:

search_jq = "$('#kw').val('selenium')"
button_jq = "$('.s_btn').click()"
driver.execute_script(search_jq)
driver.execute_script(button_jq)

以上就是对webdriver的一些基本定位方式总结,我们再来回顾一下:

分别是……

8种webdriver的基本地位方式,还有对应的8种复数定位,js有5中定位方式,还有超神的jQuery定位,当然,不要忘了快要失传的那8种定位,一共是30种,在实际应用中,总有一种适合你(●ˇ∀ˇ●)

到此这篇关于Selenium元素定位的30种方式(史上最全)的文章就介绍到这了,更多相关Selenium元素定位内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
用python实现的可以拷贝或剪切一个文件列表中的所有文件
Apr 30 Python
python提取字典key列表的方法
Jul 11 Python
浅谈python中set使用
Jun 30 Python
Django卸载之后重新安装的方法
Mar 15 Python
python 利用栈和队列模拟递归的过程
May 29 Python
python批量爬取下载抖音视频
Jun 17 Python
选择python进行数据分析的理由和优势
Jun 25 Python
Pandas中Series和DataFrame的索引实现
Jun 27 Python
Python函数的默认参数设计示例详解
Dec 01 Python
python利用后缀表达式实现计算器功能
Feb 22 Python
Python利器openpyxl之操作excel表格
Apr 17 Python
利用Matlab绘制各类特殊图形的实例代码
Jul 16 Python
Python基于codecs模块实现文件读写案例解析
May 11 #Python
Python基于pandas爬取网页表格数据
May 11 #Python
Python调用shell命令常用方法(4种)
May 11 #Python
python中sort sorted reverse reversed函数的区别说明
May 11 #Python
python的reverse函数翻转结果为None的问题
May 11 #Python
Pyecharts地图显示不完成问题解决方案
May 11 #Python
将python字符串转化成长表达式的函数eval实例
May 11 #Python
You might like
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
js+css在交互上的应用
2010/07/18 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
js闭包学习心得总结
2018/04/17 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
js实现批量删除功能
2020/08/27 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
聚网科技C++面试笔试题
2015/09/01 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
学生手册家长评语
2014/02/10 职场文书
高中生职业规划范文
2014/03/09 职场文书
违章停车检讨书
2014/10/21 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang