说明:在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="百度一下" id="su" 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" id="kw" maxlength="100" autocomplete="off">

定位:

input = find_element_by_class("s_ipt")
  1. 多个class定位示例:
<input type="submit" value="百度一下" id="su" 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 id="kw" 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" style="display: none;">

定位:

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[@id='xxx']/input")
    # 跨级定位
    driver.find_element_by_xpath("//from[@id='xxx']/*/input") # 跨一级
    driver.find_element_by_xpath("//from[@id='xxx']/*/*/input") # 跨两级
    driver.find_element_by_xpath("//from[@id='xxx']//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[@id="su"]//ancestor::div')
    driver.find_element_by_xpath('//input[@id="su"]//ancestor::div[@id="s_fm"]')
    # 定位当前元素之前的所有同级元素
    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 id="a_b_c">请点击登录</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 id="su" value="abc">百度一下</input>

    定位:

    • and
    # 定位包含id属性值为“su"和value属性值为“abc”的input元素
    driver.find_element_by_xpath('//input[@id="su" and @value="abc"]')
    • or
    # 定位包含id属性值为“su"或“kw”的input元素
    driver.find_element_by_xpath('//input[@id="su" or @id="kw"]')
    • not
    # 定位不包含id属性值为“kw”的input元素
    driver.find_element_by_xpath('//input[not(@id="kw")]')
  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 id="test">1</li>
    </ul>

    定位:

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

CSS定位

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

CSS定位方法:

  1. .class选择器

    示例:

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

    定位:

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

    扩展示例:

    <span class="btn_wr s_btn_wr bg" id="s_btn_wr">
    <input type="submit" value="百度一下" id="su" 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" id="kw" 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" id="kw" 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" id="kw" 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" id="kw" 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" id="kw" 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" id="kw">
    <li id="ts">1</li>

    定位:

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

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

超全selenium元素定位XPath、CSS的更多相关文章

  1. selenium元素定位之css选择器

    在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...

  2. selenium元素定位Xpath,Contains,CssSelector

    最近有人问到定位问题,基本上我用以下三个方法可解决,但不同的项目使用方法不一样.以下为自己所用的简单记录说明 1.Xpath 经常使用且最能解决问题的定位 driver.findElement(By. ...

  3. python+selenium元素定位之CSS学习02

    参考文档:https://www.runoob.com/cssref/css-selectors.html CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS ...

  4. python+selenium元素定位之CSS学习01

    参考文档:https://www.w3school.com.cn/cssref/css_selectors.asp 选择器 例子 例子描述 CSS .class .intro 选择 class=&qu ...

  5. 自动化测试基础篇--Selenium元素定位

    摘自https://www.cnblogs.com/sanzangTst/p/7457111.html 一.Selenium元素定位的重要性: Web自动化测试的操作:获取UI页面的元素,对元素进行操 ...

  6. Selenium3 + Python3自动化测试系列二——selenium元素定位

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

  7. selenium元素定位陷阱规避

    为什么selenium可以在各个浏览器上运行?因为selenium在与各个浏览器驱动执行前,会先把脚本转化成webdriver, webdriver wire协议(一种json格式的协议),这样就与脚 ...

  8. 页面元素定位 XPath 简介

    页面元素定位 XPath 简介 本文所说的 Xpath 是用于 Selenium 自动化测试所使用到的,是针对XHTML网页而言的一种页面元素的定位表示法. XPath 背景 XPath即为XML路径 ...

  9. 史上最全!Selenium元素定位的30种方式

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

随机推荐

  1. Django序列化组件与数据批量操作与简单使用Forms组件

    目录 SweetAlert前端插件 Django自带的序列化组件 批量数据操作 分页器与推导流程 Forms组件之创建 Forms组件之数据校验 Forms组件之渲染标签 Forms组件之信息展示 S ...

  2. [算法学习] dsu on tree

    简介 dsu on tree跟dsu没有关系,但是dsu on tree借鉴了dsu的启发式合并的思想. 它是用来解决一类树上的询问问题,一般这种问题有以下特征: \(1.\)只有对子树的查询: \( ...

  3. 管理订单状态,该上状态机吗?轻量级状态机COLA StateMachine保姆级入门教程

    前言 在平常的后端项目开发中,状态机模式的使用其实没有大家想象中那么常见,笔者之前由于不在电商领域工作,很少在业务代码中用状态机来管理各种状态,一般都是手动get/set状态值.去年笔者进入了电商领域 ...

  4. 题解0014:信奥一本通1472——The XOR Largest Pair(字典树)

    题目链接:http://ybt.ssoier.cn:8088/problem_show.php?pid=1472 题目描述:在给定的 N 个整数中选出两个进行异或运算,求得到的结果最大是多少. 看到这 ...

  5. EasyExcel-合并单元格

    pom版本 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</ ...

  6. 如何写一个全局的 Notice 组件?

    下面将会实现这样的效果: 组件动态创建脚本: NotificationBanner.js import Vue from "vue"; import Notice from &qu ...

  7. 讲一个linux服务启动报错问题排查

    例子 首先我们在/usr/lib/systemd/system目录下创建一个服务文件,写下服务启动任务配置.下面我以prometheus的node_exporter为例 vim /usr/lib/sy ...

  8. BUUCTF-来首歌吧

    来首歌吧 歌曲题目一般就是整个摩斯电码 看上面的样子应该就是摩斯电码解密一下 ..... -... -.-. ----. ..--- ..... -.... ....- ----. -.-. -... ...

  9. go统计字符串及数组中出现次数

    数组:统计出现字数 package main import "fmt" func main() { s := [...]string{"Mlxg", " ...

  10. 【Java面试】什么是 ISR,为什么需要引入 ISR

    Hi,大家好,我是Mic. 一个工作5年的粉丝,在简历上写精通Kafka. 结果在面试的时候直接打脸. 面试官问他:"什么是ISR,为什么需要设计ISR" 然后他一脸懵逼的看着面试 ...