Python-selenium-选择器-快速定位元素-XPath-CSS选择器-CFANZ编程社区

文章目录

在采用selenium驱使浏览器模拟人工工作时，最基本的一步是获取目标元素。在目标元素上进行相应的鼠标和键盘操作。

1.find_element_by_xpath和find_elements_by_xpath

XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。如果读者需要对XML标记语言进行数据的读取和保存，采用XPath将非常方便，本文先介绍XPath的基础语法使用。

1.1.常用表达式

常用表达式描述：

表达式	描述
nodename	选取此节点的所有子节点
/	从根节点选取
//	从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
.	选取当前节点。
…	选取当前节点的父节点
@	选取属性

使用范例表达如下：

路径表达式	描述
bookstore	选取bookstore元素的所有子节点。
/bookstore	选取根元素 bookstore。注释：假如路径起始于正斜杠( / )，则此路径始终代表到某元素的绝对路径！
bookstore/book	选取属于bookstore的子元素的所有book元素
//book	选取所有book子元素，而不管它们在文档中的位置
bookstore//book	选择属于bookstore元素的后代的所有bok元素，而不管它们位于bookstore之下的什么位置
//@lang	选取名为lang的所有属性。

1.2.谓语(Predicates)

谓语用来查找某个特定的节点或者包含某个特定的值的节点，被嵌在方括号中。在下面的表格中，我们列出了带有谓语的一些路径表达式，以及表达式的结果：

路径表达式	结果
/bookstore/book[1]	选取属于bookstore子元素的第一个book元素。
/bookstore/book[last()]	选取数据bookstore子元素的最后一个book元素
/bookstore/book[last()-1]	选取属于bookstore元素的倒数第二个book元素
//title[@lang]	选取所有拥有名为lang的属性的title元素
//title[@lang=“eng”]	选取所有title元素，且这些元素拥有值为eng的lang属性
/bookstore/book[price>15.00]	选取所有bookstore元素的book元素，且其中的price元素的值必须大于15.00
/bookstore/book[price>15.00]/title	选取bookstore元素中的book元素的所有title元素，且其中的price元素的值必须大于15.00

选取未知节点，XPath通配符可用来选取未知的XML元素。

通配符	描述
*	匹配任何元素节点
@*	匹配任何属性节点

选取若干路径，通过在路径表达式中使用"|"运算符，您可以选取若干个路劲。

路径表达式	结果
‘//book/title \| //book/price’	选取book元素的所有title和price元素。
//title &#124 //price	选取文档中的所有title和price元素
/bookstore/book/title \| //price	选取属于bookstore元素的book元素的title元素，以及文档中的所有price元素

1.3.常用方法

1.3.1.利用标签内的属性进行定位

(1)通过id属性

xpath = "//a[@id='start_handle']"#a表示选取所有a元素，加上[@id='start_handle']表示选取id属性为'start_handle'的a元素

(2)通过name属性定位

xpath = "//input[@name='custName']"#xpath = " #标签名[@属性='属性值']"
xpath= "//input[@type='XX' and @name='XX']" #组合方式

1.3.2.利用text()方法定位

利用html容器内的文本来定位查找。

xpath = "//a[text()='上一步']"
xpath = "//a[text()='开始办理']"

1.3.3.利用contains()方法定位

xpath = "//标签名[contains(@属性, '属性值')]"
xpath = "//a[contains(@href, 'basicinfo')]" #局部包含字符串basicinfo

1.4.驱动案例

import os
import time
from lxml import etree
from selenium import webdriver
import shutil

#实例化谷歌设置选项
option = webdriver.ChromeOptions()
chrome_options = webdriver.ChromeOptions()
chrome_options.add_experimental_option("debuggerAddress", "127.0.0.1:9222")
chrome_driver=r"chromedriver.exe";
driver = webdriver.Chrome(executable_path=chrome_driver,options=chrome_options);

suoxuan_fenlei = driver.find_element_by_xpath("//input[@placeholder=\"请选择\"]//..");
suoxuan_fenlei.click();

page_source=driver.page_source;
htmlElement = etree.HTML(page_source);
xuanxiang1id=htmlElement.xpath("//div[@class=\"el-cascader-panel\"]/div/@id")[0];
xuanxiang1id=xuanxiang1id+"-0";
xuanxiang1 = driver.find_element_by_id(xuanxiang1id);#cascader-menu-9071-0-0
xuanxiang1.click();

htmlElement = etree.HTML(page_source);
xuanxiang2id=htmlElement.xpath("//div[@class=\"el-cascader-panel\"]/div[2]/@id")[0];
xuanxiang2id=xuanxiang2id+"-1";
xuanxiang2 = driver.find_element_by_id(xuanxiang2id);
xuanxiang2.click();

2.find_element_by_id和find_elements_by_id

通过元素id来查找指定目标元素，注意不要加#号。

3.find_element_by_name和find_elements_by_name

通过元素属性name名称来查找指定目标元素。

4.find_element_by_class和find_elements_by_class

通过元素属性class名称来查找指定目标元素，注意不要加.号。

5.find_element_by_tag和find_elements_by_tag

通过元素标签名称来查找指定目标元素，如div。

6.find_element_by_css_selector和find_elements_by_css_selector

利用css的选择器来定位元素，规则如下所示：

选择器	例子	例子描述
.class	.intro	选择 class=“intro” 的所有元素。
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。与上一行相比这一行中间有空格。
#id	#firstname	选择 id=“firstname” 的元素。
*	*	选择所有元素。
element	p	选择所有 <p> 元素。
element.class	p.intro	选择 class=“intro” 的所有 <p> 元素。
element,element	div, p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内的所有 <p> 元素。
element>element	div > p	选择父元素是 <div> 的所有 <p> 元素。
element+element	div + p	选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2	p ~ ul	选择前面有 <p> 元素的每个 <ul> 元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 “en” 开头的所有元素。
[attribute^=value]	a[href^=“https”]	选择其 src 属性值以 “https” 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素。
[attribute*=value]	a[href*=“abc”]	选择其 href 属性值中包含 “abc” 子串的每个 <a> 元素。
:active	a:active	选择活动链接。
::after	p::after	在每个 <p> 的内容之后插入内容。
::before	p::before	在每个 <p> 的内容之前插入内容。
:checked	input:checked	选择每个被选中的 <input> 元素。
:default	input:default	选择默认的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的 <input> 元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 “it”（意大利）的每个 <p> 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未访问过的链接。
:not(selector)	:not§	选择非 <p> 元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。
:optional	input:optional	选择不带 “required” 属性的 input 元素。
:out-of-range	input:out-of-range	选择值超出指定范围的 input 元素。
::placeholder	input::placeholder	选择已规定 “placeholder” 属性的 input 元素。
:read-only	input:read-only	选择已规定 “readonly” 属性的 input 元素。
:read-write	input:read-write	选择未规定 “readonly” 属性的 input 元素。
:required	input:required	选择已规定 “required” 属性的 input 元素。
:root	:root	选择文档的根元素。
::selection	::selection	选择用户已选取的元素部分。
:target	#news:target	选择当前活动的 #news 元素。
:valid	input:valid	选择带有有效值的所有 input 元素。
:visited	a:visited	选择所有已访问的链接。

7.总结

通过上面的讲述可以清楚的得出selenium提供简单的定位方式，如name,id和tag，也提供了复杂的定位方式，如xpath和css选择器两种方式来增强灵活性。读者遇到具体的项目时，可以灵活采用。

8.其它

8.1.网页源代码获取

如需更精确的定位，通常涉及获取网页源码，如下所示：

page_source=driver.page_source;

8.2.Javascript执行

selenium提供了外部执行JS代码的接口，这样可以通过执行外部的JS语句来执行一些对应的功能。结合Jquery的选择器，如下所示：

##1、根据id定位 
jq_userName = "$('#session_email_or_mobile_number’).val('userName’)" 
dr.execute_script(jq_userName) 
sleep(2)
 
##2、根据type定位 
jq_userName2 = "$(':text’).val('type’)" 
dr.execute_script(jq_userName2) 
sleep(2)
 
##3 根据class定位 
##jq_loginBtn = "$('.sign-in-button’).click()" 
##dr.execute_script(jq_loginBtn)
 
##4、按层级定位 
##带有标签的层级定位
 
jq_userName3 = "$('div.input-prepend.restyle.js-normal > input#session_email_or_mobile_number’).val('userName3’)" 
dr.execute_script(jq_userName3) 
sleep(2)
 
##2）不带有标签的层级定位 
jq_userName4 = "$('.input-prepend.restyle.js-normal > #session_email_or_mobile_number’).val('userName4’)" 
dr.execute_script(jq_userName4) 
sleep(2)
 
##3）、不带层次符 
jq_userName5 = "$('.input-prepend.restyle.js-normal #session_email_or_mobile_number’).val('userName5’)" 
dr.execute_script(jq_userName5) 
sleep(2)
 
##4)、选择最后一个元素 
jq_userName6 = "$('div.input-prepend.restyle.js-normal > input:last’).val('userName6’)" 
dr.execute_script(jq_userName6) 
sleep(2)
 
##5)、选择指定元素 标签:eq(索引位) – 从0开始 
jq_userName7 = "$('div.input-prepend.restyle.js-normal > input:eq(0)’).val('userName7’)" 
dr.execute_script(jq_userName7) 
sleep(2)
 
##6)、选择指定元素 标签:nth-child(序号) – 从1开始 
jq_userName8 = "$('div.input-prepend.restyle.js-normal > input:nth-child(1)’).val('userName8’)" 
dr.execute_script(jq_userName8)

8.3.浏览器

浏览器提供了强大的选择器显示功能，供读者参考，如下图所示：
在这里插入图片描述

9.作者答疑

如有疑问，请留言。