Selenium DOM元素定位方法详解:by_id、by_name、by_class_name等技巧

Selenium 提供了多种定位 DOM 元素的方法,这些方法各自具有特点和优势。在此,我大致列出了它们的作用。而 webdriver 是通过定位这些 DOM 元素,从而找到我们想要控制的位置的。

Selenium DOM元素定位方法详解:by_id、by_name、by_class_name等技巧

通过 id 来查找单个元素。
通过 name 来查找单个元素。
通过 xpath 来查找单个元素。
通过链接来查找单个元素。
通过部分链接来查找单个元素。
通过标签名称来查找单个元素。
通过类名来查找单个元素。
通过 css 选择器来查找单个元素
通过 name 来查找多个元素
通过 xpath 来查找多个元素。
通过链接来查找多个元素。
通过部分链接来查找多个元素。
使用标签名称来查找多个元素。
通过类名来查找多个元素。
通过 css 选择器来查找多个元素

在上面这几种方法里,by_id()和 by_name()使用起来较为容易。然而,在我们的网页中,这两个元素的使用频率并不高。所以,通常具有这些属性的都能够直接运用这两个方法来进行定位。DOM 元素中较多使用 class 类来进行定义。这样我们就可以使用 by_class_name()。然而,class 存在一个缺点,即一个类中会有多个属性值,而且在多个位置都存在,所以很难准确地定位到特定的位置。by_link_text()与 by_partial_link_text()在定位链接元素时使用较多。当要查找带链接的标签时,可先考虑这两种方法。by_tag_name()用于定位标签元素,此方法较难准确定位到对应位置,因为标签属性在 DOM 中易重复使用。by_css_selector()方法比较好用,我比较喜欢用它,但要注意元素层级较深时需从前面开始定位,否则会报错。

今天我们主要运用 by_xpath() 这个方法去定位元素。这个方法较为灵活且方便,其大部分属性都能够借助它来进行定位。当然,正因为它太灵活了,所以也不太容易被掌握。我们自己写的平台,其前端是用 vue 框架来编写的。大部分内容是以组件形式存在的。在登录页有一个公司选择的部分,它并非通过 selec 元素来进行定义,而是直接从列表中进行循环获取。

从代码中能够看出,这些内容处于同一个 ul 里的 li 中,其 class 类名相同,标签也相同,span 中不存在任何属性,唯一的差异在于 span 中的值不同。在这种情况下,by_name()、by_id()、by_class_name()、by_tag_name()、by_link_text()、by_partial_link_text()、by_css_selector()都无法定位到相应的元素,而 by_xpath()的强大之处便体现出来了。

  • 1公司
  • 2公司
  • 3公司
  • 4公司
  • 5公司
  • 6公司
  • 7公司

by_xpath 的好处在于能够逐层进行定位,从而找到我们所期望的元素。其中,“/”代表根目录,每一层都通过“/”来区分。这样可以直接找到我们的元素,例如“/html/body/div/ul/li/span”等等。当然,它的缺点也很明显,那就是层级如果过深,对应的路径就会变得非常长。下图展示了我们首页的层级关系,由于首页内容不多却已经如此之长。

所以一般在这儿我们不采用绝对定位去查找属性,而是运用相对定位,通过//来进行区分,意味着从当前节点开始去寻觅所有的后代元素。当相同元素较多时,我们可以给当前元素添加属性以缩小定位范围,具体做法是在元素之后加上【@+元素内容】。在此处,我为了能精准定位,在 li 后面添加了 class 属性,如此便指定到了当前的列表当中。接着再依据 span 的值来判别我们要获取的是哪一个公司。

driver 找到通过 XPath 定位的元素,该元素的类名为“el-select-dropdown__item”,其内部的 span 元素的文本内容为“超級公司”,然后点击该元素。

我们可以使用一些通用属性来快速定位元素,除了定位到属性之外。对于某元素下的所有元素,可以用/*表示。当有多个元素时,在元素后面加[id]可指定位到第几个元素。我这个还可以直接定位第几个 span,但因为这里面的数据不固定,所以定位下标并不能准确找到想要的元素。

//模拟登录
使用 selenium 库中的 webdriver 模块。
from time import sleep
创建了一个名为 option 的对象,该对象是 webdriver.ChromeOptions() 的实例。
option 为添加参数,参数内容为 --user-data-dir=C:\Users\ST-C18110032L\AppData\Local\Google\Chrome\User Data
我们使用 Chrome 浏览器驱动,通过创建一个 ChromeOptions 对象并将其作为参数传递给 webdriver.Chrome 函数来初始化驱动程序,最终得到 driver 变量,即 driver = webdriver.Chrome(chrome_options=option)。
driver 获取到了 "http://localhost:8080/#/login" 这个地址
然后该元素发送键值 'M0001' 。
然后向该元素发送 '123456' 这个密码
然后点击该元素
sleep(2)
driver.find_element_by_xpath("//li[@class='el-select-dropdown__item']/span[text()=\"超級公司\"]").click()
该元素被点击。

以下是selenium的其他操作方法,参考博客:

//属性值获取
size 获取元素的尺寸
text 获取元素的文本
get_attribute(name) 获取属性值
要获取元素坐标,首先需要找到要获取的元素,然后调用相应的方法。
page_source 返回页面源码
driver.title 返回页面标题
current_url 获取当前页面的URL
is_displayed() 设置该元素是否可见
is_enabled() 判断元素是否被使用
is_selected() 判断元素是否被选中
tag_name 返回元素的tagName
//元素操作   
clear 清除元素的内容
send_keys 模拟按键输入
click 点击元素
submit 提交表单
//鼠标操作
右击鼠标点击元素 elem ,进行另存为等行为。
双击鼠标点击元素 elem 时,地图 web 能够实现放大功能。
拖动鼠标,将源元素按下左键并移动至目标元素处,然后释放鼠标
将鼠标移动到一个元素上,即 move_to_element(elem)
按下鼠标左键在一个元素上,即 click_and_hold(elem)
通过调用 perform() 函数来执行 ActionChains 中存储的行为。
//键盘操作
send_keys(Keys.ENTER) 按下回车键
send_keys(Keys.TAB) 按下Tab制表键
按下空格键,使用 send_keys(Keys.SPACE) 进行操作。
按下回退键 Esc ,即执行 send_keys(Kyes.ESCAPE) 操作。
按下删除键 BackSpace ,通过 send_keys(Keys.BACK_SPACE) 来实现
按下 shift 键,通过 send_keys(Keys.SHIFT) 实现
按下 Ctrl 键,通过 send_keys(Keys.CONTROL) 来实现。
按下鼠标光标向下按键,执行 send_keys(Keys.ARROW_DOWN) 操作。
使用 send_keys 方法结合 Keys.CONTROL 和 'a' 这两个键,实现全选操作,即 Ctrl+A 组合键的功能。
使用 send_keys 方法并传入 Keys.CONTROL 和 'c' 这一组合键,其作用是进行复制操作,即 Ctrl+C
使用 send_keys 方法输入 Keys.CONTROL 和 'x' 这组组合键,其作用是进行剪切操作,即 Ctrl+X 。
使用 send_keys 函数并传入 Keys.CONTROL 和 'v' 这一组合键,用于实现粘贴操作,也就是 Ctrl+V 的功能。

百度经验中提到了 python 实战 006 这部分内容,其中包含了 find_element_by_xpath 用于定位元素的相关操作。

你可能想看:
« 上一篇
下一篇 »

相关推荐

python爬虫教程PDF,Python爬虫书PDF

2026年09月02日

32阅读

外国教程python,python编程教学视频

2026年09月02日

27阅读

python简明教程沈洁元,python详细基础教程

2026年09月02日

21阅读

python库包教程,python 包

2026年09月02日

27阅读

python教程大全集,python教程600集

2026年09月02日

27阅读

python入门教程完整版,python零基础入门全套教程视频

2026年09月02日

23阅读