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

相关推荐
wrx繁星点点1 小时前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
flashman9114 小时前
python在word中插入图片
python·microsoft·自动化·word
SoraLuna10 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
2401_8576226614 小时前
SpringBoot健身房管理:敏捷与自动化
spring boot·后端·自动化
力姆泰克14 小时前
看电动缸是如何提高农机的自动化水平
大数据·运维·服务器·数据库·人工智能·自动化·1024程序员节
BPM_宏天低代码14 小时前
低代码 BPA:简化业务流程自动化的新趋势
运维·低代码·自动化
IT-民工2111015 小时前
CI/CD 实践总结
运维·ci/cd·自动化
_.Switch18 小时前
Serverless架构与自动化运维
运维·python·缓存·自动化·运维开发
孤蓬&听雨18 小时前
RabbitMQ自动发送消息工具(自动化测试RabbitMQ)
分布式·测试工具·自动化·rabbitmq·自动发送消息
土小帽软件测试19 小时前
jmeter基础01-2_环境准备-Mac系统安装jdk
java·测试工具·jmeter·macos·软件测试学习