自动化测试系列--元素定位

原创，转载备注出处，手机码字，抽空会整理格式

写在最前：定位元素方法多种多样：by name，by tag，by text，by id，by class等，初学者最常用的无非ID、xpath这两种，但上述的几种都可以使用xpath（推荐相对xpath，极其不提倡绝对xpath）、css选择器来实现，总体而言，xpath定位功能更强（轴运算），css选择器也有其有点（简单元素定位时，定位器更短）

一、前置知识：

虚拟资源 / 虚机磁盘

如上，是一段页面源码： 1、其中是完整的页面标签，为开始标签、称为闭合标签；开始标签和闭合标签中的文本为展示文本，用innerText表示。没有innerText的标签可以不写闭合标签。 2、标签

中，<括号紧接着的第一个单词为其标签名称，其后如同class="input-container ng-tns-c65-17 ng-star-inserted"形式的为标签属性，class为属性名，等号后为其属性值。一个标签下可以有多个属性，如上文的input标签中。部分属性可以无值，如disabled属性。 3、在上文中，div标签是input、i、span标签的父级，input、i、span为div子级，input、i、span互为同级。 4、在html中，每个标签有固定的含义，如div是块级，囊括有相同class属性的元素；input表示输入表单元素等等。详见html教程。

二、元素定位基本：
1、元素定位表达式的格式:
1）相对xpath定位格式：
首先要以//开头，其后是标签名，再以[]括号包围标签属性：
xpath=标签名[@属性名=“属性值”]
注意：
若不指定标签名定位，可用代替标签名
若不指定属性去定位，可省略[]及其内容
2）css选择器定位格式：
css=标签名[属性名=“属性值”]
注意：
同样，标签名和[]内都可省略
当属性名为id和class时，可简写为：css=标签名#id值、css-标签名.class值
2、具体定位方法：
1）通过元素属性去定位：
通过属性去定位，可以定位到当前层级下所有拥有该属性的元素
如：xpath=//[@id=“su”]（css=#su）
可定位到所有id为su的元素
2）通过标签定位：
通过标签定位，可定位到当前层级下所有该标签的元素
如：xpath=//div（css=div）
可定位到所有div
3）通过标签和属性联合定位：
如：xpath=//input[@id=“su”]（css=input#su）
可以定位到所有id为su的input标签元素
4）父级元素定位子级元素：
很多时候，待定位的元素无明显特征可唯一定位，要先找到该元素可唯一定位的父级，再逐层找到该元素，如下方代码所示，需要定位到第一个td下的span元素

2020-06-19 09:45:00

2020-06-19 09:45:00

xpath： xpath代表子级的分隔符为/ 当有多个同样的子元素时，可用[n]表示其为第n个子元素（从上到下，从1开始计数）（[last()]代表最后一个子元素，相当实用） 可从table标签开始定位：xpath=//table[@class="px-ui-datatable-data px-ui-widget-content"]/tbody/tr/td[1]/span 若要选择一个元素下所有的子元素，不加[n]即可：xpath=//table[@class="px-ui-datatable-data px-ui-widget-content"]/tbody/tr/td，可选择tr下所有td css： css代表子级的分隔符为> 当有多个同样的子元素时，可用:nth-child(n)代表其为第n个元素（n为固定正整数） 可从table标签开始定位：css=table."px-ui-datatable-data px-ui-widget-content">tbody/tr/td:nth-child(1)/span 若要选择一个元素下所有的子元素，直接使用:nth-child(n)即可：css=table."px-ui-datatable-data px-ui-widget-content">tbody/tr/td:nth-child(n)，可选择tr下所有td css还有一个特性，可略过中间元素，直接定位到父级元素的所有下级元素，即可直接从table定位到td，用空格做分隔符即可：css=table."px-ui-datatable-data px-ui-widget-content" td:nth-child(1)/span，注意td之前的空格 5）同级元素定位： 通常先定位到同一级别容易定位的元素，在定位到需要的元素 xpath： 即轴运算：“//div[@id="su"]/following-sibling::td”代表与id为su的div元素同级的下一个td元素 轴运算名称： ancestor：祖先节点，包括父节点 parent：父节点 preceding：当前元素节点标签之前的所有节点（HTML页面之前的） preceding-sibling：当前元素节点标签之前的所有兄弟节点（同级） following：当前元素节点标签之后的所有节点 following-sibling：当前元素节点标签之后的所有兄弟节点（同级） 使用语法：轴名称::节点名称 前后的定位与之前一致，用/隔开即可。 参考上文，其中xpath有一个css无法实现的功能，即通过子级定位父级甚至祖先级元素，除了轴运算也可直接用“..”代表父级：“//div[@id="su"]/..”代表id为su的div元素的父级元素 从子级定位父级的另一种方法：div[a]代表拥有a标签的div标签元素（css无法实现） css： css代表同级的分隔符为加号+：“div#su+td”代表与id为su的div元素同级的下一个td元素

三、定位方法高级：
1、多个属性定位：
css：
直接多加一个[]即可：“css=div[id=“su”][name=“baidu”]”
xpath见下文
2、模糊匹配以及xpath匹配的逻辑运算：
css：
a[href^=“http://www.so”]
a[href$="gou.com"]a[href\ast ="sogou"]1.表示匹配链接地址开始为http://www.so关键字串的链接元素，以字{符}^{指}明从字符串的开始匹配2.表示匹配链接地址结尾包含gou.com关键字串的链接元素，以字符$指明在字符串的结尾匹配
3.表示匹配链接地址包含sogou关键字串的链接元素，以字符*指明在需要进行模糊查询
xpath：
xpath的模糊匹配功能比css强大很多
模糊匹配函数contains(@class,“xxx”)代表所有class属性中包含xxx的元素：a[contains(@href,“sogou”)]
starts-with(@class,‘xxx’)代表所有class属性中以xxx开头的元素：a[starts-with(@href,“http://www.so”)]
逻辑运算符and、or、not：
“[id=“su” and name=“baidu”]”：相当与通过两个属性定位，定位到同时满足两个条件的元素
“[id=“su” or name=“baidu”]”：定位到id为su或者name为baidu的元素
“[not(id=“su”)]”：定位id不为su的元素
逻辑运算符以及模糊匹配函数可一起使用：“div[not(contains(@name,“sougou”)) and not(id=“su”)]”

3、文本内容定位：
xpath：
text()表示标签内的文本，相当于@属性名（只要能用“@属性名”就能用text()）

4、引申-获取元素属性值（基于robotframework）：
RF中可用get element attribute关键字获取元素属性值，只带一个参数即可：“定位器@属性名”：

${value_tmp}    get element attribute    ${locator}[${i}]/${m}@innerText

上面是获取文本内容，注意文本内容要用innerText，否则获取不到
${object_status} get element attribute xpath=//button[@name=‘confirm’]@disabled
上面为获取disabled属性内容

selenium中，getattribute方法可获取元素属性值