Python-selenium-选择器-快速定位元素-XPath-CSS选择器

  在采用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 | //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 选择所有

元素。

element.class p.intro 选择 class=“intro” 的所有

元素。

element,element div, p 选择所有 element element div p 选择 element>element div > p 选择父元素是 element+element div + p 选择紧跟 element1~element2 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” 开头的每个 元素。 [attribute$=value] a[href$=".pdf"] 选择其 src 属性以 “.pdf” 结尾的所有 元素。 [attribute*=value] a[href*=“abc”] 选择其 href 属性值中包含 “abc” 子串的每个 元素。 :active a:active 选择活动链接。 ::after p::after 在每个

的内容之后插入内容。

::before p::before 在每个

的内容之前插入内容。

:checked input:checked 选择每个被选中的元素。 :default input:default 选择默认的元素。 :disabled input:disabled 选择每个被禁用的元素。 :empty p:empty 选择没有子元素的每个

元素（包括文本节点）。

:enabled input:enabled 选择每个启用的元素。 :first-child p:first-child 选择属于父元素的第一个子元素的每个

元素。

::first-letter p::first-letter 选择每个

元素的首字母。

::first-line p::first-line 选择每个

元素的首行。

:first-of-type p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

: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”（意大利）的每个

元素。

:last-child p:last-child 选择属于其父元素最后一个子元素每个

元素。

:last-of-type p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

:link a:link 选择所有未访问过的链接。 :not(selector) :not§ 选择非

元素的每个元素。

:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 :nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个

元素的每个

元素。

:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 :only-of-type p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

:only-child p:only-child 选择属于其父元素的唯一子元素的每个

元素。

: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.作者答疑

  如有疑问，请留言。