Playwright实战技巧：多元素组合定位与智能等待策略

在自动化测试过程中，我们经常会遇到需要同时处理多个动态元素的场景。Playwright提供的locator组合定位功能，通过`and_()`和`or_()`方法，为我们提供了更智能的元素等待解决方案。本文将深入探讨这两个方法的使用场景和最佳实践。

一、传统等待方式的痛点

在传统自动化测试中，处理多个动态元素时通常需要：
# 传统方式需要多次等待
page.wait_for_selector("#element1")
page.wait_for_selector("#element2")

这种串行等待方式存在两个问题：
1. 多次等待增加总执行时间
2. 无法处理元素出现顺序不确定的情况

二、组合定位器的核心方法

Playwright的Locator类提供了两种强大的组合方式：

1. and_() 逻辑与
page.locator("#element1").and_(page.locator("#element2")).wait_for()
- 等待两个元素同时出现在DOM中
- 确保多个关联元素都加载完成后再执行后续操作
- 适用于表单验证场景（同时等待错误提示和提交按钮状态变化）

2. or_() 逻辑或
page.locator(".alert-success").or_(page.locator(".alert-error")).wait_for()
- 等待任意一个元素出现
- 完美处理不确定提示类型的情况
- 常用于验证操作结果的多状态判断

三、实战应用场景

场景1：动态加载的复杂组件
# 等待数据表格和分页控件同时加载完成
page.locator(".data-grid").and_(page.locator(".pagination")).wait_for(timeout=5000)

场景2：不确定的提示信息
# 处理可能的成功/错误提示

例如提交时可能会弹出一个提示信息，也可能不弹出，那么同时等待继续按钮以及下一步要操作的按钮，如果下一步要操作的按钮出现了直接点击，如果继续提示出现了则先点击提示

page.locator("#success-toast").or_(page.locator("#error-modal")).wait_for()

场景3：多条件表单验证
# 确保所有验证信息都出现后再提交
await (
    page.locator("#email-error")
    .and_(page.locator("#password-error"))
    .and_(page.locator("button[type='submit']:disabled"))
).wait_for()
```

通过灵活运用`and_()`和`or_()`组合定位器，可以显著提升测试脚本的稳定性和执行效率。这种声明式的等待方式不仅让代码更简洁易读，还能更好地适应现代Web应用复杂的动态交互场景。建议在实际项目中结合具体业务需求，设计合理的元素等待策略，构建更健壮的自动化测试体系。