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自动化测试中,定位元素主要有以下八种方法,最后两种比较重要:

|-------------------|-------------------------------------|
| 定位方式 | S elenium(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")

元素属性+逻辑运算符

有些元素需要使用多个属性来定位,可以用逻辑运算符 andor连接属性键值对。

举例:

xpath定位百度输入框------多个属性定位。

find_element_by_xpath("//*[@id='kw' and @name='wd' and @class='s_ipt']")

3、F12获取元素定位

① 浏览器F12打开检查工具(开发者工具);

② 选定html元素(标签),鼠标悬停在标签上,右键弹出菜单,选择"复制";

③ 选择子菜单需要的选择器(如图)。

举例:

如图复制百度搜索输入框元素定位。

  1. 复制selector(css定位器):

    #kw

  2. 复制xpath:

    //*[@id="kw"]

  3. 复制完整xpath:

    /html/body/div[3]/div[1]/div/div[1]/div/form/span[1]/input

相关推荐
芋芋qwq6 小时前
Unity UI射线检测 道具拖拽
ui·unity·游戏引擎
鸿蒙自习室7 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
大霞上仙10 小时前
element ui table 每行不同状态
vue.js·ui·elementui
坐公交也用券12 小时前
使用Python3实现Gitee码云自动化发布
运维·gitee·自动化
施努卡机器视觉14 小时前
电解车间铜业机器人剥片技术是现代铜冶炼过程中自动化和智能化的重要体现
运维·机器人·自动化
徐浪老师14 小时前
深入实践 Shell 脚本编程:高效自动化操作指南
运维·chrome·自动化
King's King14 小时前
自动化立体仓库:详解
运维·自动化
东隆科技14 小时前
晶圆测试中自动化上下料的重要性与应用
运维·自动化
懒笑翻18 小时前
Python 使用 Selenuim进行自动化点击入门,谷歌驱动,以百度为例
运维·selenium·自动化
n***859418 小时前
Github 开源 10K Stars 自动化 API、后台作业、工作流和 UI 的开发平台
运维·自动化