最后更新：2026-09-04 01:19

实验13 浏览器基本操作与元素定位¶

难度：★★☆　|　预估时长：90 分钟

13.1 实验目的¶

知识目标：理解 Selenium 自动化"打开浏览器 → 定位元素 → 模拟操作"的基本流程；理解八种元素定位方式的原理与适用场景。
技能目标：能用 webdriver.Chrome() 打开浏览器并调用 get()、forward()、back()、refresh()、maximize_window()、close()、quit() 等方法；能使用 id / name / xpath / css_selector / link_text / partial_link_text / class_name / tag_name 八种方式定位元素，并用 send_keys() 输入、click() 点击。
素养目标：养成"先确认元素属性、再选定位方式、找不到就换一种"的排错习惯。

13.2 实验环境¶

操作系统：Windows 10 / Windows 11；
工具：PyCharm + Python + Selenium（实验6 已装好）；
浏览器：Chrome（需与 chromedriver 版本匹配）；
被测系统：人力资源综合服务系统（局域网部署，地址示例 http://192.168.X.XXX/suthr/logon）。

13.3 实验重难点¶

重点：八种元素定位方式及其适用场景；浏览器基本操作方法。

难点：xpath 绝对/相对路径理解；class 属性含空格时的处理；link_text 与 partial_link_text 的区别。

13.4 实验内容¶

13.4.1 浏览器基本操作（一）：打开浏览器与页面跳转¶

1. 任务描述 编写脚本打开 Chrome 浏览器，访问网页，并掌握前进、后退、等待方法。

2. 实验步骤

步骤 1：实例1——打开谷歌浏览器：

from selenium import webdriver
driver = webdriver.Chrome()   # 打开谷歌浏览器

步骤 2：实例2——打开浏览器并进入百度主页：

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")   # 打开百度首页

步骤 3：实例3——前进、后退与等待：

from time import sleep
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://www.hao123.com")
sleep(3)
driver.get("https://www.baidu.com")
sleep(3)
driver.back()      # 后退到 hao123
sleep(3)
driver.forward()   # 前进到百度

执行后：依次打开 hao123、百度 → 后退到 hao123 → 再前进到百度。

为什么要 sleep(3)？

页面加载需要时间，操作太快（如页面还没加载完就点按钮）容易报"找不到元素"。sleep(3) 就是让程序停 3 秒。更专业的等待方式见实验14（显式/隐式等待）。

常见错误与排错

若浏览器打不开 / 报 chromedriver 相关错误：检查 Chrome 与 chromedriver 版本是否匹配（实验6 已配好）；
若 driver.get() 后页面空白：确认网址拼写正确、网络可访问；
若中文注释导致编码报错：确保文件保存为 UTF-8。

13.4.2 浏览器基本操作（二）：刷新、最大化、关闭¶

1. 任务描述 掌握刷新、窗口最大化、关闭当前窗口等方法。

2. 实验步骤

步骤 1：编写代码：

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
driver.refresh()            # 刷新页面
driver.maximize_window()    # 窗口最大化
driver.close()              # 关闭浏览器当前窗口

步骤 2：运行并观察浏览器依次执行：进入百度 → 刷新 → 最大化 → 关闭。

close() 与 quit() 的区别

close()：关闭浏览器当前窗口（若多标签页，只关当前这个）；
quit()：完全退出浏览器进程（推荐，能释放资源）。

常见错误与排错

若想彻底退出却用了 close()，浏览器进程仍残留：改用 quit()；
若报 NameError: name 'webdriver' is not defined：检查是否漏写 from selenium import webdriver。

13.4.3 八种元素定位（一）：id 与 name¶

1. 任务描述 用 id 和 name 属性定位用户名输入框并输入内容。

2. 实验步骤

步骤 1：id 定位（类比：同名的人很多，但身份证号唯一；网页里 id 唯一）：

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("http://192.168.X.XXX/suthr/logon")
driver.find_element_by_id("username").send_keys("hrteacher")

定位到元素后：send_keys("内容") 输入文本，click() 单击。
步骤 2：name 定位（元素没有 id 时，用唯一的 name 属性）：

driver.find_element_by_name("username").send_keys("hrteacher")

怎么知道元素的 id / name？

在页面上右击元素 → 选择"检查/查看元素"，在开发者工具中就能看到该元素的 id、name、class 等属性。

id 和 name 定位是什么？

id：就像身份证号，一个页面里唯一，定位最稳；
name：就像"姓名"，可能重名，但比 id 更常见；没有 id 时常用它。

常见错误与排错

若 find_element_by_id 报 NoSuchElementException：用开发者工具确认 id 拼写正确、元素已加载（可加等待）；
若 send_keys 没反应：确认定位到的确实是输入框，而不是别的标签。

13.4.4 八种元素定位（二）：xpath 与 css_selector¶

1. 任务描述 用路径方式定位元素。

2. 实验步骤

步骤 1：xpath 定位——路径语言，支持属性定位与路径导航：
绝对路径：从根一级级往下写，路径深时麻烦且执行效率低，少用；
相对路径 + 属性：常用。格式 //*[@属性="值"]。

driver.find_element_by_xpath('//*[@id="username"]').send_keys("hrteacher")

步骤 2：理解 xpath 基本表达式（以 book 文档为例）：

/bookstore/book：从根选取；
//book：任意位置选取 book；
//@lang：选取所有 lang 属性；
//title | //price：选取若干路径（| 运算符）。
步骤 3：css_selector 定位——比 xpath 更简洁、运行更快：

driver.find_element_by_css_selector('#password').send_keys("hrteacher")

# 表示 id，. 表示 class。

xpath vs css_selector 怎么选？

两者都能路径定位；
css_selector：写法简洁、速度快，优先推荐；
xpath：功能更强大（可文本定位、轴定位），复杂场景用它。

常见错误与排错

若 xpath 写绝对路径（/html/...）容易失效：优先用相对路径 //*[@属性="值"]；
若 css_selector 报语法错：记住 # 后是 id、. 后是 class，别写反；
若 find_element_by_xpath 报 NoSuchElementException：检查属性值是否带引号、是否拼错。

13.4.5 八种元素定位（三）：link_text 与 partial_link_text¶

1. 任务描述 用超链接文本定位"人资工作台"链接。

2. 实验步骤

步骤 1：link_text 定位——按超链接的完整文本定位（适合跳转页面的链接）：

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("http://192.168.X.XXX/suthr/logon")
driver.find_element_by_id("username").send_keys("hrteacher")
driver.find_element_by_id("password").send_keys("123456")
driver.find_element_by_id("loginBtn").click()          # 登录
driver.find_element_by_link_text("人资工作台").click()  # 点链接跳转

步骤 2：partial_link_text 定位——模糊匹配，截取文本的一部分即可：

driver.find_element_by_partial_link_text("工作台").click()

（"人资工作台"太长，只输"工作台"也能定位。）

link_text 与 partial_link_text 怎么选？

link_text：文本必须完全一致，适合链接文字固定；
partial_link_text：只需片段，文本长或会变化时更稳。

常见错误与排错

若 link_text 找不到：检查文本是否完全一致（含空格、标点），否则改用 partial_link_text；
若页面有多个同名链接：link_text 只会点第一个，需结合其他定位方式缩小范围。

13.4.6 八种元素定位（四）：class_name 与 tag_name¶

1. 任务描述 用 class 属性和标签名定位元素。

2. 实验步骤

步骤 1：class_name 定位——既无 id 也无 name，但有 class 属性时：

driver.find_element_by_name("username").send_keys("hrteacher")
driver.find_element_by_name("password").send_keys("123456")
driver.find_element_by_id("loginBtn").click()
driver.find_element_by_class_name("icon-badge").click()  # 定位"培训进修"

步骤 2：class 含空格的处理：

<input class="form-control username">

空格前后其实是两个名字（form-control 和 username），用哪个都行：

driver.find_element_by_class_name("form-control").send_keys("hrteacher")

步骤 3：tag_name 定位——按标签名定位（如 <button>、<input>、<a>）。因为同类 tag 太多，识别率低，用得比较少：

driver.find_element_by_tag_name("button").click()  # 页面唯一的"登录"按钮

class_name 和 tag_name 怎么用？

class：是元素的样式类名，多个元素可能共用同一个 class，定位不够精准；
tag：是 HTML 标签名（button/input/a），同类标签太多，识别率低，一般很少单独用。

常见错误与排错

若 class 含空格（如 form-control username）：不能整串写，只能取其中一个类名（如 form-control）；
若 class_name 定位到错误元素：说明页面多个元素共用该 class，建议换 id / xpath；
若 tag_name 点到错误元素：同类标签太多，尽量不要单独用它定位。

13.5 实验总结¶

本次实验掌握了自动化脚本的两大基本功：

一是掌握了浏览器基本操作（打开、前进后退、刷新、最大化、关闭/退出）与等待基础 sleep()（对应知识/技能目标）；
二是掌握了八种元素定位方式及其适用场景，理解了 id 唯一、class 含空格、link_text 与 partial_link_text 的区别（对应知识目标）；
三是能用 send_keys() 输入、click() 点击模拟用户操作，并养成"多掌握定位方式、遇到问题换一种"的排错习惯（对应技能/素养目标）。

13.6 作业提交¶

提交地点：吾爱作业网
提交资料：
完成 13.4.1 实例3（前进后退）运行结果截图；
完成 13.4.3~13.4.6 至少两种定位方式的脚本与运行截图。
不会做时填写"心得感悟"（1~50 字）。

13.7 知识检测¶

[ ] （填空）Selenium 中用于"完全退出浏览器、释放资源"的方法是 quit()（提示：close() 只关闭当前窗口）。
[ ] （填空）按超链接的完整文本定位使用 find_element_by_link_text；只截取片段做模糊匹配则用 find_element_by_partial_link_text。
[ ] （选择）class 属性含有空格（如 class="form-control username"）时，正确的定位写法是？
A. find_element_by_class_name("form-control username")
B. find_element_by_class_name("form-control")
C. find_element_by_id("form-control username")
D. find_element_by_tag_name("username")

查看解析

正确答案：B。class 含空格时是多个类名，只能取其中一个（如 form-control）来定位，不能用整串。

[ ] （选择）以下定位方式中，运行速度最快、写法最简洁的是？
A. xpath　B. css_selector　C. tag_name　D. class_name

查看解析

正确答案：B。css_selector 写法简洁、执行速度快，优先推荐；xpath 功能更强但稍慢。

本课相关资源¶

序号	资源名称	类型	说明
1	任务3.1 浏览器基本操作方法.pptx	课件	浏览器操作图解
2	任务3.2 八种基本元素定位方式方法使用.pptx	课件	八种定位详解
3	人力资源综合服务系统	被测系统	登录地址 192.168.X.XXX/suthr/logon

实验素材下载

点击下方链接获取本节课全部资源（含课件、任务清单、安装包等）： 🔗 夸克网盘