当前位置：首页 > article >正文

UI自动化-八大元素定位方法

article 2024/12/23 16:46:50

1、通过id定位

id属性在HTML中是唯一的，因此使用id定位可以确保找到页面上唯一的元素。

由于id是唯一的，浏览器在查找元素时可以快速定位到目标元素，提高了定位的效率

代码示例：

driver = webdriver.Chrome()
# 窗口最大化
driver.maximize_window()
driver.get("https://www.baidu.com/")
driver.find_element(By.ID, "kw").send_keys("selenium")
driver.find_element(By.ID, "su").click()
sleep(3)

2、通过类名定位，By.CLASS_NAME

代码示例：
driver = webdriver.Chrome()
# 窗口最大化
driver.maximize_window()
driver.get("https://www.bilibili.com/")
# 只获取class属性的第一个元素
# driver.find_element(By.CLASS_NAME,'nav-search-input').send_keys("2024新年快乐")
# driver.find_element(By.CLASS_NAME,'channel-link').click()
# 获取class属性的所有元素
# driver.find_elements(By.CLASS_NAME,'channel-link')[4].click()
# for ele in driver.find_elements(By.CLASS_NAME,'channel-link'):
# print(ele.text)
# 错误用法
driver.find_element(By.CLASS_NAME,'icon-bg icon-bg__channel').click()
sleep(3)

3、通过标签名定位，By.TAG_NAME

一个网页，相同的标签的元素的概率非常高，因为我们尽量少通过tag_name定位单个元素

代码示例：

driver = webdriver.Chrome()
# 窗口最大化
driver.maximize_window()
driver.get("https://www.bilibili.com/")
driver.find_element(By.TAG_NAME, "input").send_keys("学习selenium")
# 不推荐
# driver.find_elements(By.TAG_NAME, "input")[50].click()

4、通过名称定位，By.NAME

name属性为表单中客户端提交数据的标识，一个网页中name值可能不是唯一的。所以要根据实际情况进行判断

代码示例：

driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
# 只获取属性的第一个元素
driver.find_element(By.NAME, 'wd').send_keys("软件测试老白")
# 获取属性的所有元素
driver.find_elements(By.NAME, 'wd')[0].send_keys("软件测试老白")

5、通过链接文本定位，By.LINK_TEXT

使用链接的全部文字定位元素

代码示例：

driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.LINK_TEXT, '新闻').click()

6、通过链接部分文本定位，By.PARTIAL_LINK_TEXT
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.PARTIAL_LINK_TEXT, '闻').click()

7、通过css_selector定位，By.CSS_SELECTOR

当一个元素无法直接定位，也就是没有id，name等确定标识，这个时候我们需要考虑使用css selector定位器。

它是一种通过CSS样式选择器来定位元素的方法

①使用id属性定位，id前面要加#号

代码示例：
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.CSS_SELECTOR, '#kw').send_keys("软件测试老白")

②通过class属性定位，class前面要加.

代码示例：
driver = webdriver.Chrome()
driver.get('https://www.bilibili.com')
driver.find_element(By.CSS_SELECTOR, '.nav-search-input').send_keys('软件测试老白')

③根据name属性定位，属性值为[name="wd"]

代码示例：
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.CSS_SELECTOR, '[name="wd"]').send_keys("软件测试老白")

④根据标签属性定位

代码示例：
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.CSS_SELECTOR, 'a[href="http://image.baidu.com/"]').click()
# 模糊匹配-包含
driver.find_element(By.CSS_SELECTOR, 'a[href*="image.baidu.com"]').click()
# 模糊匹配-匹配开头
driver.find_element(By.CSS_SELECTOR, 'a[href^="http://image.baidu"]').click()
# 模糊匹配-匹配结尾
driver.find_element(By.CSS_SELECTOR, 'a[href$="image.baidu.com/"]').click()

⑤组合定位

代码示例：
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
# input+name
driver.find_element(By.CSS_SELECTOR, 'input[name="wd"]').send_keys("软件测试老白")
# input+class
driver.find_element(By.CSS_SELECTOR, 'input.s_ipt').send_keys("软件测试老白")

⑥定位子元素
一般根据最近一个id属性往下找，可以根据class或者标签。
#s-top-left > a
:nth-child(3)代表第几个子元素，下标从1开始

代码示例：

driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
# 百度首页新闻，以下三种方式皆可
driver.find_element(By.CSS_SELECTOR, 'div.s-top-left-new.s-isindex-wrap a' ) # 根据class
driver.find_element(By.CSS_SELECTOR, 'div#s-top-left a') # 根据id
driver.find_element(By.CSS_SELECTOR, '#s-top-left a') # 简写
# 百度首页地图，以下2种方式皆可
driver.find_element(By.CSS_SELECTOR, '#s-top-left a:nth-child(3)')
driver.find_elements(By.CSS_SELECTOR, '#s-top-left a')[2]

# a:first-child 第一个标签
driver.find_element(By.CSS_SELECTOR, '#s-top-left a:first-child')
# a:last-child 最后一个标签
driver.find_element(By.CSS_SELECTOR, '#s-top-left a:last-child')

6、通过xpath定位，By.XPATH
①- 使用绝对路径，一般不推荐绝对路径，因为写起来太麻烦了

代码示例：
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
# 定位百度首页的新闻
driver.find_element(By.XPATH, '/html/body/div/div/div[3]/a')
time.sleep(2)

下面使用相对路径定位
②使用id属性定位

代码示例：
driver = webdriver.Chrome()
driver.get('https://www.baidu.com')
driver.find_element(By.XPATH, '//input[@id="kw"]').send_keys("软件测试老白")

③使用class属性定位

代码示例：

driver = webdriver.Chrome() driver.get('https://www.baidu.com') driver.find_element(By.XPATH, '//input[@name="wd"]').send_keys("软件测试老白")

④根据name属性定位

代码示例：

driver = webdriver.Chrome() driver.get('https://www.baidu.com') driver.find_element(By.XPATH, '//input[@name="wd"]').send_keys("软件测试老白")

⑤由子元素定位父元素

代码示例：

driver = webdriver.Chrome() driver.get('https://www.baidu.com') # 定位输入框的父元素 driver.find_element(By.XPATH, '//input[@id="kw"]/..')

⑥多个属性组合定位支持and or

代码示例：

driver = webdriver.Chrome() driver.get('https://www.baidu.com') driver.find_element(By.XPATH, '//input[@name="wd" and @class="s_ipt"]').send_keys("软件测试老白")

⑦多组数据使用下标定位

代码示例：

driver = webdriver.Chrome() driver.get('https://www.baidu.com') # 定位百度首页地图 driver.find_element(By.XPATH, '//div[@id="s-top-left"]/a[3]')

⑧根据文本内容定位

代码示例：

driver = webdriver.Chrome() driver.get('https://www.baidu.com') # 定位百度首页网盘 driver.find_element(By.XPATH, '//a[contains(text(),"网盘")]')

⑨其它定位方式，轴定位

代码示例：

driver = webdriver.Chrome() driver.get('https://www.baidu.com') # 最后一个子元素,last() driver.find_element(By.XPATH, '//a[@class="mnav c-font-normal c-color-t"][last()]') 动态ID https://element.eleme.cn/#/zh-CN/component/cascader driver.find_element(By.XPATH, '//span[text() = "默认 click 触发子菜单"]/following-sibling::div/div/input')

元素定位最佳顺序

ID（唯一标识）：如果元素具有唯一的ID属性，优先使用ID进行定位，因为它是最快和最可靠的定位方式。
CSS选择器：如果元素没有唯一的ID，可以考虑使用CSS选择器进行定位。CSS选择器具有灵活的语法，并且在性能上通常比XPath更高效。
类名（class）：如果元素没有唯一的ID或合适的CSS选择器，可以使用元素的类名进行定位。尽量选择具有明确含义的类名，并避免选择过于通用的类名。
Name属性：如果元素具有唯一的name属性，可以使用name属性进行定位。但要注意，name属性并不是所有元素都具有的，所以不是一种通用的定位方式。
XPath：如果前面的方式都无法定位元素，可以使用XPath进行定位。XPath提供了强大的定位功能，但在性能上相对较低，因为XPath需要遍历整个文档，直到找到匹配的元素。暂无性能对比数据，我觉得好用就用，及时行乐。
标签名（TagName）：如果元素无法使用上述方式进行定位，可以考虑使用标签名进行定位。但要注意，标签名定位方式通常会返回多个匹配的元素，需要结合其他条件来缩小范围。