玩转playwright之操作篇

如果你已经完成了 元素定位 的认知，接下来可以按照以下逻辑逐步深入，将 Playwright 的功能模块化为系列文章。以下是建议的内容结构以及每篇文章的主题和代码示例。

---

系列文章大纲

1. 第一篇：元素定位
   已完成，介绍了 Playwright 的核心定位方法，包括 CSS 选择器、文本定位、角色定位、XPath、data-testid 等内容。

2. 第二篇：操作元素
   重点介绍如何对定位到的元素进行操作，例如点击、输入文本、清空输入框、悬停、拖拽、右键点击等。

3. 第三篇：等待机制与元素状态检查
   详细讲解 Playwright 的自动等待机制、显式等待、元素状态检查（可见、可用、已选中等），以及如何处理动态加载的页面。

4. 第四篇：处理对话框和弹窗
   讲解如何处理浏览器弹窗（如 alert、confirm、prompt）、新窗口或标签页的切换。

5. 第五篇：表单处理和文件上传/下载
   介绍表单操作：输入框、单选框、复选框、下拉菜单，以及文件上传和文件下载的实现。

6. 第六篇：鼠标和键盘操作
   深入讲解鼠标操作（拖拽、双击、悬停）和键盘操作（输入快捷键、组合键）。

7. 第七篇：截图与录屏
   介绍如何对页面或元素进行截图，以及页面录屏等功能。

8. 第八篇：网络请求拦截与监控
   如何监听和拦截 HTTP 请求与响应，模拟请求数据，以及 Mock API。

---

第二篇：操作元素

目标：在这一篇文章中，重点介绍 Playwright 如何对定位到的元素进行操作，包括：

• 点击
• 输入
• 清空输入框
• 悬停
• 右键点击
• 双击
• 拖拽
• 滚动到元素可见

---

实际内容与代码示例

1. 点击元素

如何点击按钮、链接等元素：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    
    # 打开页面
    page.goto("https://example.com")
    
    # 点击按钮
    button = page.locator("button#submit")
    button.click()
    
    # 点击链接
    link = page.locator("text=Learn more")
    link.click()
    
    browser.close()

---

2. 输入文本

在输入框中输入文本：

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    
    page.goto("https://example.com")
    
    # 输入文本
    input_box = page.locator("input#username")
    input_box.fill("my_username")
    
    # 追加文本
    input_box.type("123")
    
    browser.close()

---

3. 清空输入框

清空输入框的内容：

# 清空输入框
input_box = page.locator("input#username")
input_box.fill("")  # 或者直接新的 fill 操作

---

4. 悬停

悬停在某个元素上：

# 悬停到元素
menu_item = page.locator("button#menu")
menu_item.hover()

---

5. 右键点击

右键点击元素：

# 右键点击
element = page.locator("button#options")
element.click(button="right")

---

6. 双击元素

双击某个元素：

# 双击操作
element = page.locator("div#double-click-target")
element.dblclick()

---

7. 拖拽元素

将一个元素拖拽到另一个位置：

# 拖拽某个元素到目标位置
source_element = page.locator("#source")
target_element = page.locator("#target")
source_element.drag_to(target_element)

---

8. 滚动到元素可见

滚动页面使元素可见：

# 滚动到元素可见
element = page.locator("#hidden-element")
element.scroll_into_view_if_needed()

---

示例项目代码

以下是一个完整的示例，综合运用了上述操作：

from playwright.sync_api import sync_playwright

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

    # 打开页面
    page.goto("https://example.com")

    # 点击按钮
    page.locator("button#submit").click()

    # 输入用户名和密码
    page.locator("input#username").fill("test_user")
    page.locator("input#password").fill("secure_password")

    # 点击登录
    page.locator("button#login").click()

    # 悬停到菜单
    page.locator("button#menu").hover()

    # 滚动到页面底部
    page.locator("footer").scroll_into_view_if_needed()

    # 拖动元素
    source = page.locator("#drag-source")
    target = page.locator("#drag-target")
    source.drag_to(target)

    browser.close()

with sync_playwright() as playwright:
    run(playwright)

---

小结

在这一篇文章中，你可以帮助读者掌握 Playwright 的核心操作方法。通过这些方法，读者可以完成对页面的基本交互操作，为后续的内容（如等待机制、弹窗处理等）打下基础。

---

下一篇建议：等待机制与元素状态检查

在下一篇文章中，可以介绍 Playwright 的 自动等待机制 和 显式等待，包括如何检查元素是否可见、启用、选中，以及如何处理动态加载的页面。结合实际场景给出代码示例，例如：

• 等待按钮可点击：

  button = page.locator("button#submit")
  button.wait_for(state="visible")
  button.click()
  

• 检查元素状态：

  if page.locator("button#submit").is_enabled():
      print("按钮已启用")
  

通过逐步深入，帮助读者从基础到进阶，全面掌握 Playwright 的功能。