乐趣区

关于自动化测试:Web-UI自动化测试之元素定位

jiezi

本文首发于： 行者 AI

目前，在自动化测试的理论利用中，接口自动化测试被宽泛应用，但 UI 自动化测试也并不会被代替。让咱们看看二者的比照：

  • 接口自动化测试是跳过前端界面间接对服务端的测试，执行效率和覆盖率更高，保护老本更低，整体而言投出产出比更高，因而在我的项目上的应用更宽泛。
  • 而 UI 自动化测试则是模仿用户在前端页面中的操作行为进行测试，尽管在执行过程中易收到其余因素的影响（如电脑卡顿，浏览器卡顿，网速等）而导致用例执行失败，且前期保护老本较高，然而 UI 自动化测试更贴近用户应用时的真实情况，也可能发现一些接口自动化无奈发现的 bug。

因而，在理论我的项目的自动化测试中，通常采纳以接口自动化为主、零碎稳固后通过 UI 自动化对重点业务流程进行笼罩的计划。而 UI 自动化的根底，就是元素定位。只有实现了元素定位，才能够操作定位到的元素，模仿手工测试进行一系列的页面交互，比方点击、输出等。

1. 罕用的元素定位形式

对于 web 端的 UI 自动化测试，元素定位通常应用 selenium 提供的以下 8 种定位形式：

  • id：依据 id 定位，是最罕用的定位形式，因为 id 具备唯一性，定位精确快捷。
  • name：通过元素的【name】属性定位，会存在不惟一的状况。
  • class_name：通过 class 属性名称进行定位。
  • tag_name：通过标签名定位，个别不倡议应用。
  • link_text：专用于定位超链接元素（即 a 标签），须要齐全匹配超链接的内容。
  • partial_link_text：同样用于定位超链接元素，但能够含糊匹配超链接的内容。
  • xpath：依据元素门路进行定位，分为绝对路径和相对路径，能够定位到所有指标元素。
  • css_selector：selenium 官网举荐的元素定位形式，比 xpath 效率更高，但须要把握一些 css 根底。

在理论的我的项目中，更举荐应用 xpath 和 css 定位形式，这两种能够定位到页面中的所有元素，应用限度较小。如果对 css 没有理解的话，举荐应用 xpath 的形式，上手更快；如果对 css 有肯定根底的敌人，更举荐应用 css 进行元素定位。

接下来，以百度首页为例，在理论应用中对各种定位形式进行具体介绍。

2. 元素定位的理论利用

以百度首页的搜寻框为例，介绍 id、name、class、tag_name 四种元素定位形式。

2.1 id 定位

通过 id 属性对百度首页的的输入框进行定位。

# 通过 input 标签的 id 属性进行定位
find_element_by_id('su')

2.2 name 定位

通过 name 属性对百度首页的输入框进行定位。

# 通过 input 标签的 name 属性进行定位
find_element_by_name('wd')

2.3 class_name 定位

通过 class 属性对百度首页的输入框进行定位。

# 通过 input 标签的 class 属性进行定位
find_element_by_class_name('s_ipt')

2.4 tag_name 定位

通过标签名称来定位，这种形式很少会应用，因为页面中的同一个标签通常都会反复。

# 通过 input 标签名进行定位
find_element_by_tag_name('input')

接下来，以页面底部的“意见反馈”为例，介绍 linkText 和 partialLinkText 两种定位形式。

2.5 linkText 定位

通过 a 标签的文本信息进行定位，仅用于定位超链接 a 标签。

# 通过 a 标签的文本信息进行定位
find_element_by_link_text('意见反馈')

2.6 partialLinkText 定位

通过对 a 标签的局部文本信息含糊匹配进行定位。

# 通过对 a 标签的局部文本信息含糊匹配进行定位
find_element_by_partial_link_text('反馈')

2.7 xpath 定位

xpath 定位形式是通过页面元素的属性和门路进行元素定位，实践上能够对页面中所有的元素精选定位。上面介绍 xpath 的几种定位形式。

首先，介绍一下 xpath 的门路节点表达式，如图：

（1）xpath 绝对路径定位

仍已百度首页的搜寻框为例进行介绍。

find_element_by_xpath('/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input')

通常状况下，不会抉择应用 xpath 绝对路径进行元素定位，起因有二：一是绝对路径繁琐简短，影响运行速度；二是波及的层级较多，任何一个层级发生变化都会导致定位失败，须要从新进行批改，不利于前期保护。

（2）xpath 相对路径和元素属性联合定位

若指标元素的某个属性具备唯一性，则可间接对指标元素进行定位；否则，须要在指标元素左近寻找一个具备唯一性的元素，而后通过二者的层级关系进行定位。

接下来，仍然以百度首页的页面元素为例，对 xpath 定位的形式举例说明。

# 通过元素属性定位百度首页的搜寻框
find_element_by_xpath("//input[@id='su']")
find_element_by_xpath("//input[@name='wd']")
find_element_by_xpath("//input[@class='s_ipt']")
find_element_by_xpath("//input[@autocomplete='off']")

# 通过文本信息定位 (和 text_link 办法不同，不局限于 a 标签)
find_element_by_xpath("//a[text()=' 意见反馈 ']")
find_element_by_xpath("//span[text()=' 设置 ']")

# 通过父级定位子级元素，举例百度首页搜寻按钮
find_element_by_xpath("//span[@class='bg s_btn_wr']/input")

# 通过子级定位父级元素，举例百度首页百度热榜的换一换
find_element_by_xpath("//span[text()=' 换一换 ']/..")

# 通过 contains 办法含糊匹配定位，举例百度首页搜寻按钮
find_element_by_xpath("//input[contains(@class,'s_btn')]")
find_element_by_xpath("//a[contains(text(),' 反馈 ')]")

（3）浏览器复制 xpath

除了上述两个办法之外，还有一个简略的办法，就是在浏览器的 F12 开发者工具中找到指标元素，鼠标右键进行复制即可，如下图。

但复制的 xpath 门路可能会很简短，还是举荐大家依据需要本人写指标元素的 xpath 门路。

2.8 css_selector 定位

（1）css 定位简介

css_selector 定位（下文简称 css 定位），它的定位形式，利用选择器进行的。在 CSS 中，选择器是一种模式，用于抉择须要增加款式的对象。通过 css 进行元素定位，实践上也是能够定位到页面中的所有元素的。

和 xpath 相比，css 的语法更简洁、定位速度更快，然而 css 的语法比 xpath 较为简单一些，绝对难记。

（2）css 定位实例

上面，仍以百度首页搜寻框为例，对 css 定位形式举例说明。

# 通过 id 定位，id 名前加# 
find_element_by_css_selector("#kw")

# 通过 class 定位，class 名前加. 
find_element_by_css_selector(".s_ipt")

# 通过标签定位
find_element_by_css_selector("input")

# 通过其它属性定位 
find_element_by_css_selector("[name='wd']")

# 标签和属性组合定位 
find_element_by_css_selector("input#kw")
find_element_by_css_selector("input.s_ipt")
find_element_by_css_selector("input[name='wd']")
find_element_by_css_selector("[name='wd'][autocomplete='off']")

# 通过父级定位子级元素 
find_element_by_css_selector("from#form>span[@class='bg s_ipt_wr']>input")

3. 小结

以上，就是 selenium 的各种元素定位办法的简略介绍。我的项目的理论应用中，在定位办法的抉择上，比拟举荐大家采纳“id > name > xpath/css > 其它”的程序进行抉择。

尽管 UI 自动化测试没有接口自动化测试应用宽泛，但也是自动化测试中不可获取的一部分，心愿本文能对学习 UI 自动化的小伙伴产生肯定的帮忙。

退出移动版