基于Selenium与Playwright的浏览器功能测试实战：从环境搭建到自动化脚本编写

共计 1851 个字符，预计需要花费 5 分钟才能阅读完成。

背景痛点：手工测试的困境

在快速迭代的 Web 开发中，传统手工测试面临三大致命伤：

• 跨浏览器兼容性 ：同一个按钮在 Chrome 显示正常，到 Firefox 可能错位甚至无法点击。开发者需要反复在不同浏览器中手动验证，耗时且容易遗漏。

• 动态内容加载 ：现代前端框架（如 React/Vue）大量使用异步加载，手工测试时经常遇到 ” 元素突然消失 ” 或 ” 点击无响应 ” 的情况。

• 测试覆盖率瓶颈 ：涉及多步骤操作（如电商下单流程）时，手工执行 10 次测试就可能出现 3 次不同结果，难以保证稳定性。

技术选型：Selenium vs Playwright

Selenium WebDriver

• 优势 ：
• 最成熟的解决方案，社区资源丰富
• 支持所有主流浏览器（包括 Edge 和 Safari）

• 稳定的 WebDriver 协议

• 劣势 ：

• 执行速度较慢（每次命令都需要 HTTP 请求）
• 处理动态内容需要额外等待逻辑

Playwright

• 优势 ：
• 原生支持自动等待（auto-waiting）
• 可录制操作生成代码

• 跨浏览器统一 API

• 劣势 ：

• 对老旧浏览器支持有限
• 部分高级功能文档不全

核心实现：Python 实战示例

元素定位策略

# CSS 选择器推荐写法（比 XPath 更抗 DOM 变化）login_button = page.locator('button:has-text(" 登录 ")')

# 复合定位策略（Playwright 特有）search_box = page.get_by_role("searchbox")

等待机制对比

# 显式等待（推荐）element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "dynamic-element"))
)

# Playwright 的自动等待（更简洁）page.click("button#submit")  # 自动等待元素可点击 

登录态保持

# Selenium 保存 cookies
import pickle
pickle.dump(driver.get_cookies(), open("cookies.pkl","wb"))

# Playwright 直接创建上下文
context = browser.new_context(storage_state="auth.json")

生产级优化方案

Pytest 测试结构

tests/
├── conftest.py    # 全局 fixture
├── login/
│   ├── test_valid.py
│   └── test_invalid.py
└── checkout/
    ├── test_guest.py
    └── test_member.py

并行执行配置

# pytest.ini 配置
[pytest]
addopts = -n auto  # 自动检测 CPU 核心数 

失败处理机制

# 自动截图装饰器
def screenshot_on_failure(func):
    def wrapper(*args, **kwargs):
        try:
            return func(*args, **kwargs)
        except Exception as e:
            page.screenshot(path=f"failures/{func.__name__}.png")
            raise
    return wrapper

三大避坑指南

1. iframe 切换问题 ：
2. 错误做法：直接定位 iframe 内元素

3. 正确方案：

   frame = page.frame_locator("iframe#payment")
   frame.locator("button#confirm").click()

4. XPath 定位失效 ：

5. 避免使用绝对路径如 /html/body/div[3]/button

6. 改用属性定位：//button[@data-testid='submit']

7. 随机超时故障 ：

8. 调整默认超时时间：playwright.config.ts 中设置 timeout: 30000

代码规范要点

• 所有函数添加类型注解：

  def login(username: str, password: str) -> bool:
      """ 执行登录流程
      Args:
          username: 登录用户名
          password: 对应密码
      Returns:
          是否登录成功
      """

• 异常处理模板：

  try:
      element.click()
  except TimeoutException:
      logger.error("元素定位超时")
      raise TestFailed("关键操作超时")

开放讨论

当测试用例数突破 1000 时，如何设计更智能的元素定位策略？是否应该引入 AI 图像识别辅助传统 DOM 定位？欢迎在评论区分享你的实战经验。