python中playwright实现定位和点击的多种方法

在 Playwright 中，实现定位 (Locating) 和点击 (Clicking) 是最基本也是最重要的操作。你需要先准确地找到页面上的目标元素，然后才能对其执行点击操作。

Playwright 提供了多种强大的定位器 (Locators) 来帮助你准确地找到元素，并且它有智能的自动等待 (Auto-wait) 机制，这意味着你通常不需要手动添加等待元素出现的代码。

定位 (Locating) 元素

Playwright 推荐使用其内置的可见性定位器，它们更健壮，更接近用户感知，并且与可访问性最佳实践对齐。

以下是几种常用的定位方法：

1.按角色定位 (get_by_role)-推荐！

这是 Playwright 最推荐的定位方式。它基于元素的可访问性角色 (ARIA Role) 来定位，模拟用户如何感知页面。例如，一个按钮就是 role='button'，一个链接是 role='link'。

• 优点： 最健壮，不易受页面 HTML 结构变化影响，与用户感知最接近。
• 用法： page.get_by_role("role", name="text", exact=False)
  • role：元素的 ARIA 角色（如 “button”, “link”, “textbox”, “checkbox”, “heading” 等）。
  • name：元素的可访问名称，通常是用户在界面上看到的文本。
  • exact=False：如果为 True，则名称必须精确匹配；如果为 False (默认)，则允许部分匹配。

示例：

# 定位一个文本为 "登录" 的按钮
page.get_by_role("button", name="登录").click()

# 定位一个文本为 "用户协议" 的链接
page.get_by_role("link", name="用户协议").click()

# 定位一个文本框，其关联的标签文本为 "用户名"
page.get_by_role("textbox", name="用户名").fill("your_username")

# 定位一个层级为 h1 的标题，文本包含 "Playwright"
page.get_by_role("heading", name="Playwright", level=1)

2.按文本定位 (get_by_text)

根据元素显示的文本内容来定位。

• 优点： 直观，适用于文本是唯一标识的情况。
• 用法： page.get_by_text("text_content", exact=False)

示例：

# 定位文本为 "提交" 的任意元素
page.get_by_text("提交").click()

# 定位文本包含 "商品详情" 的元素
page.get_by_text("商品详情").click()

3.按标签文本定位 (get_by_label)

主要用于定位与 <label> 元素关联的输入框（input, textarea, select 等）。

• 优点： 健壮，当输入框没有 id 或 name 属性时很有用。
• 用法： page.get_by_label("label_text", exact=False)

示例：

# 定位一个被 <label>Username:</label> 关联的输入框
page.get_by_label("Username:").fill("my_user")

4.按占位符文本定位 (get_by_placeholder)

通过输入框的 placeholder 属性值来定位。

• 优点： 简单直接，适用于输入框有明确占位符的情况。
• 用法： page.get_by_placeholder("placeholder_text", exact=False)

示例：

# 定位 placeholder 为 "请输入手机号" 的输入框
page.get_by_placeholder("请输入手机号").fill("13812345678")

5.按测试 ID 定位 (get_by_test_id)

如果你的项目在 HTML 中使用了 data-test-id 或其他自定义测试 ID 属性，这是最可靠的定位方式。需要开发者在页面中预置。

• 优点： 最稳定，不易受 UI 或内容变化影响。
• 用法： page.get_by_test_id("my_test_id")

示例：

HTML: <button data-test-id="submit-button">提交</button>

# 定位 data-test-id="submit-button" 的元素
page.get_by_test_id("submit-button").click()

6.CSS 选择器定位 (locator("CSS_SELECTOR"))-次要选择

当你无法使用更语义化的定位器时，可以使用传统的 CSS 选择器。

• 优点： 灵活，前端开发者熟悉。
• 缺点： 依赖 HTML 结构，结构变化容易失效。
• 用法： page.locator("CSS_SELECTOR")

示例：

# 定位 id 为 "username" 的输入框
page.locator("#username").fill("my_username")

# 定位 class 为 "login-btn" 的按钮
page.locator(".login-btn").click()

# 定位父元素为 div，且 class 为 "item" 的第3个 span
page.locator("div.parent .item:nth-child(3) span")

7.XPath 定位 (locator("xpath=XPATH_EXPRESSION"))-最后选择

XPath 是一种非常强大的定位语言，但通常比 CSS 选择器更复杂，且可读性较差。在其他定位器都无法满足需求时使用。

• 优点： 极其灵活，可以定位任何元素。
• 缺点： 语法复杂，可读性差，同样依赖 HTML 结构。
• 用法： page.locator("xpath=XPATH_EXPRESSION")

示例：

# 定位文本为 "登录" 的按钮 (与 get_by_role("button", name="登录") 类似)
page.locator("xpath=//button[text()='登录']").click()

# 定位所有 div 元素中的第一个
page.locator("xpath=//div[1]")

点击 (Clicking) 元素

一旦你使用上述方法定位到了一个元素，你就可以直接对其调用 .click() 方法。

Playwright 的 .click() 方法是智能的，它会自动等待：

• 元素出现在 DOM 中。
• 元素变得可见（不是隐藏的）。
• 元素变得可用（未禁用）。
• 元素在点击位置没有被其他元素遮挡。
• 元素变得稳定（不再移动）。

只有当所有这些条件都满足时，Playwright 才会尝试点击。

基本用法：

# 定位并点击一个按钮
page.get_by_role("button", name="提交").click()

# 定位一个 CSS 选择器，并点击它
page.locator(".my-custom-button").click()

示例：定位并点击一个登录按钮

假设你有一个登录页面，上面有一个用户名输入框、密码输入框和一个“登录”按钮。

from playwright.sync_api import Playwright, sync_playwright, expect

def login_example(playwright: Playwright):
    browser = playwright.chromium.launch(headless=False)
    page = browser.new_page()

    # 导航到示例登录页 (请替换为实际的登录页URL)
    page.goto("https://example.com/login")

    # 1. 定位并填充用户名输入框
    # 假设输入框的 placeholder 是 "请输入用户名"
    # 或者其关联的 label 文本是 "用户名"
    page.get_by_placeholder("请输入用户名").fill("myusername")
    # 或者如果有一个 label:
    # page.get_by_label("用户名").fill("myusername")

    # 2. 定位并填充密码输入框
    # 假设输入框的 placeholder 是 "请输入密码"
    page.get_by_placeholder("请输入密码").fill("mypassword")
    # 或者如果有一个 label:
    # page.get_by_label("密码").fill("mypassword")

    # 3. 定位并点击登录按钮
    # 假设登录按钮的文本是 "登录" 并且它是一个 button 角色
    page.get_by_role("button", name="登录").click()

    # (可选) 验证登录是否成功，例如等待页面跳转或特定元素出现
    expect(page).to_have_url("https://example.com/dashboard")
    print("登录成功并跳转到 Dashboard 页面")

    browser.close()

with sync_playwright() as playwright:
    login_example(playwright)

调试辅助：Playwright Inspector

在不确定如何定位元素时，Playwright Inspector 是你最好的朋友。

1. 运行你的脚本，并加上 PWDEBUG=1：

   PWDEBUG=1 python your_script.py
   

2. 你的脚本会在每一步操作前暂停，并弹出一个 Inspector 窗口。
3. 在 Inspector 窗口中，你可以点击页面上的元素，它会自动生成多种定位器供你选择，包括推荐的 get_by_role、get_by_text 等。这能极大地帮助你编写正确的定位代码。

通过这些方法，你将能够高效地在 Playwright 中定位和点击页面上的任意元素！

在 Playwright 中，role（角色）是 Web 可访问性（Accessibility） 中一个非常重要的概念，也是 Playwright 推荐的首选定位策略之一。它指的是 HTML 元素所扮演的语义角色，用来描述该元素在用户界面中的用途和行为。

什么是 Web 可访问性中的role？

想象一下，你正在浏览一个网页。作为有视力的用户，你可以看到一个按钮，上面写着“提交”，或者一个链接，上面写着“了解更多”。但是，对于使用屏幕阅读器（Screen Reader）的视障用户来说，他们无法“看”到这些视觉元素。屏幕阅读器需要依靠网页的语义信息来告诉用户：“这里有一个按钮，它的文本是‘提交’”，或者“这里有一个链接，它的文本是‘了解更多’”。

这个“按钮”、“链接”就是元素的角色。

在 HTML 中，一些元素天生就带有明确的角色（隐式角色）：

• <button> 元素：其角色就是 button。
• <a> 元素：其角色通常是 link。
• <input type="text">：其角色是 textbox。
• <h1> 到 <h6>：其角色是 heading。

对于没有内置语义的通用元素（如 <div> 或 <span>），开发者可以使用 ARIA (Accessible Rich Internet Applications) 属性来明确地赋予它们角色，例如 <div role="button">。

Playwright 中的get_by_role()定位器

Playwright 利用了这种可访问性信息，提供了 page.get_by_role() 这个强大的定位器。

为什么get_by_role()是首选？

1. 健壮性 (Robustness)：

   • 不依赖 HTML 结构： 与 CSS 选择器或 XPath 不同，get_by_role() 不依赖于 DOM 元素的 id、class 或具体的嵌套结构。即使页面的 CSS 或 HTML 布局发生变化，只要元素的语义角色和可访问名称不变，定位器依然有效。
   • 模拟真实用户： 它是最接近真实用户与网站交互的方式。用户不会关心按钮的 class 是什么，他们关心的是“这是一个按钮，上面写着什么”。

2. 可维护性 (Maintainability)：

   • 代码更易读，更直观。page.get_by_role("button", name="提交") 比 page.locator(".submit-btn.large") 更清晰地表达了你想要点击的是什么。
   • 减少了因前端重构而导致的测试中断（flaky tests）。

3. 可访问性 (Accessibility)：

   • 鼓励编写更具可访问性的 Web 应用。当你的测试使用 get_by_role() 时，实际上是在验证应用程序对屏幕阅读器用户是否友好。如果 get_by_role() 找不到元素，很可能意味着该元素对于辅助技术来说不够清晰。

get_by_role()的用法

page.get_by_role(role, name, ...) 主要需要两个参数：

• role (角色名): 元素的 ARIA 角色。常见的角色有：

  • "button": 按钮
  • "link": 链接
  • "textbox": 文本输入框（包括 input type="text", textarea 等）
  • "checkbox": 复选框
  • "radio": 单选按钮
  • "heading": 标题（如 <h1>, <h2> 等）
  • "combobox": 下拉选择框（带有文本输入功能的）
  • "listbox": 列表选择框（如 <select size="multiple">）
  • "option": 列表或下拉框中的选项
  • "tab": 选项卡
  • "dialog": 对话框/模态框
  • …等等，完整的列表请参考 ARIA 规范或 Playwright 文档。

• name (可访问名称): 这是用户在视觉上或通过屏幕阅读器听到的元素文本。

  • 对于按钮和链接，通常是它们内部的文本。
  • 对于输入框，通常是与之关联的 <label> 元素的文本或 aria-label 属性的值。
  • name 参数可以使用字符串，也可以使用正则表达式 (re.compile) 进行部分匹配或更复杂的匹配。

示例：

# 定位一个文本是 "提交" 的按钮
page.get_by_role("button", name="提交").click()

# 定位一个文本为 "隐私政策" 的链接
page.get_by_role("link", name="隐私政策").click()

# 定位一个标题为 "欢迎来到我的网站" 的 h1 标签
page.get_by_role("heading", name="欢迎来到我的网站", level=1).click()

# 定位一个与标签 "用户名" 关联的文本输入框，并填充
page.get_by_role("textbox", name="用户名").fill("your_username")

# 定位一个包含 "Playwright" 字样的按钮 (使用正则表达式进行部分匹配)
import re
page.get_by_role("button", name=re.compile("Playwright")).click()

何时使用get_by_role()？

始终尝试优先使用 get_by_role()。

只有当以下情况发生时，才考虑使用其他定位器（如 get_by_text, get_by_label, get_by_test_id 或最后的 CSS/XPath）：

• 元素没有明确的可访问性角色或名称。
• 页面上的多个元素具有相同的角色和名称，导致 get_by_role() 定位不唯一。
• 你需要根据元素的特定视觉属性或复杂层级关系进行定位（这通常是糟糕的测试实践，但有时无法避免）。

到此这篇关于python中playwright实现定位和点击的多种方法的文章就介绍到这了,更多相关playwright 定位和点击内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论