超全selenium元素定位XPath、CSS

说明：在HTML页面中，<p> 是一个标签，<p>hello</p> 是一个元素，元素由一个开始的标签和结束的标签组成。<font color="red">标签包含属性名color，属性值为red。

id定位

说明：CSS的id选择器，id常用于JS操作DOM节点对象。当同个id被多次引用时，通过getElementById方法获取到的是在文档中第一个出现该id的标签(DOM节点对象)，因此id一般只被引用于一个标签。

示例：

<input type="submit" value="百度一下"  class="btn self-btn bg s_btn">

定位：

input = find_element_by_id("su")

class定位

说明：CSS的.class选择器，用于包装一组样式和布局供标签引用，常被复用于多个标签，且多个class可同时作用于同一个标签（多个class通过空格隔开，如：class="btn self-btn bg s_btn"）。

1. 单个clsss示例：

<input type="text" class="s_ipt" name="wd"  maxlength="100" autocomplete="off">

定位：

input = find_element_by_class("s_ipt")

2. 多个class定位示例：

<input type="submit" value="百度一下"  class="btn self-btn bg s_btn">

定位：当标签被多个class作用时，此时不推荐使用class定位，因为通常会定位到多个元素，可通过XPath定位和CSS定位代替。

注意：class定位只能使用一个class，而XPath定位和CSS定位则需要输入所有class

# class定位
input_1 = find_element_by_class("btn")
input_2 = find_element_by_class("self-btn")
input_3 = find_element_by_class("bg s_btn")
# XPath定位
input_4 = find_element_by_Xpath('//input[@class="btn self-btn bg s_btn"]')
# CSS定位
input_5 = find_element_by_css('input[class="btn self-btn bg s_btn"]')

name定位

说明：HTML标签中name属性相当于一个变量名，value属性相当于一个变量值，在JS中以及向网站后端传送参数时，与value一起用，比如name是“color”，value是“red”，那么就会有参数color=“red”

示例：

<input  name="wd" class="s_ipt" value="输入框的内容" maxlength="255" autocomplete="off">

定位：

input = find_element_by_name("wd")

tag定位

说明：根据标签名称定位，常被用来定位一类功能，HTML页面中有很多相同的标签，因此很少用tag定位单个元素。

示例：

<iframe src="https://www.google.com/recaptcha/api2/aframe" width="0" height="0" >

定位：

iframe = find_element_by_tag_name("iframe")

link_text定位

说明：专门定位文本链接元素，通过<a>标签对之间的文字信息来定位元素。

示例：

<a  href="http://news.baidu.com">新闻</a>

定位：

driver.find_element_by_link_text("新闻")

partial_link_text定位

说明：partial_link_text定位是对link_text定位的一种补充，有些文字链接比较长，这个时候我们可以取文字链接的部分文字进行定位，只要这部分文字可以唯一地标识这个链接即可。

示例：

<a class="mnav" name="tj_lang" href="#">一个很长的文本链接</a>

定位：

driver.find_element_by_partial_link_text("文本链接")

XPath定位

说明：XPath 是用于在 XML 文档中定位节点的语言。由于 HTML 可以是 XML (XHTML) 的实现，因此 Selenium 用户可以利用这种强大的语言来定位其 Web 页面中的元素。

XPath定位方法：

1. 绝对路径

   # 定位该路径的input元素
   driver.find_element_by_xpath("html/body/div/form/input")
   

2. 相对路径

   # 定位form元素下的input元素
   driver.find_element_by_xpath("//form/input")
   

3. 元素索引

   # 定位form元素下第一个input元素
   driver.find_element_by_xpath("//form/input[1]")  # 索引从[1]开始
   

4. 属性

   # 定位包含value属性的input元素
   driver.find_element_by_xpath("//input[@value]")  # 属性前必须带@
   

5. 属性+属性值

   # 定位包含value属性值为‘xxx’的input元素
   driver.find_element_by_xpath("//input[@value='xxx']")
   # 注意：使用class属性定位时，需写入该元素所有class值才能定位到
   driver.find_element_by_xpath("//input[@class='a b c']")  # 多个class值通过空格隔开分别为a,b,c
   

6. *号（任意值）

   # 定位包含value属性的任意元素
   driver.find_element_by_xpath("//*[@value]")
   # 定位包含任意属性的值等于'xxx'的input元素
   driver.find_element_by_xpath("//input[@*='xxx']")
   

7. 层级与属性结合

   # 定位包含id属性值为'xxx'的from元素下的input元素
   driver.find_element_by_xpath("//from[@]/input")
   # 跨级定位
   driver.find_element_by_xpath("//from[@]/*/input")  # 跨一级
   driver.find_element_by_xpath("//from[@]/*/*/input")  # 跨两级
   driver.find_element_by_xpath("//from[@]//input")  # 跨多级
   

8. 轴方式定位

   轴表达式说明：

   parent::* ：表示当前节点的父节点元素，同: //div/..
   
   ancestor::* ：表示当前节点的祖先节点元素
   
   descendant::* : 表示当前节点的子孙节点元素
   
   child::* ：表示当前节点的子元素//A/descendant::* 表示A的所有后代元素，同://A/*
   
   self::* ：表示当前节点的自身元素
   
   ancestor-or-self::* ：表示当前节点的及它的祖先节点元素
   
   descendant-or-self::* ：表示当前节点的及它们的后代元素
   
   following-sibling::* ：表示当前节点的后序所有兄弟节点元素
   
   preceding-sibling::* ：表示当前节点的前面所有兄弟节点元素
   
   following::* ：表示html结构中当前节点的之前所有层级元素
   
   preceding::* ：表示html结构中当前节点的之后所有层级元素
   
   

   定位：

   # 定位父级元素
   driver.find_element_by_xpath('//*[@class="值"]/parent::*')
   driver.find_element_by_xpath('//*[@class="值"]/..')
   # 定位指定的祖先元素
   driver.find_element_by_xpath('//input[@]//ancestor::div')
   driver.find_element_by_xpath('//input[@]//ancestor::div[@]'）
   # 定位当前元素之前的所有同级元素
   driver.find_elements_by_xpath('//*[@class="值"]/preceding-sibling::*')
   # 定位当前元素之后的所有同级的input元素
   driver.find_elements_by_xpath('//*[@class="值"]/following-sibling::input')
   # 定位同级元素的上n个元素（n从1开始）
   driver.find_element_by_xpath('//*[@class="值"]/preceding-sibling::*[n]')
   # 定位同级元素的下n个元素（n从1开始）
   driver.find_element_by_xpath('//*[@class="值"]/following-sibling::*[n]')
   

9. text()标签对文本方法

   示例：

   <button>登录</button>
   

   注意：“ text() ”可通过“ . ”表示！

   定位：

   # 定位标签对文本等于‘登录’的button元素，注意非属性不需要@
   driver.find_element_by_xpath('//button[text()="登录"]')
   # 用“ . ”代替text()
   driver.find_element_by_xpath('//button[.="登录"]')
   

10. 模糊属性值匹配方法

    示例：

    <button >请点击登录</button>
    

    定位：

    • starts-with（@属性/text()，开头值）：

      driver.find_element_by_xpath('//button[starts-with(@id,"a")]')
      driver.find_element_by_xpath('//button[starts-with(text(),"请")]')
      

    • ends-with（@属性/text()，结尾值）：

      driver.find_element_by_xpath('//button[ends-with(@id,"c")]')
      driver.find_element_by_xpath('//button[ends-with(text(),"登录")]')
      

    • contains（@属性/text()，包含值）：

      driver.find_element_by_xpath('//button[contains(@id,"b")]')
      driver.find_element_by_xpath('//button[contains(text(),"点击")]')
      

11. and、or、not

    示例：

    <input  value="abc">百度一下</input>
    

    定位：

    • and

    # 定位包含id属性值为“su"和value属性值为“abc”的input元素
    driver.find_element_by_xpath('//input[@ and @value="abc"]')
    

    • or

    # 定位包含id属性值为“su"或“kw”的input元素
    driver.find_element_by_xpath('//input[@ or @]')
    

    • not

    # 定位不包含id属性值为“kw”的input元素
    driver.find_element_by_xpath('//input[not(@)]')
    

12. last()方法

    定位：

    # 定位搜索到的最后一个元素
    driver.find_element_by_xpath('//ul/li[last()]')
    # 定位搜索到的倒数第二个元素
    driver.find_element_by_xpath('//ul/li[last()-1]')
    

13. 计算符方式定位

    示例：

    <body>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
    </body>
    

    定位：

    # 定位标签文本等于1的p元素
    driver.find_element_by_xpath('//body/p[.=1]')
    # 定位标签文本不等于2的p元素
    driver.find_element_by_xpath('//body/p[.!=2]')
    # 定位标签文本大于3的p元素
    driver.find_element_by_xpath('//body/p[.>3]')
    # 定位标签文本小于等于3的p元素
    driver.find_element_by_xpath('//body/p[.<=4]')
    

14. position()方法定位

    示例：

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    

    定位：

    # 定位第一个li元素
    driver.find_element_by_xpath('//ul/li[position()=1')
    # 定位第三个li元素
    driver.find_element_by_xpath('//ul/li[position()=3')
    

15. 根据子元素定位父元素

    示例：

    <ul>
      <li >1</li>
    </ul>
    

    定位：

    # 定位子元素含有li元素的ul元素
    driver.find_element_by_xpath('//ul[li]')
    # 定位子元素含有li元素且li元素id属性值为test的所有元素
    driver.find_element_by_xpath('//*[li[@]]')
    # 定位子孙元素含有li元素且li元素id属性值为test的所有元素
    driver.find_element_by_xpath('//*[.//*[@]]')
    

CSS定位

说明：CSS指层叠样式表（Cascading Style Sheet），用来定义如何显示HTML和XML的元素。CSS使用选择器为页面元素绑定属性。

CSS定位方法：

1. .class选择器

   示例：

   <input type="text" class="s_ipt" name="wd"  maxlength="100">
   

   定位：

   # 点号(.)加class属性值
   driver.find_element_by_css_selector(".s_ipt")
   

   扩展示例：

   <span class="btn_wr s_btn_wr bg" >
       <input type="submit" value="百度一下"  class="btn self-btn bg s_btn"></span>
   

   定位：

   # .btn_wr.s_btn_wr：定位class属性中同时有btn_wr和s_btn_wr的元素
   driver.find_element_by_css_selector(".btn_wr.s_btn_wr")
   # .btn_wr .btn：定位class属性为tn_wr元素的后代包含class属性为btn的所有元素
   driver.find_element_by_css_selector(".btn_wr .btn")
   

2. #id选择器

   示例：

   <input type="text" class="s_ipt" name="wd"  maxlength="100">
   

   定位：

   # 井号(#)表示通过id属性值来定位
   driver.find_element_by_css_selector("#kw")
   # 定位class属性值包含form的元素的子孙元素且子孙元素id属性值为kw
   driver.find_element_by_css_selector(".form #kw")
   

3. 标签名.class值、标签名#id值

   示例：

   <input type="text" class="s_ipt" name="wd"  maxlength="100">
   

   定位：

   # 定位class属性值含有s_ipt的input标签元素
   driver.find_element_by_css_selector("input.s_ipt")
   # 定位id属性值为kw的input标签元素
   driver.find_element_by_css_selector("input#kw")
   # 定位class属性值含有s_ipt且id属性值为kw的input标签元素
   driver.find_element_by_css_selector("input.s_ipt#kw")
   

4. 标签名[属性名=属性值]

   示例：

   <input type="text" class="s_ipt" name="wd"  maxlength="100">
   

   定位：

   # 定位name属性值为wd的input标签元素
   driver.find_element_by_css_selector('input[name="wd"]')
   # 定位type属性值为text的所有元素
   driver.find_element_by_css_selector('[type="text"]')
   # 定位name属性值为wd的input且type属性值为text的input标签元素
   driver.find_element_by_css_selector("input[name="wd"][type="text"]")
   

5. 属性模糊值定位

   示例：

   <input type="text" class="abc ede fgh" name="s_ipt"  maxlength="100">
   

   定位：

   # 定位name属性值以s_开头的元素
   driver.find_element_by_css_selector('[name^="s_"]')
   # 定位name属性值包含_ip的元素
   driver.find_element_by_css_selector('[name*="_ip"]')
   # 定位name属性值以ipt结尾的元素
   driver.find_element_by_css_selector("[name$="ipt"]")
   # 定位class属性包含ede纯字母单词的元素，非字母分割
   driver.find_element_by_css_selector("[class~="ede"]")
   # 定位class以abc纯字母单词开头的元素，非字母分割
   driver.find_element_by_css_selector("[class|="ede"]")
   

6. 层级定位

   示例：

   <div>
     <ul>
       <li>1</li>
       <li>2</li>
     </ul>
   </div>
   

   定位：

   # 根据路径定位li元素
   driver.find_element_by_css_selector('div>ul>li')
   # 定位div元素下所有li子孙元素
   driver.find_element_by_css_selector('div li')
   # 定位div元素下下层的li元素
   driver.find_element_by_css_selector('div>*>li')
   

7. 定位同级兄弟元素

   示例：

   <input type="text" class="s_ipt" name="wd"  maxlength="100">
   <li>1</li>
   <li>2</li>
   

   定位：

   # 定位input元素下一个li兄弟元素
   driver.find_element_by_css_selector('input#kw+li')
   # 定位input元素以后所有li兄弟元素
   driver.find_element_by_css_selector('input#kw~li')
   

8. 伪类定位元素

   div>:first-child         # 定位div元素下第一个子元素
   
   div>:nth-child(2)        # 定位div元素下第二个子元素
   
   div>:last-child          # 定位div元素下最后个子元素
   
   input:focus              # 定位获取焦点的input元素
   
   input:enabled            # 定位可操作的input元素
   
   input:checked            # 定位处于勾选状态的checkbox元素
   
   input:not([id])          # 定位所有无id属性的input元素
   

9. 多标签定位

   示例：

   <input type="text" class="s_ipt" name="wd" >
   <li >1</li>
   

   定位：

   # 同时定位input元素和li元素
   driver.find_element_by_css_selector('input, li')
   driver.find_element_by_css_selector('input[name="wd"], li#ts')
   

   注意：","后面需接空格。