【Playwright系列】二、（3）playwright常用的功能

在第三阶段，我们将深入学习 Playwright 的核心功能，包括元素定位、交互操作、等待机制、网络拦截、文件操作、截图与录屏、浏览器上下文等。这些功能是编写高效、稳定自动化测试脚本的基础。

1. 元素定位

元素定位是自动化测试的核心，Playwright 提供了多种定位元素的方式。

1.1 CSS 选择器

• 通过元素的标签名、类名、ID、属性等定位元素。
• 示例：

  page.click("button")  # 通过标签名定位
  page.fill(".username", "testuser")  # 通过类名定位
  page.click("#submit-button")  # 通过 ID 定位
  page.click("[type='submit']")  # 通过属性定位
  

1.2 XPath

• 通过 XPath 表达式定位元素。
• 示例：

  page.click("//button[@id='submit']")  # 通过 XPath 定位
  

1.3 文本选择器

• 通过元素的文本内容定位元素。
• 示例：

  page.click("text='Login'")  # 通过文本内容定位
  page.click("text=/Log\s*in/i")  # 通过正则表达式匹配文本
  

1.4 组合选择器

• 组合多个选择器定位元素。
• 示例：

  page.click(".container >> text='Submit'")  # 组合 CSS 选择器和文本选择器
  

2. 交互操作

Playwright 提供了丰富的 API 来模拟用户操作。

2.1 点击元素

• 使用 page.click(selector) 点击元素。
• 示例：

  page.click("#submit-button")
  

2.2 输入文本

• 使用 page.fill(selector, text) 在输入框中填写文本。
• 示例：

  page.fill("#username", "testuser")
  

2.3 获取元素文本

• 使用 page.text_content(selector) 获取元素的文本内容。
• 示例：

  text = page.text_content(".welcome-message")
  print(text)
  

2.4 拖拽元素

• 使用 page.drag_and_drop(source, target) 拖拽元素。
• 示例：

  page.drag_and_drop("#source", "#target")
  

3. 等待机制

Playwright 提供了多种等待机制，确保元素加载完成后再进行操作。

3.1 自动等待

• Playwright 会自动等待元素出现、可操作等。
• 示例：

  page.click("#submit-button")  # 自动等待按钮可点击
  

3.2 显式等待

• 使用 page.wait_for_selector(selector) 显式等待元素出现。
• 示例：

  page.wait_for_selector(".welcome-message")
  

3.3 等待导航完成

• 使用 page.goto(url, wait_until="load") 等待页面加载完成。
• 示例：

  page.goto("https://example.com", wait_until="domcontentloaded")
  

4. 网络拦截

Playwright 允许拦截和修改网络请求，用于模拟不同的网络环境。

4.1 拦截请求

• 使用 page.route(url, handler) 拦截请求。
• 示例：

  def handle_route(route):
      if route.request.resource_type == "image":
          route.abort()  # 拦截图片请求
      else:
          route.continue_()
  
  page.route("**/*", handle_route)
  

4.2 模拟 API 响应

• 使用 route.fulfill(status, body) 模拟 API 响应。
• 示例：

  def handle_route(route):
      if route.request.url.endswith("/api/data"):
          route.fulfill(status=200, body='{"data": "mocked"}')
      else:
          route.continue_()
  
  page.route("**/*", handle_route)
  

5. 文件上传与下载

Playwright 支持文件上传和下载操作。

5.1 文件上传

• 使用 page.set_input_files(selector, files) 上传文件。
• 示例：

  page.set_input_files("#file-input", "path/to/file.txt")
  

5.2 文件下载

• 使用 page.on("download", handler) 监听下载事件。
• 示例：

  with page.expect_download() as download_info:
      page.click("#download-button")
  download = download_info.value
  print(download.path())
  

6. 截图与录屏

Playwright 支持截图和录屏功能，用于调试和记录测试过程。

6.1 截图

• 使用 page.screenshot(path="screenshot.png") 截图。
• 示例：

  page.screenshot(path="example.png")
  

6.2 录屏

• 使用 browser.new_context(record_video_dir="videos/") 录屏。
• 示例：

  context = browser.new_context(record_video_dir="videos/")
  page = context.new_page()
  page.goto("https://example.com")
  context.close()
  

7. 浏览器上下文与多用户场景

Playwright 支持浏览器上下文，用于模拟多用户场景。

7.1 创建浏览器上下文

• 使用 browser.new_context() 创建浏览器上下文。
• 示例：

  context = browser.new_context()
  page = context.new_page()
  

7.2 模拟多用户

• 使用多个浏览器上下文模拟多用户。
• 示例：

  context1 = browser.new_context()
  page1 = context1.new_page()
  page1.goto("https://example.com")
  
  context2 = browser.new_context()
  page2 = context2.new_page()
  page2.goto("https://example.com")
  

8. 实践任务

任务 1：元素定位与交互

• 编写脚本，使用 CSS 选择器和 XPath 定位元素，并模拟点击、输入等操作。

任务 2：等待机制

• 编写脚本，使用显式等待和自动等待机制，确保元素加载完成后再进行操作。

任务 3：网络拦截

• 编写脚本，拦截网络请求并模拟 API 响应。

任务 4：文件上传与下载

• 编写脚本，模拟文件上传和下载操作。

任务 5：截图与录屏

• 编写脚本，截图和录屏记录测试过程。

任务 6：多用户场景

• 编写脚本，使用浏览器上下文模拟多用户场景。

9. 总结

通过第三阶段的学习，你应该掌握了 Playwright 的核心功能，包括元素定位、交互操作、等待机制、网络拦截、文件操作、截图录屏以及浏览器上下文。以下是关键点总结：

1. 元素定位: 使用 CSS 选择器、XPath、文本选择器等定位元素。
2. 交互操作: 模拟点击、输入、拖拽等用户操作。
3. 等待机制: 使用自动等待和显式等待确保元素加载完成。
4. 网络拦截: 拦截和修改网络请求，模拟不同的网络环境。
5. 文件操作: 实现文件上传和下载。
6. 截图与录屏: 记录测试过程，方便调试和分析。
7. 浏览器上下文: 模拟多用户场景。

通过掌握这些核心功能，你将能够编写高效、稳定的自动化测试脚本，适用于各种 Web 应用场景。