selenium元素定位与操作

说明:本篇博客基于selenium 4.1.0

在selenium中,想要对元素进行操作,一般需要如下步骤:

  1. 在浏览器中查看元素属性,便于selenium在页面中找到该元素
  2. 在代码中创建元素对象
  3. 元素操作、获取元素信息

查看元素属性

浏览器中进入开发者模式

方法1:右键-检查

方法2:设置-更多工具-开发者模式

方法3:默认快捷键F12

出现该页面则进入了浏览器开发者模式,可查看网页结构

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tf6swSQl-1664184420106)(upload://iauRLUk4DgFfFyKYQHzLuy4pyqj.png)

找到目标元素的代码

方法1:在目标元素上右键-检查

方法2:使用选择器,选择到目标元素

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MAFAmNCC-1664184420107)(upload://5naek7Xdni92ioieAsbMwiy9Vzm.png)

创建元素对象

selenium一共提供了八种定位方式,通过这些定位方式即可创建元素对象。分别为:

复制代码
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">from selenium <span style="color:#cc99cd">import</span> webdriver
from selenium<span style="color:#cccccc">.</span>webdriver<span style="color:#cccccc">.</span>common<span style="color:#cccccc">.</span>by <span style="color:#cc99cd">import</span> By

driver <span style="color:#67cdcc">=</span> webdriver<span style="color:#cccccc">.</span><span style="color:#f08d49">Chrome</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>
element_id <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">ID</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'id属性值'</span><span style="color:#cccccc">)</span>                              # id定位
element_name <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">NAME</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'name属性值'</span><span style="color:#cccccc">)</span>                        # name定位
element_class <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">CLASS_NAME</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'class属性值'</span><span style="color:#cccccc">)</span>                # <span style="color:#cc99cd">class</span>定位
element_tag <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">TAG_NAME</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'html标签名称'</span><span style="color:#cccccc">)</span>                   # tag定位
element_linktext <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">LINK_TEXT</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'文本信息'</span><span style="color:#cccccc">)</span>                 # 文本定位:仅可用于<span style="color:#67cdcc"><</span>a<span style="color:#67cdcc">></span>标签
element_partiallinktext <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">PARTIAL_LINK_TEXT</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'文本信息'</span><span style="color:#cccccc">)</span>  # 文本模糊定位:仅可用于<span style="color:#67cdcc"><</span>a<span style="color:#67cdcc">></span>标签
element_css <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">CSS_SELECTOR</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'css表达式'</span><span style="color:#cccccc">)</span>                  # css定位
element_xpath <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">XPATH</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'xpath表达式'</span><span style="color:#cccccc">)</span>                     # xpath定位
</code></span></span>

元素操作

备注:element代指元素对象

复制代码
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element<span style="color:#cccccc">.</span><span style="color:#f08d49">click</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>                         # 点击
element<span style="color:#cccccc">.</span><span style="color:#f08d49">send_keys</span><span style="color:#cccccc">(</span><span style="color:#7ec699">"helloworld"</span><span style="color:#cccccc">)</span>         # 输入
element<span style="color:#cccccc">.</span><span style="color:#f08d49">clear</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>                         # 清空
element<span style="color:#cccccc">.</span><span style="color:#f08d49">submit</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>                        # 提交表单
</code></span></span>

查找元素子节点

以当前element为父节点,查找该元素中的子节点。子节点同样支持selenium的八种定位方式

以百度的"百度一下"为例,我们可以先找到其父节点再找到"百度一下":

复制代码
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element <span style="color:#67cdcc">=</span> driver<span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">CSS_SELECTOR</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">".s_btn_wr"</span><span style="color:#cccccc">)</span><span style="color:#cccccc">.</span><span style="color:#f08d49">find_element</span><span style="color:#cccccc">(</span>By<span style="color:#cccccc">.</span><span style="color:#f8c555">TAG_NAME</span><span style="color:#cccccc">,</span> <span style="color:#7ec699">'input'</span><span style="color:#cccccc">)</span>
</code></span></span>

获取属性

复制代码
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element<span style="color:#cccccc">.</span>tag_name                 # 获取标签名称
element<span style="color:#cccccc">.</span>text                     # 获取文本
element<span style="color:#cccccc">.</span><span style="color:#f08d49">get_attribute</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'class'</span><span style="color:#cccccc">)</span>   # 获取属性
element<span style="color:#cccccc">.</span>id                       # 获取selenium内部元素编号
element<span style="color:#cccccc">.</span>size                     # 获取大小,返回值:<span style="color:#cccccc">{</span><span style="color:#7ec699">"height"</span><span style="color:#67cdcc">:</span> xx<span style="color:#cccccc">,</span><span style="color:#7ec699">"width"</span><span style="color:#67cdcc">:</span> xx<span style="color:#cccccc">}</span>
element<span style="color:#cccccc">.</span>location                 # 获取坐标,返回值:<span style="color:#cccccc">{</span><span style="color:#7ec699">"x"</span><span style="color:#67cdcc">:</span> xx<span style="color:#cccccc">)</span><span style="color:#cccccc">,</span><span style="color:#7ec699">"y"</span><span style="color:#67cdcc">:</span> xx<span style="color:#cccccc">}</span>
</code></span></span>

元素状态

返回值:布尔值

复制代码
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element<span style="color:#cccccc">.</span><span style="color:#f08d49">is_selected</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>            # 元素是否被选中
element<span style="color:#cccccc">.</span><span style="color:#f08d49">is_enabled</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>             # 元素是否可操作
element<span style="color:#cccccc">.</span><span style="color:#f08d49">is_displayed</span><span style="color:#cccccc">(</span><span style="color:#cccccc">)</span>           # 元素是否可见
</code></span></span>

备注:元素是否可见,指元素是否出现在网页中,无论元素在不在浏览器的可视窗口内

截图

复制代码
<span style="background-color:#2d2d2d"><span style="color:#cccccc"><code class="language-javascript">element<span style="color:#cccccc">.</span><span style="color:#f08d49">screenshot</span><span style="color:#cccccc">(</span><span style="color:#7ec699">'study_selenium/resource/element_shot.png'</span><span style="color:#cccccc">)</span>  # 截屏并保存到文件中
photo <span style="color:#67cdcc">=</span> element<span style="color:#cccccc">.</span>screenshot_as_png                               # 截屏,已二进制保存在photo变量中</code></span></span>

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

相关推荐
郝学胜-神的一滴1 小时前
Python 高级编程 026:内置数据结构之骈文纵论
开发语言·数据结构·python·程序人生·软件工程
DLYSB_7 小时前
存储运维实战:基于 Ceph Event 监听与 Python 适配器的分布式存储健康度物理声光响应架构
运维·ceph·python·报警灯
阿童木写作8 小时前
跨境图片翻译工具多合一,批量图片视频字幕翻译加智能抠图
人工智能·python·音视频·语音识别
阿童木写作9 小时前
Python实现Temu图片批量翻译自动化教程
运维·人工智能·python·自动化
就是一只白10 小时前
复制地理信息python版本
python
看浪的路人11 小时前
第1讲:Agent 到底是什么?和 Chatbot 有什么区别
python·ai
瓦学妹11 小时前
什么是网络索引?它是如何工作的?
大数据·网络·python·网络爬虫
天天爱吃肉821812 小时前
商用车多体动力学实战笔记|第6篇:动力传动系统(发动机、变速箱、分动器、TCS、LSD限滑差速)
大数据·人工智能·笔记·python·嵌入式硬件·汽车
海盗123412 小时前
微软技术周报 ——2026-08-03
后端·python·microsoft·c#·.netcore
大数据魔法师12 小时前
【最全详解】DuckDB Python 全套 API 语法、参数与实战用法(零基础全覆盖)
python·数据分析