F12抓包10：UI自动化 - Elements（元素）定位页面元素
课程大纲
1、前端基础
1.1 元素
元素是构成HTML文档的基本组成部分之一，定义了文档的结构和内容，比如段落、标题、链接等。
元素大致分为3种：基本结构、自闭合元素（self-closing element）、嵌套元素。
1、基本结构：由一个开始标签（start tag）、可能的内容（如文本或其他元素）和一个结束标签（end tag）组成。
举例：
<p>土小帽软件测试学习(从入门到高级)</p>2、自闭合元素：只有开始标签，以 / 符号自闭合（“/”可省略）。
举例：
<image src=”tuxiaomao.jpg” alt=”土小帽的图片说明”>3、嵌套元素：元素嵌套在其他元素之中，形成层次结构。
举例：
<form id="form" name="f" action="/s" ><input type="text" id=”name” name="username" ><input type="password" name="pwd" ></form>
1.2 元素的id、name、class区别
id、name、class均为标签属性，一个元素可以同时具有id、name、class。
三者区别的类比：
① id → 身份证号，唯一；
② name → 姓名，不唯一，会作为http请求的变量名；
举例：
# 一组单选框<input type="radio" name='sex'/>男<input type="radio" name='sex'/>女
③ class → 类名，不唯一，控制样式。
举例：
人可以按照地区、男女分类，同一个人可以同时是北京类、 朝阳类、汉族类……
参考文章：
1.《HTML中元素和标签有什么区别？》
https://blog.csdn.net/black_cat7/article/details/140924688
2.《Html中class,id,name的区别》
https://www.cnblogs.com/iamspecialone/p/11171881.html
2、selenium元素定位
seleniumUI自动化测试中，定位元素主要有以下八种方法，最后两种比较重要：
| 定位方式 | Selenium（python）定位函数 |
| html标签名定位 | find_element_by_tag_name() |
| （标签属性）id定位 | find_element_by_id() |
| （标签属性）name定位 | find_element_by_name() |
| （标签属性）class定位 | find_element_by_class_name() |
| （a标签）完整文字定位 | find_element_by_link_text() |
| （a标签）部分文字定位(确保唯一) | find_element_by_partial_link_text() |
| xpath定位 | find_element_by_xpath() |
| css定位 | find_element_by_css_selector() |
2.1 css选择器定位
填写在函数“find_element_by_css_selector()”中。
| 定位方式 | 选择器 | 举例 |
| 选择所有元素 | * | |
| 标签名定位 | tag | “a”：选择页面中所有a元素 |
| 父子关系定位 | tag1 > tag2 | “form > input”：选择form标签包围的所有input元素 |
| 同级标签定位 (兄弟关系) | tag1 + tag2 | “div+ p”：选择同一级中紧挨div标签的所有p元素 |
| id定位 | #id | “#name”：选择id为name的元素 |
| 类名定位 | .class | “.s_ipt”：选择class为s_ipt的元素 |
| 指定属性定位 | [attrbute=value] | type=”password”：选择type属性值为password的元素 |
2.2 xpath定位
填写在函数“find_element_by_xpath()”中。
一种XML文档定位元素的语言。HTML可以看做XML的一种实现，也可以用这种定位方式。
4种定位方式：
-
绝对路径定位（层级定位）
-
元素属性定位
-
层级+属性
-
元素属性+逻辑运算符。
① 绝对路径定位（层级定位）
使用“/”分隔标签层级，一级一级直到定位目标元素，同级有多个相同标签，标签后加中括号“[]”标注选择同级的第几个标签。
举例：
xpath定位百度输入框——层级定位
find_element_by_xpath(“/html/body/div[3]/div[1]/div/div[1]/div/form/span[1]/input”)② 元素属性定位
公式：
//标签名[@属性名=’属性值’]
标签名可以改为“*”，意为不指定标签名。属性任选，如：id、name、type、src……
举例：
xpath定位百度输入框——属性定位
find_element_by_xpath(“//*[@id=’kw’]”)③ 层级+属性
有些元素仅使用属性无法明确定位，可以结合层级辅助定位。
举例：
xpath定位百度搜索结果的某一项，需要层级+属性。
find_element_by_xpath(“//*[@id=’3’]/div/div[1]/h3/a”)④ 元素属性+逻辑运算符
有些元素需要使用多个属性来定位，可以用逻辑运算符 and 或 or连接属性键值对。
举例：
xpath定位百度输入框——多个属性定位。
find_element_by_xpath(“//*[@id=’kw’ and @name=’wd’ and @class=’s_ipt’]”)3、F12获取元素定位
① 浏览器F12打开检查工具（开发者工具）；
② 选定html元素（标签），鼠标悬停在标签上，右键弹出菜单，选择“复制”；
③ 选择子菜单需要的选择器（如图）。
举例：
如图复制百度搜索输入框元素定位。
1. 复制selector（css定位器）：
#kw2. 复制xpath：
//*[@id="kw"]3. 复制完整xpath：
/html/body/div[3]/div[1]/div/div[1]/div/form/span[1]/input