【学习笔记】Selenium 定位方式详解

学习说明

本贴的学习目的为详细了解selenium定位方式的用法与优缺点。

第一部分:单元素定位与多元素定位

单元素定位语法

# 单元素定位语法
element = driver.find_element(By.XX, "value")

单元素定位会直接选择页面中第一个符合条件的元素。

多元素定位语法

# 多元素定位语法
element = driver.find_elements(By.XX, "value")

多元素定位会返回所有匹配到的元素列表(数组)。

我们可以根据列表的下标来定位具体的某个元素:

element = driver.find_elements(By.XX, "value")[index]

或者:

element = driver.find_elements(By.XX, "value")
element = elements[0]

也可以使用for遍历元素列表,来找到符合条件(属性、文本内容等)的元素。

# 定位多个元素
elements = driver.find_elements(By.TAG_NAME, "div")
# 假设我们想要选择包含特定文本的元素
target_text = "my_target_text"
target_element = None

for element in elements:
      if target_text in element.text:
           target_element = element
      break  

第二部分:元素选择定位

1、通过ID定位

# 通过 ID 定位
element = driver.find_element(By.ID, "element_id")

在Html中,#用来标识id。

image.png

Html Tag的id属性值是唯一的,故不存在根据id定位多个元素的情况。HTML Tag的id属性可以省略,不是一定能定位到的,有时候页面元素中随着刷新网页id的值是会变化的,说明是js动态生成的id属性值,这时候用来定位就会产生问题。

注意: id****属性是唯一的,所以多元素定位没有id。

2、通过NAME定位

# 通过 Name 定位单元素
element = driver.find_element(By.NAME, "element_name")

# 通过 Name 定位多元素
elements = driver.find_elements(By.NAME, "element_name")

name不具有唯一性,可以多次出现,用name定位单元素需要保证name值唯一,否则定位失败。

3、通过Class Name定位

# 通过 Class Name 定位单元素
element = driver.find_element(By.CLASS_NAME, "class_name")

# 通过 Class Name 定位多元素
elements = driver.find_elements(By.CLASS_NAME, "class_name")

在HTML中,.用来标识class。

image.png

class是元素的类名,也不具有唯一性。

注意:根据class_name 进行定位的时候,有时候会遇到复合类,也就是class属性中间有空格,空格为间隔符号,表示的是一个元素有多个lass的属性名称,此时元素定位的时候任取一个即可。

4、通过Tag Name定位

# 通过 Tag Name 定位单元素
element = driver.find_element(By.TAG_NAME, "Tag Name")

# 通过 Tag Name 定位多元素
elements = driver.find_elements(By.TAG_NAME, "Tag Name")

tag_name 定位即通过标签名称(Html Tag)定位,不推荐使用此方式去定位,存在极大的不稳定性。

5、通过Link Taxt定位

# 通过 Link Text 定位单元素
element = driver.find_element(By.LINK_TEXT, "Link Text")

# 通过 Link Text 定位多元素
elements = driver.find_elements(By.LINK_TEXT, "Link Text")

Link Taxt 定位即通过超链接文字来定位,只使用在链接位置处,比如a标签。

注意: link_text只能使用精准的匹配,必须根据链接上完整的文本内容去进行定位

6、通过Partial Link Taxt定位

# 通过 Partial Link Text 定位单元素
element = driver.find_element(By.PARTIAL_LINK_TEXT, "Partial Link Text")

# 通过 Partial Link Text 定位多元素
elements = driver.find_elements(By.PARTIAL_LINK_TEXT,"Partial Link Text")

Partial_Link_Text定位是使用超链接的部分文字来定位,同样也只使用在链接位置处,且可以使用精准或模糊匹配,一般用于定位长文本内容。

7、通过CSS Selector定位

# 通过 CSS Selector 定位单元素
element = driver.find_element(By.CSS_SELECTOR, "css_selector")

# 通过 CSS Selector 定位多元素
element = driver.find_element(By.CSS_SELECTOR, "css_selector")

CSS定位是通过元素的CSS属性进行定位,兼容Tag、Class、Id等等定位方式。CSS定位非常灵活,它允许你在不更改定位方式的情况下更改定位策略,也使得脚本更加清晰和易于维护。

标签选择器:

通过HTML元素的标签名进行定位。

# 定位所有的<p>标签
element = driver.find_element(By.CSS_SELECTOR, "P")

类选择器:

通过元素的class属性进行定位。

# 定位Class为"myClass"的元素
element = driver.find_element(By.CSS_SELECTOR, ". myClass")

使用.来标志Class

ID选择器:

通过元素的ID进行定位。

# 定位ID为"myId"的元素
element = driver.find_element(By.CSS_SELECTOR, "#myID")

使用#来标志ID

组合选择器:

可以使用空格、子代选择器(>)、相邻兄弟选择器(+)和一般兄弟选择器(~)等来组合选择器。

# 定位div.container的直接子代<p>元素
element = driver.find_element(By.CSS_SELECTOR, "div.container>p")

属性选择器:

可以根据元素的属性及其值进行定位。

选择具有特定属性的元素:[attr]

选择具有特定属性和值的元素:[attr=value],例如:

# 定位所有href属性值为example.com的a标签:
element = driver.find_element(By.CSS_SELECTOR, " a[href='example.com']")

通配符和伪类选择器:

CSS选择器还支持使用通配符(*)和伪类(如:hover, :first-child等)来增加选择的灵活性。

8、通过Xpath定位

# 通过 XPath 定位单元素
element = driver.find_element(By.XPATH, "xpath")

# 通过 XPath 定位多元素
elements = driver.find_elements(By.XPATH, "xpath")

XPath 表达式用于定位 XML 文档中的节点。在 web 开发中,HTML 可以看作是特殊的 XML,所以 XPath 也可以用来定位 HTML 元素。

Xpath语法:

表达式 描述
nodename 选取此节点的所有子节点
/ 从当前节点选取直接子节点
// 从当前节点选取子孙节点
. 选取当前节点
.. 选取当前节点的父节点
@ 选取属性
* 通配符,选择所有元素节点与元素名
@* 选取所有属性
[@属性] 选取具有给定属性的所有元素
[@属性=‘value’] 选取给定属性具有给定值的所有元素

XPath 定位:

  • 通过标签名定位://tagname,比如 //div 会选择所有的 div 标签。
  • 通过 ID 定位://[@id='someId'],比如 //[@id='myElementId']
  • 通过类名定位://[@class='someClass'] //tagname[@class='someClass']
  • 通过属性定位:如 //a[@href='https://www.baidu.com'] 会选择所有 href 属性值为指定 URL 的 a 标签。
  • 组合定位:可以使用逻辑运算符如 andornot 来组合多个条件。

注意 :

  • XPath大小写敏感,确保你的标签名和属性值的大小写正确。
  • 当页面结构复杂或动态加载内容时,XPath可能需要相应地调整。
  • 使用简单的XPath表达式可以提高性能。避免使用过于复杂的表达式。

Xpath调试:

在浏览器的开发者模式调试界面,ctrl+f调出搜索框,将xpath的定位语句复制到搜索框,会以黄色高亮的方式指出你定位到的是哪个元素:

image.png

第三部分:相对定位器

说明:

方法 作用
above() 定位到现元素上面的元素
below() 定位到现元素下面的元素
toLeftOf() 定位到现元素左面的元素
tpRightOf() 定位到现元素右面的元素
near() 定位到最多距现元素50个像素远的元素

语法:

email_locator = locate_with(By.TAG_NAME,"input").above({By.ID: "password"})

官方文档