
当你点开这篇文章,恭喜你,你已经踏上了成为Web自动化测试大佬的关键一步!别再对着飘忽不定的网页元素发愁了,今天,我们就来把Selenium WebDriver那点事儿彻底讲透,让你不仅能“开车”,更懂“车”是怎么造出来的!
在开始“寻宝”(定位元素)之前,我们得先搞清楚我们的“坐骑”(WebDriver)是怎么跑的。
我们把整个自动化测试过程比作玩一台高级遥控车(浏览器):
整个工作流程,请看下图:

具体过程解读:
driver.find_element(By.ID, "kw").click()。核心要点:WebDriver 直接操作的是浏览器,而不是操作系统或页面内容。它模拟的是真实用户的行为,因此效果非常逼真。
如果把自动化测试比作让机器人在网页上帮你办事,那么元素定位就是告诉机器人“对哪个东西办事”的唯一方法。如果定位不准,你让机器人点击“提交”按钮,它可能一拳打在了“重置”按钮上,后果可想而知。
所以,这门“大法”是Selenium学习的重中之重,是内功心法!
Selenium 提供了8种主要的定位元素的方法,我们可以把它们看成8种不同的兵器。

如何使用这些“兵器”?
现代 Selenium (4.x 之后) 的标准用法是:
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
# 使用 By 来指定定位方式
username_field = driver.find_element(By.ID, "username")
login_button = driver.find_element(By.CSS_SELECTOR, "#login-btn")假设我们有一个登录页面,HTML代码如下:
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
# 使用 By 来指定定位方式
username_field = driver.find_element(By.ID, "username")
login_button = driver.find_element(By.CSS_SELECTOR, "#login-btn")现在,我们要定位页面上的各个元素:
1. ID定位(首选)
# 定位用户名输入框 - 用ID
user_elem = driver.find_element(By.ID, "username")
user_elem.send_keys("testuser") # 输入用户名2. Name定位
# 定位密码输入框 - 用Name
pwd_elem = driver.find_element(By.NAME, "pwd")
pwd_elem.send_keys("mypassword") # 输入密码3. Class Name定位
# 定位登录按钮 - 用Class Name (注意:这里有多个class)
# 错误示范:driver.find_element(By.CLASS_NAME, "btn btn-primary") # 不行!
# 正确示范:只能使用其中一个单一的class
login_btn = driver.find_element(By.CLASS_NAME, "btn") # 或者 "btn-primary"
login_btn.click()class="btn btn-primary"),你不能一次性全部写入。只能使用其中一个。4. Link Text定位
# 定位“忘记密码”链接 - 用Link Text
forgot_link = driver.find_element(By.LINK_TEXT, "忘记密码?")
forgot_link.click()5. Partial Link Text定位
# 定位“立即注册新账号”链接 - 用Partial Link Text
register_link = driver.find_element(By.PARTIAL_LINK_TEXT, "注册")
register_link.click()当ID、Name等简单方式都不管用时(比如元素没有这些属性,或者是动态生成的),XPath和CSS Selector就是你的终极武器。
XPath —— 路径定位大师
XPath通过元素的路径结构来定位,好比你说“帮我拿书房书桌第二个抽屉里的那支钢笔”。
/html/body/div/form/input[1]//:表示从任意层级开始查找@:表示属性实战示例:
# 定位用户名输入框
# 意思:寻找页面中任意一个 input 标签,且其 id 属性为 ‘username’
elem1 = driver.find_element(By.XPATH, "//input[@id='username']")
# 定位登录表单里的密码框
# 意思:寻找 name 属性为 'login-form' 的 form 标签,再找它下面的 input 标签,且其 type 属性为 ‘password’
elem2 = driver.find_element(By.XPATH, "//form[@name='login-form']//input[@type='password']")
# 使用逻辑运算符 and
# 定位 class 为 ‘btn’ 并且 value 为 ‘登录’ 的按钮
elem3 = driver.find_element(By.XPATH, "//input[@class='btn' and @value='登录']")
# 使用文本内容定位
# 定位文字为“忘记密码?”的 a 标签
elem4 = driver.find_element(By.XPATH, "//a[text()='忘记密码?']")CSS Selector —— 简洁高效之王
CSS Selector的语法源于前端CSS,通常执行速度比XPath更快,语法更简洁。
实战示例:
# 定位用户名输入框 - 用ID选择器
elem1 = driver.find_element(By.CSS_SELECTOR, "#username")
# 定位密码输入框 - 用属性选择器
elem2 = driver.find_element(By.CSS_SELECTOR, "input[name='pwd']")
# 或者用class选择器
elem2 = driver.find_element(By.CSS_SELECTOR, ".pwd-field")
# 定位登录按钮 - 用多个class选择(注意:这里和CLASS_NAME不同,可以组合)
elem3 = driver.find_element(By.CSS_SELECTOR, ".btn.btn-primary")
# 定位表单内所有输入框 - 用标签选择器
all_inputs = driver.find_elements(By.CSS_SELECTOR, "form[name='login-form'] input")XPath vs CSS Selector 如何选?
小技巧:在Chrome浏览器的开发者工具(F12)中,你可以直接复制元素的XPath或CSS Selector。
Elements标签页,右键点击元素 -> Copy -> Copy XPath / Copy selector。学了武功,还得知道怎么不走火入魔。
WebDriverWait 显式等待。driver.switch_to.frame("frame_name_or_id"),操作完后用 driver.switch_to.default_content() 切回来。# 定位ID动态变化,但前半部分固定的元素
# <div id="yui_3_18_0_1_172234567890">...</div>
dynamic_elem = driver.find_element(By.XPATH, "//div[contains(@id, 'yui_3_18_0_1')]")find_element 找到了多个,它只返回第一个,可能不是你想要的。find_elements(返回列表)检查数量,或者使用更精确的定位表达式。time.sleep()这种“死等”,用WebDriverWait,智能又高效。掌握了 Selenium WebDriver 的核心原理,你就明白了自动化测试这台“机器”是如何运转的;修炼好了元素定位“大法”,你就获得了指挥这台机器的“权杖”。
从今天起,别再手动“点点点”了。拿起你的代码编辑器,选择一个待测网站,从定位第一个元素开始,一步步构建你的自动化测试帝国吧!
记住,实践是检验真理的唯一标准。多练,多踩坑,多总结,你很快就会成为团队里那个“指哪打哪”的自动化测试高手!
本文原创于【程序员二黑】公众号,转载请注明出处!
欢迎大家关注笔者的公众号:程序员二黑,专注于软件测试干活分享,全套测试资源可免费分享!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。