【selenium】八大元素定位方式|xpath css id name...

目录

一、基础元素定位

二、cssSelector元素定位------通过元素属性定位

三、xpath元素定位------通过路径

[1 、xpath绝对定位 (用的不多)](#1 、xpath绝对定位 (用的不多))

缺点:一旦页面结构发生变化(比如重新设计时,路径少两节),该路径也随之失效,必须重新写

[2、 xpath相对定位](#2、 xpath相对定位)

[2.1 路径解释:](#2.1 路径解释:)

[2.2 定位方式:](#2.2 定位方式:)

contains(@属性,'值')方法,定位某个属性包含值

[text()方法 ,不是属性,所以不用@,获取任意标签的文本内容,可以和contains一起使用](#text()方法 ,不是属性,所以不用@,获取任意标签的文本内容,可以和contains一起使用)

[2.3 xpath轴定位](#2.3 xpath轴定位)

四、关于xpath和css定位区别

五、其他:

如果定位不出来,可以直接右键复制copyxpath

有时候同一个系统不同的账号进去,元素的排版顺序也会不一样


一、基础元素定位

1、id根据元素的id属性来定位元素 前端规范的话id是唯一的,但是如果不唯一,html也不会报错

2、name 根据元素的name属性来定位元素 name在html中不是唯一的

3、tagName 根据元素的标签名来定位元素

4、className 根据元素的class属性来定位元素

5、linkText 根据超链接的完整文本值来定位元素 一般是a标签

6、partialLinkText 根据超链接的部分文本值来定位元素 模糊

二、cssSelector元素定位------通过元素属性定位

优势是可以复合使用 适用于复杂的场景

  • 根据tagName------By.cssSelector("tagName")

  • 根据ID------By.cssSelector("#id值")/("标签名#id")

  • 根据className(样式名),.class形式 前端定位时比较常见

    • 比如:class="admin_login_btn denglu"

      By.cssSelector(".admin_login_btn.denglu")

  • 根据元素属性,属性名=属性值css 多个属性,用多个[]连接

    • 单属性 By.cssSelector("标签名[属性名='属性值']");

    • 多属性 By.cssSelector标签名[属性1='属性值'][属性2='属性值');

三、xpath元素定位------通过路径

xpath其实就是一个path(路径),一个描述页面元素位置信息的路径,相当于元素的坐标

xpath基于XML文档树状结构,是XML路径语言,用来查询xml文档中的节点

既可以用于XML,也可以用于HTML

1 、xpath绝对定位 (用的不多)

从根开始找---(根目录) 从最开始的元素(html)找当前元素的路径

绝对路径以单/号表示,而且是让解析引擎从文档的根节点开始解析,也就是html这个节点下开始解析

缺点:一旦页面结构发生变化(比如重新设计时,路径少两节),该路径也随之失效,必须重新写

2、 xpath相对定位

相对路径则以//表示,表示让xpath引擎从文档的任意符合的元素节点开始进行解析

相对定位优点:灵活,方便,耦合性低

举例:某界面html

html 复制代码
<input type="text" placeholder="账号" name="admin_name" value="">

用以下两种方式均可以定位:

  • //*[@name='admin_name']
  • //input[@name='admin_name']

2.1 路径解释:

  • // 匹配指定节点,不考虑它们位置(/则表示绝对路径,从根下开始)

  • * 通配符,匹配任意元素标签名。

  • @选取属性

  • [] 属性判断条件表达式

2.2 定位方式:

1、通过元素名定位

2、通过元素名+索引定位

java 复制代码
form/div[1]/input 获取手机号输入框

3、使用元素名+属性

java 复制代码
*[@name='phone'] 获取手机号输入框

4、使用元素(html元素-->标签)名+包含部分属性值

contains(@属性,'值')方法,定位某个属性包含值

**5、**使用 元素名+元素的文本内容

text()方法 ,不是属性,所以不用@,获取任意标签的文本内容,可以和contains一起使用
java 复制代码
*[text()='免费注册'] 获取免费注册超链接,注意空格 
a[contains(text(),'登录')]

6、多属性 直接用[]拼接或者用and or

java 复制代码
input[@id='kw' and @name='wd']
input[@id='kw'][@name='wd']

2.3 xpath轴定位

当某个元素的各个属性及其组合都不足以定位时,那么可以利用其兄弟节点或者父节点等各种可以定位的元素进行定位。

⚠️哥哥/第几个哥哥/弟弟/第几个弟弟都是针对当前定位元素而言的,可见下图

轴名称 释义
ancestor 选取当前节点的所有祖先节点(包括父节点) --找所有的祖先
parent 选取当前节点的父节点 -- 找爸爸
preceding 选取当前节点之前的所有节点
preceding-sibling 选取当前节点之前的所有兄弟节点 --找哥哥
following 选取当前节点之后的所有节点
following-sibling 选取当前节点之后的所有兄弟节点 --找弟弟

使用语法:

/轴名称::节点名称[@属性=值]

使用举例:

四、关于xpath和css定位区别

Xpath:// + */元素标签名 + [@属性1='属性值'] [@属性2='属性值'] 或者用and连接

CSS:标签名[属性1='属性值'] [属性2='属性值']

java 复制代码
<a class="ft__nowrap domains__first" href="http://testingpai.com/domain/testing" xpath="1">

【xpath】//a[@class='ft__nowrap domains__first'][@xpath='1']        
  或者://*[@class='ft__nowrap domains__first'][@xpath='1']   

【CSS】a[class='ft__nowrap domains__first'][xpath='1']    

五、其他:

如果定位不出来,可以直接右键复制copyxpath
有时候同一个系统不同的账号进去,元素的排版顺序也会不一样
相关推荐
会一点设计2 小时前
金牌年度汇报PPT的逻辑框架与模板范例!2026全新整理
ui·powerpoint·ux·ppt
●VON6 小时前
从系统亮度监听到 UI 重绘:Flutter for OpenHarmony TodoList 深色模式的端到端响应式实现
学习·flutter·ui·openharmony·布局·von
ヤ鬧鬧o.6 小时前
多彩背景切换演示
前端·css·html·html5
weixin_462446237 小时前
一键安装 MySQL 5.7(CentOS 7)自动化脚本详解
mysql·centos·自动化
keep the9 小时前
Windows启动IOS17/18的WDA
windows·ios·自动化
这儿有一堆花9 小时前
CSS 拟真光影设计:从扁平到深度的技术复盘
前端·css
_OP_CHEN9 小时前
【前端开发之CSS】(三)CSS 常用元素属性宝典(上):从字体到文本,手把手教你打造高颜值网页!
前端·css·html·网页开发·文本属性·字体属性·页面美化
XPii10 小时前
Photoshop应用——将图片变为素描效果
ui·photoshop
tritone10 小时前
学习Chef自动化配置管理工具,为了实践环境部署,我选择了**阿贝云**的**免费虚拟主机**和**免费云服务器**来搭建测试平台。
服务器·学习·自动化
雨季66611 小时前
构建 OpenHarmony 文本高亮关键词标记器:用纯字符串操作实现智能标注
开发语言·javascript·flutter·ui·ecmascript·dart