背景：对UI自动化来说，元素定位算是核心工作了，为了避免遗忘，因此对常用的元素定位做一个记录。
一.页面中的基础元素概念简介
1.标签，以下代码中的html；body；div；form就是标签名
<html></html>
<body></body>
<div></div>
<form></form>
2.属性，这里的id class name等就是属性
<div id="head" class="s_down">
<from class="well">
<input id="kw" name="wd" class="s_ipt">
3.文本，标签对之间可以有文本数据，这里标签对之间的新闻，地图就是文本数据
<a>新闻</a>
<a>地图</a>
4.标签的层级关系，这里的body就是html的子标签，相对的html就是body的父标签
<html>
<body>
</body>
</html>
二.元素定位
我们都知道，要想通过代码操作页面，就需要找到对应元素的位置，普遍常用的定位方式有以下八种。
1.id定位
find_element_by_id("kw")
kw就是属性为id的元素；find_element_by_id()这个方法就是通过id定位元素的
2.name定位
find_element_by_name("wd")
wd就是属性为name的元素；find_element_by_name()这个方法就是通过name定位元素的
3.class定位
find_element_by_class_name("s_ipt")
s_ipt就是属性为class的元素；find_element_by_class_name()这个方法就是通过class定位元素的
4.tag定位（很少用，因为相同的标签名很多）
find_element_by_tag_name("input")
这里的input是标签的名字，因为相同的标签名有很多，所以使用tag定位的时候一定要在后面加上下标（例如：find_element_by_tag_name(“input”)[1]）
5.link定位
find_element_by_link_text("新闻")
link定位与前面介绍的方法有所不同，它只能定位文本链接（注意是链接）；在web的链接一般属性有href，标签名为<\a>；例子中的“新闻”则是标签对之间的文本
6.partial link定位
find_element_by_partial_link_text("很长的")
partial_link定位是link的一种补充，可以利用文字链接的一部分文字进行定位；这里的"很长的"是整段文字的一部分内容
7.Xpath定位（重点）
Xpath有很多种定位方法，比较灵活，实际经常使用；使用方法：find_element_by_xpath()；以下对常用的方法介绍一下
- 1.绝对路径定位（一般不使用）
find_element_by_xpath("/html/body/div/div/div/from/span/input")
这里"/html/body/div/div/div/from/span/input"是元素标签的层级关系，利用绝对路径去定位
- 2.利用元素属性定位（常用）
find_element_by_xpath("//input[@id='kw']")
//input表示当前页面下某个input的标签，[@id=‘kw’]表示这个元素的id值为kw
如果不想指定标签名也可以把input换成*，表示页面下任意一个标签；xpath可以对任意的属性使用
- 3.层级与属性结合
find_element_by_xpath("//span[@class='bg s_ipt_wr']/input")
这里定位的是span标签中class属性值为bg s_ipt_wr的子标签为input的元素
- 4.使用逻辑运算符
find_element_by_xpath("//input[@id='kw' and @class='s_ipt']")
使用and表示满足两个属性值来定位元素，注意写法为在同一个[]中，每个属性前面都要有@
- 5.使用contains
find_element_by_xpath("//span[contains(@class,'s_ipt_wr')]")
定位的是class属性值包含’s_ipt_wr’的元素
- 6.使用text()方法（常用的定位文字的方法）
find_element_by_xpath("//a[text(),'新闻']")
注意写法text(),‘中文’；定位的是匹配文字
也可以配合contains使用
find_element_by_xpath("//a[contains(text(),'新闻')]")
这样就定位了text包含新闻的文字
8.CSS定位（重点）
CSS是一种语言，用来描述HTML和XML文档的表现。一般情况下，CSS的定位速度比Xpath定位速度快。使用方法为find_element_by_css_selector()；以下介绍一下几种常用的定位方法
- 1.通过class定位
find_element_by_css_selector(".s_ipt")
在CSS中，点号表示通过class来定位元素
- 2.通过id定位
find_element_by_css_selector("#ku")
在CSS中，#号表示通过id来定位元素
- 3.通过标签名来定位
find_element_by_css_selector("input")
在CSS中，用标签名定位时不需要任何符号标识，直接使用标签名即可
- 4.通过标签层级关系定位
find_element_by_css_selector("span > input")
写法表示span是父标签，定位span的子标签为input的元素
- 5.通过属性定位（常用）
find_element_by_css_selector("[name='kw']")
在CSS中，可以使用元素的任意属性定位，注意写法，必须使用中括号把属性括起来
- 6.组合定位
find_element_by_css_selector("form.fm > span > input,s_ipt")
这里读作标签form属性class的值为fm中子标签为span中子标签为input并属性class的值为s_ipt的元素
- 7.更多定位方法
find_element_by_css_selector("[class*=s_ipt]")
这里定位的是class属性包含s_ipt字符串的元素
find_element_by_css_selector("[class^=bg]")
这里定位的是class属性以bg字符串开头的元素
find_element_by_css_selector("[class$=wrap]")
这里定位的是class属性以wrap字符串结尾的元素
find_element_by_css_selector("td#sex :nth-child(2)")
这里定位的是html页面中id属性为sex的td标签下的第二个子元素标签，注意冒号前必须有一个空格。
总结：
八大元素定位最常用的就是xpath和css定位，因为这两种最灵活，可以定位到各种元素；语法有很多，这里只列出了常用的，更多的使用方法请自行查找。最后建议各位进行自动化测试试，尽量让前端也参与配合，这样元素定位会更方便
扫一扫
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
