五、元素定位

已于 2023-07-06 12:09:39 修改
阅读量327 收藏
点赞数
分类专栏： # Web自动化测试 文章标签： html 前端 css
于 2022-10-25 15:16:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sally_xy/article/details/127512552
版权

元素定位

1. id

find_element_by_id()
  • 说明：html规定id属性在整个html文件中必须是唯一的，id定位就是通过元素的id属性来定位元素
  • 前提：元素有id属性

id定位实现 步骤分析

  1. 导入selenium包 --> from selenium import webdriver
  2. 导入time包 —> from time import sleep
  3. 实例化火狐浏览器 --> driver=webdriver.Firefox()
  4. 打开注册A.html --> driver.get(url)
    url中\转义：
    1. r修饰：url = r"e:…"
    2. 转义：url = “e:\…\…”
    3. 通过浏览器地址：url = “file:///e:/…/”…
  5. 调用id定位方法 --> driver.find_element_by_id(“”)
  6. 使用send_keys()方法发送数据 --> .send_keys(“admin”)
  7. 暂停3秒 --> sleep(3)
  8. 关闭浏览器 --> quit()

2. name

find_element_by_name()
  • 说明：html规定name属性来指定元素名称，因此它的作用更像人名，name的属性值在当前文档中可以不是唯一的，name定位就是根据元素name属性来定位
  • 前提：元素有name属性

name定位实现 步骤分析

参考id定位

3. class_name

find_element_by_class_name
  • 说明：html规定了class来指定元素的类名，用法和name、id类似
  • 前提：元素有class属性

class_name定位实现 步骤分析

参考id定位

4. tag_name

find_element_by_tag_name
  • 返回符合条件的第一个标签
  • 说明：html本质就是由不同的tag（标签）组成，而每个tag都是指同一类，所以tag定位效率低，一般不建议使用；tag_name定位就是通过标签名来定位

tag_name定位实现 步骤分析

参考id定位

5. link_text

find_element_by_link_text()
  • 需要传入a标签 全部文本
  • 说明：link_text定位与前面4个定位有所不同，它专门用来定位超链接文本（<标签/>）。

link_text定位实现 步骤分析

  1. 参考id定位
  2. 点击 --> click()

6. partial_link_text

find_element_by_partial_link_text()
  • 需要传入a标签局部文本-能表达唯一性
  • 说明：partial_link_text定位是对link_text定位的补充，partial_link_text为模糊匹配，link_text全部匹配

7. Xpath

driver.find_element_by_xpath()

(1) 说明

  • XPath即为XML Path的简称，它是一种用来确定XML文档中某部分位置的语言。
  • HTML可以看作是XML的一种实现，所以selenium用户可以使用这种强大的语言在Web应用中定位元素
  • XML：一种标记语言，用于数据的存储和传递。后缀.xml结尾
  • Xpath为强大的语言，那是因为它有非常灵活定位策略

(2) 定位策略（方式）

1) 路径-定位

a. 绝对路径

从最外层元素到指定元素之间所有经过元素层级路径；如：/html/body/div/p[2]

提示
  1. 绝对路径以/开始，中间不能跳跃元素
  2. 使用Firebug可以快速生成元素XPath绝对路径
    1. 保证在HTML选项，使用快速定位工具定位要生成路径的元素
    2. 选中代码（蓝色）当前行右击鼠标选择复制xpath
b. 相对路径

从第一个符合条件元素开始（一般配合属性来区分）；如：//input[@id=‘userA’]

提示
  1. 相对路径以//开始，后边必须跟标签名称或*
  2. 使用Firebug扩展插件FirePath可快速生成 元素相对路径
    1. 保证在HTML选项，使用快速定位工具定位要生成路径的元素
    2. 选中代码（蓝色）当前行右击鼠标选择复制最简xpath
提示

为了方便练习Xpath，可以在Firebug内安装扩展插件-FireFinder插件

  • 火狐浏览器–>组建管理器–>搜索FireFinder

2) 利用元素属性-定位

快速定位元素，利用元素唯一属性

//*[@id='kw]

3) 层级与属性结合-定位

要找的元素没有属性，但是它的父级有

//a[@id='result_logo']/img

4) 属性与逻辑结合-定位

解决元素之间相同属性同名问题

//input[@name='wd' and @class='s_ipt']

Xpath-延伸

  1. 文本内容是xxx的元素
//*[text()="xxx"]
  1. 属性以xxx开头的元素
//*[starts-with(@attribute,'xxx')]
  1. 属性中含有xxx的元素
//*[contains(@attribute,'Sxxx')]

8. css

driver.find_element_by_css_selector()

(1) 说明

  1. CSS（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式
    • CSS语言书写两个格式：
      1. 写在HTML语言中< style type=‘text/css’>…
      2. 写在单独文件中（后缀 .css）
  2. 而在CSS语言中有CSS选择器（不同的策略选择元素），在Selenium中也可以使用这种选择器
    1. 在Selenium中极力推荐CSS定位，因为它比Xpath定位速度要快
    2. css选择器语法非常强大，在这里我们只学习在测试中常用的几个

(2) CSS定位常用策略（方式）

1) id选择器

说明：根据元素id属性来选择
格式：#id 如：#kw <选择id属性为kw的所有元素>

2) class选择器

说明：根据元素class属性来选择
格式：.class 如：.s_btn<选择class属性值为s_btn的所有元素>

3) 元素选择器

说明：根据元素的标签名选择
格式：element 如：input <选择所以input元素>

4) 属性选择器

说明：根据元素的属性名和值来选择
格式：[attribute=value] 如：[type=‘submit’] <选择所有type属性值为submit的元素>

5) 层级选择器

说明：根据元素的父子关系来选择
格式：element>element 如：span>input <返回所有p元素下所有的input元素>
提示：>可以用空格代替 如：span input 或者 span input[type=‘submit’]

CSS延伸

  1. type属性以s字母开头的元素
input[type^='s']
  1. type属性以t字母结束的元素
input[type$='t']
  1. type属性包含u字母的元素
input[type*='u']

9. find_element[s]_by_XXX()

(1) 作用

  1. 查找定位所有符合条件的元素
  2. 返回的定位元素格式为数组（列表）格式

(2) 说明

列表数据格式的读取需要指定下标（下标从0开始）

(3) 操作

使用tag_name获取第二个元素：

driver.find_elements_by_tag_name("input")[1]

10. 定位（另一种写法）-延伸【了解】

(1) 说明

  • 第二种方法使用By类的封装的方法 ，所以需要导入By类包
  • 通过查看find_element_by_xxx()底层实现方法，发现底层也是调用的By类方法进行的封装
    • 虽然方法一样，但WebDriver推荐 find_element_by_xxx()这种方法

(2) 导包

from selenium.webdriver.common.by import By

(2) By类的方法

find_element(By.ID,"kw")

需要两个参数，第一个参数为定位的类型由By提供，第二个参数为定位的具体方式

driver.find_element(By.CSS_SELECTOR,"#kw").send_keys("Hello")
driver.find_element(By.XPATH,"//*[@id='kw']").send_keys("Hello")
driver.find_element(By.ID,"kw").send_keys("Hello")
driver.find_element(By.NAME,"wd").send_keys("Hello")
driver.find_element(By.CLASS_NAME,"s_btn").send_keys("Hello")
driver.find_element(By.TAG__NAME,"input").send_keys("Hello")
driver.find_element(By.LINK_TEXT,"新闻").send_keys("Hello")
driver.find_element(By.PARTIAL_LINK_TEXT,"新").send_keys("Hello")
Sally_xy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UI自动化元素定位
wx20150418的博客
05-25 981
单元素定位 find_element() 8中元素定位方法： 1、id定位：使用元素的id属性定位 2、name定位：使用元素的name属性定位 3、class定位： 使用元素的class属性定位 class属性值中有空格时，使用全部class属性值定位时，空格必须使用点代替 class属性值有空格时，可以以空格来分隔class属...
元素的定位
CSDN
02-26 205
position: 1、静态定位 static 2、相对定位 relative 3、固定定位 fixed 4、绝对定位 absolute left: 10px （%） 当前定位元素相对于参考物左边界的距离 right: 10px （%） 当前定位元素相对于参考物右边界的距离 top: 10px （%） 当前定位元素相对于参考物上边界的距离 bottom: 10px （%） 当前...
web自动化学习-初识selenium、元素定位对象和定位方法
qingliuun的博客
04-09 382
元素定位的对象 关于html selenium web网页自动化，功能自动化，前端：html + css + js html：页面的内容表达，标签名固定，是定义好的一套统一的标准，一个HTML页面中，有很多元素，元素有三个特征：标签名、属性、文本内容 css：样式风格 js：页面动态处理和用户响应 什么属性所有元素都可以有 style：内联样式，直接在元素上通过style属性来设置样式 ...
八种元素定位id,name,class_name,tag_name,link_text,partial_link_text,xpath,css＜搬代码＞
weixin_52001174的博客
04-13 1057
1.导包 2.2.指定浏览器（实例化浏览器对象） 3.打开i项目（就是网址） 4.找到元素定位 5.操作元素 6.暂停3s 7.关闭4 一案例实施步骤思路分析id要素 #导入selenium From selenium import webdriver From time import sleep #实例化浏览器 Driver=webdriver.Firefox() #打开项目 Driver.get(“http://www.baidu.com”) #找到用户名文本框-定位元素（用户） element=Dri
Selenium基础 — Selenium元素定位（一）
测试-八戒
09-29 2675
元素定位就是查找HTML元素的过程。HTML元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。操作页面元素之前，首先要对元素进行定位，所以定位是自动化脚本编写的开始。通常使用或方法来定位元素。使用给定的方法定位和查找一个元素使用给定的方法定位和查找所有元素，并以列表（list）的形式返回。
CSS的定位（绝对定位 相对定位 固定定位
极客on之路
02-19 888
CSS position 属性 这个属性定义建立元素布局所用的定位机制。 任何元素都可以定位，不过绝对(absolute)或固定(fixed)元素会生成一个块级框，而不论该元素本身是什么类型。 相对(relative)定位元素会相对于它在正常流中的默认位置偏移。 默认值： static 继承性： no 版本： CSS2 JavaScript 语法：
1、元素基本定位
congwang520的博客
05-28 234
介绍通过id，name，classname，text，等定位方法
CSS教程——元素定位
06-09
CSS 元素定位教程 一、什么是 CSS 元素定位？ CSS 元素定位是指在 HTML 文档中对元素的位置进行控制和设置的过程。通过使用 position 属性，可以将元素定位到特定的位置，以实现布局和设计的需求。 二、position ...
CSS学习之五 定位布局
09-25
通过示例代码，我们可以看到，当定位元素的`position`设置为`absolute`时，元素将相对于其最近的非`static`定位的父元素定位。如果父元素没有设置定位，那么元素将相对于`body`或`html`元素定位。而在`relative`定位...
基于Python的Canvas画布元素定位在HolliView项目自动化测试中的应用.rar
09-20
在HolliView项目的自动化测试中，使用Python进行Canvas画布元素定位是一种高效且灵活的方法。Canvas是HTML5中用于在网页上绘制图形的元素，它提供了丰富的API来创建动态、交互式的图形。Python则以其强大的库支持和...
CSS 定位网页元素.pdf
08-11
元素的位置基于最近的已定位祖先元素（拥有非`static`定位的父元素），如果不存在这样的祖先，它会相对于`body`元素定位。同样使用`top`、`bottom`、`left`、`right`属性来确定元素位置。例如： ```css div { ...
网页元素定位技术PPT学习教案.pptx
10-04
网页元素定位技术是网站设计与开发中的核心技能之一，它涉及到如何在网页上精确地布置各种元素，如文本、图片、表单等，以实现美观且功能完整的网页界面。本教程主要涵盖了八个章节，旨在帮助学习者掌握网页设计的...
使用 XPath 定位 HTML 中的 img 标签
Z_suger7的博客
07-18 1195
通过本文的介绍和代码示例，我们可以看到如何在 C# 中使用 XPath 定位 HTML 中的img标签，并实现图片的下载。这种方法不仅高效，而且易于实现，适用于各种需要从网页中提取图片资源的场景。希望本文能够为你的项目提供帮助，并激发你在数据处理和自动化方面的创新思维。
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 920
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
html2canvas + jspdf 纯前端HTML导出PDF的实现与问题
幸运小男神的博客
07-18 962
这几天接到一个需求，富文本编辑器的内容不仅要展示出来，还要实现展示的内容导出pdf文件。一开始导出pdf的功能是由后端来做的，然后发现对于宽度太大的图片，导出的pdf文件里部分图片内容被遮盖了，但在前端是正常显示的，只因为class样式后端无法解析。然后，后端开发人员就嫌麻烦，让前端来实现导出pdf的功能。。。使用 html2canvas + jsPDF 纯前端导出pdf的方式还是有很多问题的，一般情况下都是后端进行文件的导出，前端配合解决样式问题。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 317
网页隐藏版一行小说阅读器
通过HTML/CSS 实现各类进度条的功能。
qq_44552416的博客
07-19 992
需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用。通过本文学习我们会明白如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。
前端学习（二）之HTML
2302_79795489的博客
07-18 945
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
[HTML]一文掌握
最新发布
CSDN20221005的博客
07-21 660
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
网站导航设计：全局导航五元素解析
重点探讨了全局导航的五元素，如站点ID、栏目、标签导航等，并强调了导航设计的一目了然和引导用户行为的重要性。 网站导航是网页制作的关键组成部分，它为用户提供浏览网站的路径，确保用户能够轻松找到所需信息并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值