UI自动化测试基础-元素定位之前端

前言

• 在实施UI自动化测试时，我们往往会花很多工作在元素定位这个环节，能够准确和灵活的捕捉到页面或端的元素时实施UI自动化测试的重要前提，故接下来我会通过几篇文章来介绍元素定位和调试的一些方式，包括PCWeb，H5，Android，IOS以及PC桌面应用端

• 本文主要简单介绍一下在开展UI自动化测试工作中PCWeb和H5等页面型前端的元素定位的一些方法

前端常用定位

• 在前端测试当中，我们一般用到以下的元素定位方式

  
  定位方法

• 其实从上面的定位方式我们可以分成两类，一类是通过相对固定的属性值，一类就是通过层级路径，通过属性值比较好理解，以id为例子，元素有id这个属性，通过对应的属性值就能得到对应的元素，如百度的输入框

  
  百度输入框

• 属性值定位方式其实不是非常通用，我们在获取页面元素时，往往元素没有id或name等属性，同时如class和linktext这种类型会出现重复多个元素满足条件的情况，这个时候通过层级方式的定位，能够更加灵活且准确的捕获到各种页面元素，下面来将一下如何使用cssselector和xpath两种定位方式以及其调试方法

层级方式的元素定位

• 针对前端的元素定位，基本上主流的浏览器都有提供相应的定位工具，以下以chrome浏览器为例

• 以百度首页为例，如搜索输入框，我们选中后点击鼠标右键，然后点击检查按钮

右键点击检查

• 这时候会打开开发者工具的Elements,会默认选中元素对应的html代码

• 然后继续点击鼠标右键，打开右键菜单后选择Copy选择，在Copy会看到Copy selector和Copy Xpath两项

• 其中Copy selector就是针对CSS的元素定位方式，Copy Xpath则为Xpath定位方式，这两种定位方式是在前端元素定位中最常用的两种，本文也主要说这两种定位方式

CSS定位方式

通过获取class属性来定位

• 将鼠标移动到元素附近，右键点击检查，就可以打开控制台页面元素页

  
  微信开放平台定位.gif

• 通过Copy selector获取到对应的元素路径，再开到Console选项，在Console输入$('获取到的元素路径')，如下图中获取到的css路径为

body > div.head > div.head_box > div > ul > li:nth-child(2)
#则在console输入
$('body > div.head > div.head_box > div > ul > li:nth-child(2)')

微信开放平台定位2.gif

在console输入并正常返回对应元素之后，通过检查确实是否能够定位到元素，点击返回的输出内容即可

css定位兼容id定位方式

• css也兼容拥有id属性的元素定位，如下图

• image

• 定位百度首页的输入框，使用Copy selector获取css值，获取之后输入到Console进行定位检查

• image

• Copy selector得到的值为#kw，所以我们在Console输入$('#kw') , 如果能正常出现返回值，那证明有定位到元素，在展开直接点击对应的信息，能够定位到原来的元素即说明定位搜索输入框成功

• 从获取到的CSS路径为#kw，可见CSS定位方式是兼容Id的定位方式的，即如果元素的id=abc，用CSS的话可以表示为css=#abc

css定位的血缘关系

• css定位的原理就是通过上级class属性关联下级class属性逐层找到元素，上下级class属性就像父子关系一样，当然我们除了通过父子关系，爷孙关系，祖宗关系都是可以找到对应的元素了，有点抽象，举个例子，如上面微信开放平台的css值

父子关系：body > div.head > div.head_box > div > ul > li:nth-child(2)

改成爷孙关系的话，就是不要中间的一些层级，如

爷孙关系：body > div.head > div.head_box li:nth-child(2)

• 对比可以见我们却掉了> div > ul >这一部分，明显的区别是父子关系是通过>号去关系，而爷孙之间就直接通过空格来关联，同样的，我们也尝试定位一下
  

  微信开放平台定位3.gif

• 可见还是能够找到对应元素的，其实这样的好处是，当一个元素藏得很深，复制出来的css路径非常长，但同时会带来只要里面的一个class属性有小变动，整个css路径都会失效，所以这样简化的方式更利于我们日常在自动化测试用例时的维护，当然也不是百利无害，简化的方式就像一种相对的方法，这样会比较容易出现多个相同定位的元素，但这个时候就得提到css定位中的兄弟关系

• 像这种场景就会给我们返回很多相同css定位的元素 如图所示，但我们在自动化测试的时候往往需要准确地定位到某一个元素，显然这样不是我们所期望的

  
  微信元素

• 为了解决这个问题，我们上面的定位最后的一部分li:nth-child(2) ,nth-child选择器其实是找css样式元素兄弟的一种方法，也就是同级查找，输入值n就是匹配父元素中的第 n 个子元素，当有list样式或selecor样式以及多个a标签样式的时候，就是出现多个元素使用的样式是一样的，他们之间就像兄弟一样，有大哥有小老弟，这时就是通过列表的形式帮这几个相同的元素排序，如上图资源中心这个元素其实是头部几个标签的第2个元素

• nth-child选择器方式是正序的匹配，也就是从哥哥到弟弟，当然也可以反过来从弟弟到哥哥，也就是倒序匹配，可以使用nth-last-child选择器方式，如要找到最小的那个弟弟，也就是最后的一个元素，则为nth-last-child(1),如

body > div.head > div.head_box li:nth-last-child(1)

• 微信元素定位2
  

  这样我们就能找到倒数第一的问题反馈这个元素，正序倒序都会有他们的使用场景，相同样式元素间的同级查询匹配就是这种方式，尤其可见css定位的强大之处

Xpath定位方式

• 获取的操作和css差不多，通过检查打开控制台元素页面后使用Copy Xpath获取到对应的元素路径，如资源中心的xpath路径

xpath:/html/body/div[1]/div[2]/div/ul/li[2]

再开到Console选项，在Console输入$x('获取到的元素路径')，如下图中定位资源中心的元素

微信开放平台定位5.gif

• 从xpath路径中可以看到，xpath通过标签的层级，属性和索引来匹配元素，如div[1]这种表达的是第一个div标签，li[2]表达第二个li标签，这种就是索引

• xpath也是能够兼容id属性的方式，除了之外所有的属性值方式都可以兼容，比如id属性的，如下图中的

//*[@id="kw"]

• image
  

  或者是通过class属性定位百度一下按钮,如

//input[@class='btn self-btn bg s_btn']

• 百度定位1.gif

• 同样能正常出现返回值，那证明有定位到元素，在展开直接点击对应的信息，能够定位到对应元素

Xpath定位高级玩法

• 除了上述常用的方式以外，xpath还有更高级的定位玩法，比如

属性的逻辑运算

• 为了更加精准的定位，可以使用多个属性值，如百度的搜索输入框，通过且逻辑进行定位：

//input[@class='s_ipt' and @name='wd']

image.png

使用或逻辑

//input[@class='s_ipt' or @name='wd']

• image.png

属性的模糊匹配

• 模糊匹配可以使用contains和starts-with这两种选择器

使用contains：//input[contains(@class,'s_i')] #匹配所有具备class属性以及class包含"s_i"的元素

• image.png

使用starts-with：//input[starts-with(@class,'s')]#匹配所有具备class属性以及class值以"s"开头的元素

image.png

• xpath定位的方法还有很多,总结来说xpath就是通过层级+属性+索引的方式来定位到元素，虽然xpath定位的方法有很多，但带来的问题是变量也会变多，当我们的页面发生改变的时候，xpath的变动往往是最大的，稳定性相对css来说没那么好，但会比xpath更加多样化

代码示例

• 以python+selenium为例，在代码中的编写如下：

• 同理其他的按属性定位方式基本上都是把属性值填入到自动化用例里面的方法参数值就好，以selenium+python为例

#属性值定位方法
driver.find_element_by_id("testid") #id定位
driver.find_element_by_name("testname") #name定位
driver.find_element_by_class_name("soutu-btn") #class定位
driver.find_element_by_tag_name("input") #tag定位
driver.find_element_by_link_text("点我跳转")#link定位
driver.find_element_by_partial_link_text("忘记") #partial link定位

#层级定位方法
driver.find_element_by_xpath("//input[contains(@class,'s_i')]")#xpath定位
driver.find_element_by_css_selector("body > div.head > div.head_box li:nth-child(2)")

小结

• 元素定位是UI自动化测试的核心前提和基础，没有好的定位就写不出好的自动化测试用例，故通过本文，希望对大家在实施UI自动化测试元素定位的过程中提供到帮助，后面我会继续分享关于android和iOS等端的一些元素定位方式，请继续关注，谢谢