Python+Playwright(3) 元素定位之一

原创已于 2025-04-21 18:22:46 修改 · 1.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#python #ui

于 2025-04-18 16:39:00 首次发布

该文章已生成可运行项目，

常见的元素定位

定位器是 Playwright 自动等待和重试能力的核心部分。简而言之，定位器代表了一种随时在页面上查找元素的方法，以下是常用的内置定位器

1、按角色定位

根据页面元素的 ARIA 角色定位元素，特别适合用于具有无障碍特性的网站。Playwright 支持大多数标准的 ARIA 角色，如 `button`、`link`、`textbox` 等。

按显式和隐式可访问性属性进行定位语法：page.get_by_role（）

语法：page.get_by_role(role, name=None, exact=False)

role‌：必填参数，指定元素的 ARIA 角色类型（如 button、checkbox、heading 等）‌12。
‌name‌：可选参数，通过元素的显式名称（如按钮文本）或隐式可访问性属性（如 aria-label）进行过滤，支持字符串或正则表达式‌13。
‌exact‌：默认为 False，控制 name 的匹配方式（精确或模糊）‌

1.1 按钮操作

定位名称为 “Sign in” 的按钮并点击：

page.get_by_role("button", name="Sign in").click()

1.2 模糊匹配

使用正则表达式匹配名称（忽略大小写）：

page.get_by_role("button", name=re.compile("submit", re.IGNORECASE)).click()  # ‌:ml-citation{ref="1" data="citationList"}

1.3 表单控件交互

‌勾选名称为 “Subscribe” 的复选框：

page.get_by_role("checkbox", name="Subscribe").check()  # ‌:ml-citation{ref="1,3" data="citationList"}

1.4 定位导航栏中的链接

page.get_by_role("link", name="首页")

1.5 标题验证

检查名称为“Sign up”的标题是否可见

expect(page.get_by_role("heading", name="Sign up")).to_be_visible()

2、按标签定位

通过关联标签的文本查找表单控件，适用于输入框、复选框、单选按钮等元素的高效定位‌

语法：page.get_by_label()

page.get_by_label(label_text‌)

label_text‌：必填参数，指定与表单控件关联的 <label> 标签的显示文本（支持字符串或正则表达式）‌

2.1 输入框操作

示例代码：

page.get_by_label("Password").fill("hz123456")

# 定位标签为“Birth date”的输入框并填写日期  
page.get_by_label("Birth date").fill("1999-12-31")

2.2 ‌复选框/单选框操作

示例代码：勾选或取消勾选关联标签的控件

# 勾选标签为“I agree to the terms above”的复选框  
page.get_by_label('I agree to the terms above').check()

# 验证标签为“Subscribe to newsletter”的复选框是否已选中  
assert page.get_by_label('Subscribe to newsletter').is_checked() is True

2.3 复杂表单交互

示例代码：处理带有嵌套标签或动态生成的表单

# 使用正则表达式匹配部分标签文本（如“数字输入专用”）  
page.get_by_label(re.compile("数字输入")).fill("1.1234567890")

注意：

1.标签唯一性‌：确保 label_text 在页面中唯一，否则可能定位到多个元素导致操作失败‌

2.复合组件定位‌：对于复杂组件（如带图标的标签），可能需要结合其他定位方法（如 get_by_role() 或 CSS 选择器）‌

3、按占位符定位

可以根据输入框中的 placeholder 占位符来定位元素，适用于快速定位带有提示性文本的表单输入控件。

语法：page.get_by_placeholder()

page.get_by_placeholder(placeholder_text)

placeholder_text‌：必填参数，指定输入框的占位符文本（支持字符串或正则表达式）‌

示例代码1：

page.get_by_placeholder("name@example.com").fill("playwright@microsoft.com")

示例2：<input type="email" placeholder="请输入用户名" />

示例代码2：

# 定位占位符为“请输入用户名”的输入框
page.get_by_placeholder("请输入用户名")

‌3.1 快速定位输入框‌

根据占位符文本定位并填写内容，示例代码：

# 定位占位符为“手机号或邮箱”的输入框并填写内容  
page.get_by_placeholder('手机号或邮箱').type('1760123456', delay=1000)

# 定位占位符为“不用管我,我是placeholder”的输入框并填充文本  
page.get_by_placeholder("不用管我,我是placeholder").fill("小博测试成长之路")

3.2 动态占位符处理

‌使用正则表达式匹配动态生成的占位符文本，示例代码：

# 匹配占位符中包含“邮箱”关键字的输入框，并输入对应信息
page.get_by_placeholder(re.compile("邮箱")).fill("test@example.com")

注意：

占位符唯一性‌：确保 placeholder_text 在当前页面唯一，否则可能触发多元素匹配错误‌

4、通过文本定位

Playwright 可以通过元素的文本内容来定位元素，支持精确匹配和部分匹配。

语法：page.get_by_text()

page.get_by_text(text, exact=False)

text‌：必填参数，指定待匹配的文本内容（支持字符串或正则表达式）‌38。
‌exact‌：默认为 False，控制是否启用精确匹配（True 为完全匹配，False 为模糊匹配）‌

示例1：

示例代码：

# 可以通过元素包含的文本找到该元素
page.get_by_text("Welcome, John")

# 设置完全匹配
page.get_by_text("Welcome, John", exact=True)

# 正则表达式匹配
page.get_by_text(re.compile("welcome, john", re.IGNORECASE))

示例2：

<span>提交</span>

# 定位文本完全为“提交”的按钮
page.get_by_text("提交")

# 使用正则表达式进行部分匹配
page.locator("text=/提交.*/")
page.get_by_text(re.compile("提交", re.IGNORECASE))

# 精准匹配
page.get_by_text("提交", exact=True)

4.1 定位按钮/链接

适用场景：表单提交按钮、导航链接等‌

# 点击文本为“提交”的按钮  
page.get_by_text("提交").click()  

# 点击包含“返回首页”文本的链接（模糊匹配）  
page.get_by_text("返回首页").click()

4.2 ‌验证文本存在性

适用场景：验证弹窗提示、操作结果反馈等‌

# 断言页面中是否存在“操作成功”的提示文本  
expect(page.get_by_text("操作成功")).to_be_visible()

4.3 复杂文本匹配

适用场景：分页信息、动态加载内容等‌

# 使用正则表达式匹配动态生成的文本（如“共10条记录”）  
page.get_by_text(re.compile(r"共\d+条记录")).click()

注意：

1.文本唯一性‌：确保目标文本在当前页面唯一，避免匹配到多个元素导致操作失败‌

2.精确匹配控制‌：优先使用 exact=True 避免因部分文本重复导致的误操作‌

说明：
按文本匹配始终会规范化空格，即使完全匹配也是如此。例如，它将多个空格转换为一个空格，将换行符转换为空格，并忽略前导和尾随空格。

建议使用文本定位器来查找非交互式元素，如 div、span、p 等。对于button、a、input等交互式元素，请使用角色定位器。

本文章已经生成可运行项目