全网最全关于selenium webdriver 8大元素定位详解

selenium 常用的元素定位方式

元素的定位应该是自动化测试的核心，想要操作一个元素，首先应该识别这个元素。Webdriver提供了一系列的元素定位方法。

常用的有以下几种：
1、id
2、name
3、class name
4、link text
5、partial link text
6、tag name
7、xpath
8、css selector

首先，我们先看看下面的这段HTML的代码，接下来我们会通过这段代码去介绍元素定位的方式。

<span class="bg s_ipt_wr quickdelete-wrap">
    <span class="soutu-btn"></span>
    <input id="kw" class="s_ipt" autocomplete="off" maxlength="255" value="" name="wd">
    <a id="quickdelete" class="quickdelete" href="javascript:;" title="清空" style="top: 0px; right: 0px; display: none;"></a>
</span>
<span class="bg s_btn_wr">
    <input id="su" class="bg s_btn" type="submit" value="百度一下">
</span>

id元素定位

案例：打开百度首页，在搜索框中自动输入“Selenium”，然后点击搜索按钮，查看搜索页面。

# -*- coding: utf-8 -*-
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")

# 通过id定位元素
driver.find_element_by_id('kw').send_keys("selenium")

# 点击搜索按钮
driver.find_element_by_id('su').click()

name元素定位

# -*- coding: utf-8 -*-
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")

# 通过name定位元素
driver.find_element_by_name('wd').send_keys("selenium我要自学网")

#点击搜索按钮
driver.find_element_by_id('su').click()

元素定位class_mame

# -*- coding: utf-8 -*-
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.baidu.com/")

# 使用class_name定位元素
driver.find_element_by_class_name("s_ipt").send_keys("selenium")

sleep(3)

driver.find_element_by_id("su").click()
sleep(2)
driver.quit()

大家如果在项目实战的过程中，会发现classname可能会存在空格类的复合元素，如class=”van-cell van-field”那么一般通过name定位通常会报错，报错的时候，我们可以在consle中使用：

document.getElementsByClassName("van-cell van-field")

方法查看页面一共有多少个classname，假设包含多个，我们可以从上一个层级的div中定位class，如果元素为多个时，我们可以使用下标进行定位，如下代码

# coding=utf-8
from selenium.webdriver.support import expected_conditions as EC
from selenium import webdriver
import time


driver = webdriver.Chrome()
driver.get("http://localhost:8080/login")
time.sleep(5)
print(EC.title_contains("登录"))
user_name2 = driver.find_elements_by_class_name("van-cell")[0]
user_name = user_name2.find_elements_by_class_name("van-field__control").send_keys("188****7063")

Xpath层级与逻辑定位

在工作中，我们用xapth的相对路径定位会非常多

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.51zxw.ne")

#层级和属性结合定位--自学网首页输入用户名和密码
#driver.find_element_by_xpath("//form[@id='loginForm']/ul/input[1]").send_keys('51自学网')

#逻辑运算组合定位and
driver.find_element_by_xpath("//input[@class='loinp'and @name='username']").send_keys('666')
sleep(3)
driver.find_element_by_xpath("//from[@id='loginForm']/ul/input[2]").send_keys(666)


xpath分为绝对路径和相对路径

相对路径：
    1、//标签名[@属性=值]
    // 如：i[@class="ing"]
    //*[@*="ing"] * 星号表示通配符，匹配所有
    
    2、文本匹配  //标签名[text() = 值]
    
    //a[text()="公告"]
    
    3、包含  // 标签名[contains@属性/text(), 值]
    
    //a[contains(@herf, "Notif/index/courseid/")]
    //a[contains(text(), "公告")]
    
    4、逻辑运算符来组合更多元素特征 and or
    
    // 标签名@属性=值 and @属性=值 and contains(@属性/text(), 值) and text()=值
    
    5、层级定位：//一级元素//二级元素//...
    
    //div[@id="number"]//i[@class="ing"]
    
    6、轴定位
    
    ancestor: 祖先结点 包括父节点
    parent: 父节点 
    preceding: 当前元素节点标签之前的所有节点
    preceding-sibling: 当前元素节点标签的上级
    following: 当前元素节点标签的下级
    following-sibling: 当前元素节点标签之后的所有兄弟节点
    
    //div//table//td//preceding::td
    
    //td[@class="el-table_358_column_2401 is-center "]/preceding-sibling::img[@class="imglogo"]

CSS常用定位方法

Selenium极力推荐使用CSS定位，而不是xpath来定位元素，原因是CSS定位比Xpath定位速度快，语法也更加简洁。

1、find_element_by_css_selector()
2、#id
id选择器根据id属性来定位元素
3、.class class选择器，根据class属性值来定位元素
4、[attribute = 'value']根据属性来定位元素
5、element > element 根据元素层级来定位 父元素>子元素

案例
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")

#通过id定位元素
driver.find_element_by_css_selector("#kw").send_keys("Selenium 我要自学网")
sleep(2)

#通过class定位元素
driver.find_element_by_css_selector(".s_ipt").send_keys("python")

#通过属性定位元素
driver.find_element_by_css_selector('[autocomplete="off"]').send_keys("python")

#通过元素层级定位
driver.get("http://www.51zxw.net")
driver.find_element_by_css_selector("form#loginForm>ul>input[type='password']").send_keys("python")

元素定位tag_name

# -*- coding: utf-8 -*-
from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
driver.get("https://www.51zxw.net/")

# 使用标签名定位元素，通常标签名会存在多个，所以用下标定位标签名的位置
# 通常不建议使用tag_name定位元素
driver.find_elements_by_tag_name('input')[0].send_keys("selenium")

sleep(3)

driver.quit()

find_elements_by_id

// 一个元素的值，可能存在多个相同的，因此我们可以使用find_elements_by_id这种方法，找到属性值，然后定义一个变量，通过索引的方式去进行定位元素。

from selenium import webdriver

driver = webdriver.Chrome()

driver.get("http://www.baidu.com")
ids = driver.find_elements_by_id("login")

ids[0].send_keys("test")

ids[1].send_keys("123")

元素定位by

from selenium import webdriver
from selenium.webdriver.common.by import By
from time import sleep

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")
driver.implicitly_wait(5)

#使用by方式进行定位
driver.find_element(By.ID,"kw").clear()
driver.find_element(By.NAME,"wd").click()
driver.find_element(By.CLASS_NAME,"s_ipt").send_keys("自学网")
driver.find_element(By.CSS_SELECTOR,"#KW").send_keys('python')

sleep(3)

driver.find_element(By.ID,'kw').click()

fream框架元素定位

案例：在Frame.html文件中定位搜狗搜索页面，进行搜索操作。
什么是frame嵌套？
通俗点的理解，就是一个页面中嵌套了另外一个网站的页面。frame对象代表了一个HTML的内联框架，如果你在自动化测试中无法定位到元素，那么最大的可能就是元素在frame框架中。

from selenium import webdriver
from time import sleep

driver = webdriver.Chrome()
file_path = r"C:\Users\yuxiaoqi\PycharmProjects\untitled\Html\Frame.html"

driver.get(file_path)

#使用.switch_to.frame方法，切换至frame页面
driver.switch_to_frame("search")

# 如果有嵌套的iframe，则再次进入到二级的ifeame中
driver.switch_to_frame('son')


driver.find_element_by_css_selector("#query").send_keys("python")
sleep(2)
driver.find_element_by_css_selector("#stb").click()

# 跳出ifeame框架
driver.switch_to_default_content()