元素定位练习 · 标签定位

练习 By.TAG_NAME 定位方法的核心实操与效果验证

首页 定位导航

练习说明

本页面提供 By.TAG_NAME 定位方法的完整练习场景。页面包含练习要求描述卡(方法概念 + Selenium 示例 + 练习清单)和定位后操作效果展示区域,在输入框输入内容、点击按钮、勾选选择框时,效果展示区会实时显示对应卡片。

方法 4:By.TAG_NAME — 通过 HTML 标签名定位

TAG_NAME 返回所有同名标签的集合,适合遍历表格 tr/td、图片列表 img、超链接 a、按钮 button 等。

练习要求 · 方法 4:By.TAG_NAME
📌 方法概念
原理:通过 HTML 原生标签名(如 <a>、<input>、<button>、<img>、<tr>、<td>)定位所有同名标签;绝大多数场景配合 find_elements 批量获取。
适用场景:统计链接数量、批量读取图片 alt 列表、遍历表格每一行数据、获取页面中所有按钮并依次点击。
注意事项:TAG_NAME 返回通常元素很多,一定要二次过滤(按属性、按位置、按父容器);<input> 要区分 type=text/email/password/hidden。
💻 Selenium 示例(Python)
from selenium import webdriver
from selenium.webdriver.common.by import By
# 1) 统计当前页面所有 <a> 超链接
links = driver.find_elements(By.TAG_NAME, "a")
print("链接总数:", len(links))
# 2) 读取所有 <img> 的 alt 属性(检查是否合规)
imgs = driver.find_elements(By.TAG_NAME, "img")
for img in imgs: print(img.get_attribute("alt"))
# 3) 组合:先 id 找学生表格 → 再 TAG_NAME('tr') 遍历每行
tbl = driver.find_element(By.ID, "tag_student_table")
rows = tbl.find_elements(By.TAG_NAME, "tr")
for r in rows:
    cells = r.find_elements(By.TAG_NAME, "td")
    print([c.text for c in cells])
📋 本节练习清单
  • ✅ 练习目标 1:TAG_NAME 统计 + 按钮点击 — 点击页面上的「统计链接/输入框/按钮」按钮,记下显示数字(基准值),再用 len(driver.find_elements(By.TAG_NAME, "a")) / "input" / "button" 对比两边数量是否一致;尝试两种写法:find_elements 过滤 vs find_element 精确定位
  • ✅ 练习目标 2:3 张风景图片find_elements(By.TAG_NAME, "img") 批量获取,按下标取每张图、读取 alt 属性;点击图片后效果区记录图编号和 alt 值
  • ✅ 练习目标 3:学生表格 4 行 — 先 id 拿 table,再 TAG_NAME('tr') 取 rows,每行 TAG_NAME('td') 取 4 列(学号/姓名/年龄/班级),点击任意行查看详细数据

练习目标 1:TAG_NAME 统计 + 按钮点击(累加计数)

操作步骤:
① 页面场景包含:5 个 <a>、4 个 <input>、3 个 <button>
② 点击页面上的统计按钮,记下显示数字(基准值)
③ 对比:len(driver.find_elements(By.TAG_NAME, "a")) 等,和页面基准值应一致
④ 点击 3 个统计按钮,观察「最近一次点击」显示的按钮名和 id;尝试两种写法:buttons = driver.find_elements(By.TAG_NAME, "button") 再过滤 vs driver.find_element(By.ID, "tag_btn_links") 精确定位

按钮点击计数: 您已点击按钮 0
🎯 最近一次点击: id=""
💡 用 Selenium 验证:buttons = driver.find_elements(By.TAG_NAME,"button") 再过滤出 3 个统计按钮,或直接精确定位 driver.find_element(By.ID,"tag_btn_links")、 driver.find_element(By.ID,"tag_btn_inputs")、 driver.find_element(By.ID,"tag_btn_buttons")

练习目标 2:风景图片(TAG_NAME('img'),共 3 张)

操作步骤:
① 批量获取 3 张图 → imgs = driver.find_elements(By.TAG_NAME, "img")
② 按下标取每张 → imgs[0](山脉)/ imgs[1](湖泊)/ imgs[2](城市)
③ 读取 alt 属性 → imgs[0].get_attribute("alt")

风景图-山脉(id=tag_img_1) 风景图-湖泊(id=tag_img_2) 风景图-城市(id=tag_img_3)

练习目标 3:学生表格(TAG_NAME('tr') / TAG_NAME('td'),共 4 行数据)

操作步骤(组合定位:先拿 table 容器,再内部取行和列):
① 先 id 拿 table → table = driver.find_element(By.ID, "tag_student_table")
② 内部取所有 tr → rows = table.find_elements(By.TAG_NAME, "tr")(会拿到表头 + 4 行数据)
③ 每行取 4 列 → cells = rows[1].find_elements(By.TAG_NAME, "td"),cells[0] 学号 / cells[1] 姓名 / cells[2] 年龄 / cells[3] 班级
④ 点击任意行查看详细数据

学号姓名年龄班级
A001张三20软件1班
A002李四21软件2班
A003王五19计科1班
A004赵六22计科2班

定位后操作效果展示区域

本区域用于展示:使用 By.TAG_NAME(a / input / button / img / tr / td 等)定位到一组标签后,执行批量统计、读取 alt、遍历表格行等操作反馈。

当前尚无操作记录

请尝试:① 点击 3 个「统计数量」按钮 ② 点击 5 个导航链接或聚焦输入框 ③ 点击任意风景图(查看alt) ④ 点击学生表格任意行。