01为什么要学习定位元素?

1)计算机没有智能到人的程度。     

2)计算机不能像手动测试人员一样通过眼看，手操作鼠标点击，操作键盘输入 

3)计算机通过一系列计数手段找到元素(按钮、输入框、模拟键盘等)

02 元素定位的工具或手段有哪些？

1)css选择器     

2)xpath

03 环境及工具

现在博主演示的安装firefox浏览器的firepath以及firebug两个插件，博主电脑本身已经安装了Firefox68版本的火狐浏览器，现在安装Firefox35版本，这两个版本是可以共存的

• 安装时选择自定义

  

• 安装完成后，进入选项中

  

• 关闭所有的更新

  

• 进入附件组件中

  

• 选择从文件安装附件组件

  

• 接下来则是选择firepath和firebug插件，进行安装即可

  

• 安装完成后，重启浏览器，检查页面元素，则会出现firepath的菜单栏

  

04 css选择器

1.什么是css选择器？     

CSS 中，选择器是一种模式，用于选择需要添加样式的元素。计算机能够通过css选择器定位到相应元素，我们在编写自动化测试脚本的时候很多时候是在不断地找到css选择器。

2.css选择器语法     

• 通过伪类名、id、标签名定位

• 通过元素之前嵌套关系

• 通过属性

• 通过父子关系

• 元素状态

05 xpath

1.什么是xpath？     

XPath即为XML路径语言，它是一种用来（标准通用标记语言的子集）在 HTML\XML 文档中查找信息的语言。     W3School官方文档：

http://www.w3school.com.cn/xpath/index.asp

2.什么是XML?     

XML 指可扩展标记语言（EXtensible Markup Language）     XML 是一种标记语言，很类似 HTML     XML 的设计宗旨是传输数据，而非显示数据

3.XML与HTML

4.节点的概念：每个XML/HTML的标签我们都称之为节点

5.XPath 

使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似

查找某个特定的节点或者包含某个指定的值的节点

选择未知节点

选取若干路径

补充：

//*[text()=“x’x’x”]                            文本内容是xxx的元素     

//*[starts-with(@attribute,’xxx’)]                属性以xxx开头的元素     

//*[contains(@attribute,’xxxxx’)]                属性中含有xxx的元素     

//*[@attribute1=value1 and @attribute2=value2]    同时有两个属性值的元素     

06 xpath实例

（没有固定的写法，只要能找到页面的元素都可以）

• 如在csdn网站首页中，如何通过xpath匹配首页中推荐内容的标题

• 如在糗事百科文字栏中对页面所有文章进行选中，使用xpath中的position方法将文章的div容器进行选中

• 查看匹配到的div个数也就是当前页面所有文章数目，选中第10条文章，选中后该文章所在的div标签属性中会多出高亮属性

• 接下来则是获取该第10条文章的作者名称

• 获取该篇文章下的评论数

• 选择页面元素中的若干元素路径使用|进行分割，通过以下实例获取当前页面meta标签以及link标签的所有路径，实际可用于两个不同网站的登录页面，而不仅是用于一个项目的使用

• 使用starts-with方法来匹配name属性以"rend"开头的标签

• 除了使用starts-with方法之外还可以使用contains来匹配name属性下包含"rend"的标签

07 css实例

• 如在凤凰网中，通过css选择器来找到某个class属性的标签

• 匹配id属性值为root的标签

• 在css选择器中选择页面中所有的meta元素以及link元素，对比xpath是以,进行分割

• 在css选择器选择div元素内部的所有a标签

• 另选择div元素内部的所有a标签（注意跟以上面的区别）

• 选择ul标签之后的所有ul（所以第一个ul并没有选择）

• 选择div标签之后的所有div，跟上面同理第一个div是不会被选中的（说白了就是+之前的为判断条件，之后的才会被选择）

• 匹配id属性值为subNav标签

• 除了id和class以外其他的类似type value类型的都可以进行匹配

• 匹配class属性中包含"clearfix"的所有标签

• 匹配src属性的值以"https://x0"开头的标签

• 匹配src属性的值以".js"结尾的标签

• 匹配src属性的值包含"2019"的标签

• 匹配class属性为layout-2QlrJZv-父元素下的第二个字元素div的标签

• 匹配父元素body倒数第一个也就是最后一个子元素所在的标签

• 通过复制标签唯一选择器，并粘贴到Firepath中，从选择器的匹配规则中可以发现根本不会使用nth-last-child这种方式

• 匹配没有子节点的元素

08 元素定位方法总结

• 在firefox火狐浏览器中可以通过浏览器自带的检查元素进行检查然后复制唯一选择器即可，然后通过firepath进行检验是否正确

• 然后是通过Inspect in Firepath进行获取定位元素，会自动获取其css匹配规则

• 同理在chrome谷歌浏览器中使用自带的功能获取到元素css或者xpath的匹配规则

 

在这里还是要推荐下我自己建的软件测试学习Q群：746506216，群里都是学测试的，如果你想学或者正在学习测试，欢迎你加入，大家都是测试党，不定期分享干货（只有软件测试相关的），包括我自己整理的一份2022最新的Python自动化测试进阶资料和零基础教学，欢迎进阶中和对测试感兴趣的小伙伴加入！