Selenium八大元素定位方式

1.前言

在使用selenium实现自动化的时候，很长一部分时间都是在定位元素。因此定位元素位置在selenium中及其重要。本文主要讲解selenium的八大元素定位方式

2.根据id定位

在使用 Selenium 进行网页自动化测试时，根据元素的id属性进行定位是一种非常常见且高效的方式。
但不是所有的页面元素都有id属性，属于是可遇而不可求。接下来我们用id定位实现对百度一下里的输入框输入内容。
打开https://www.baidu.com/,然后按F12打开开发者模式。点击左上角的小箭头，然后点击想要定位元素的位置，会自动跳转到元素的源码部分。可以看到元素的一些属性。

百度的这个输入框就是有id属性的，因此我们可以使用id进行定位

一般来说前端元素的id是唯一的，所以使用id能够很好的对元素进行定位。以防万一，我们可以在console中使用document函数来查找一下 ，能看到结果就只有一个

import time

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By

# 填写chromedriver的目录
service = Service('/usr/local/bin/chromedriver')
driver = webdriver.Chrome(service=service)
driver.get("https://www.baidu.com/")

element = driver.find_element(By.ID,'kw')
element.send_keys('测试')
time.sleep(5)
driver.quit()

运行结果可以看到正确定位到了输入框并且输入了‘测试’

3.根据class_name定位

在 Selenium 中，根据元素的class_name（类名）进行定位也是常用的元素定位方式之一。
首先还是打开浏览器的开发者模式，查看要定位的元素有哪些属性

同样可以在浏览器的console中使用document判断通过这种方式查找元素是不是唯一的

可以看bilibili的输入框class_name是唯一的，我们就可以用class_name进行定位

也是成功定位到了bilibili的输入框

由于class这个属性是样式，所以可能页面中很多元素都使用了这个样式。因此使用class name查找元素的时候，可能会查找到多个元素。
例如：channel-link，这个class name能够定位到的元素就很多

那么我们如何获取呢,答案是使用driver.find_elements

import time
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
# 填写chromedriver的目录
service = Service('/usr/local/bin/chromedriver')
driver = webdriver.Chrome(service=service)
driver.get("https://www.bilibili.com/")
elements  = driver.find_elements(By.CLASS_NAME,"channel-link")
time.sleep(5)
driver.quit()

通过调试我们可以看到结果有28条数据

对于driver.find_elements的结果，我们可以通过下标去取
下图所示：

当一个元素有多个类名时，类名之间用空格分隔，find_element或find_elements方法只能接收一个类名作为参数，不能直接使用包含多个类名的字符串进行定位。如果要根据多个类名定位元素，可以考虑使用 CSS 选择器或 XPath。

4.根据tag_name定位

在 Selenium 中，我们可以根据元素的标签名（tag_name）来定位网页元素。
还是以哔哩哔哩为例，可以看到input标签就只有一个，我们也可以用tag_name来定位到这个输入框

import time

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
service = Service('/usr/local/bin/chromedriver')
driver = webdriver.Chrome(service=service)
driver.get("https://www.bilibili.com/")

driver.find_element(By.TAG_NAME,'input').send_keys('测试')
time.sleep(5)
driver.quit()

可以看到成功定位到了输入框并输入了‘测试’

使用标签名定位时，由于网页中相同标签名的元素可能有多个，所以 find_elements 方法返回的通常是一个元素列表。若要对特定元素进行操作，可能需要结合其他信息进一步筛选。

5.根据name定位

在 Selenium 里，依据元素的 name 属性来定位元素也是很常用的定位手段。
我们看到百度输入框的input标签中有name属性，那么我们就可以使用name进行定位。

代码示例：

import time

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
service = Service('/usr/local/bin/chromedriver')
driver = webdriver.Chrome(service=service)
driver.get("https://www.baidu.com/")
driver.find_element(By.NAME,'wd').send_keys('测试')
time.sleep(5)
driver.quit()

可以看到也是成功定位到了

6.根据link_text定位

link_text定位是 Selenium 中专门用于定位超链接元素的方法，它通过超链接标签a里的完整可见文本内容来查找元素。
在百度页面，有一个新闻的a标签，且是唯一的，我们就可以用link_text来定位

示例：

import time

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By

service = Service('/usr/local/bin/chromedriver')
driver = webdriver.Chrome(service=service)
driver.get("https://www.baidu.com/")

driver.find_element(By.LINK_TEXT,'新闻').click()
time.sleep(5)
driver.quit()

可以看到定位到了新闻这个a标签，并进行了点击

7.根据partial_link_text定位

在 Selenium 中，partial_link_text定位方式用于根据超链接的部分文本内容来定位元素。当超链接的文本内容较长，或者你只知道其中一部分时，使用partial_link_text定位会非常方便,类似于模糊匹配。
示例：

import time

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
service = Service('/usr/local/bin/chromedriver')
driver = webdriver.Chrome(service=service)
driver.get("https://www.baidu.com/")

driver.find_element(By.PARTIAL_LINK_TEXT,'新').click()
time.sleep(5)
driver.quit()

可以看到也能够成功定位到新闻并点击

8.根据css定位

在 Selenium 中，使用 CSS 选择器定位元素是一种强大且灵活的方式。CSS 选择器可以根据元素的标签名、类名、ID、属性等多种特征来定位元素。
对于网页上的元素，我们可以一键复制元素的css样式，我们可以进入浏览器的开发者模式，选择想要定位的元素的位置，右键选择copy点击copy selector

示例：

import time

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
service = Service('/usr/local/bin/chromedriver')
driver = webdriver.Chrome(service=service)
driver.get("https://www.baidu.com/")

driver.find_element(By.CSS_SELECTOR,'#kw').send_keys('测试')
time.sleep(5)
driver.quit()

可以看到成功定位到了元素

9.根据xpath定位

在 Selenium 中，XPath 是一种强大的元素定位方式，它可以通过元素的路径、属性、文本内容等多种条件来定位元素。
网页中的xpath也可以直接一键复制

示例：

import time

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
service = Service('/usr/local/bin/chromedriver')
driver = webdriver.Chrome(service=service)
driver.get("https://www.bilibili.com")


driver.find_element(By.XPATH,'//*[@id="nav-searchform"]/div[1]/input').send_keys('xpath')
time.sleep(5)
driver.quit()