Playwright初学指南 (3)：深入解析交互操作

2025全面指南：掌握20多种实战场景交互，破解异步操作难题

一、为什么交互操作失败率高达60%？

在Web自动化中，交互操作失败的主要原因是：

1. 元素状态不稳定（45%）：元素未准备好时进行操作

2. 异步加载未完成（30%）：操作后页面未完全响应

3. 环境差异（15%）：不同设备/网络导致行为不一致

4. 框架缺陷（10%）：操作逻辑不合理

Playwright通过智能等待系统和自动重试机制，将成功率提升至98%！

二、核心交互操作全景图

 

三、基础交互：三大金刚操作详解

1. 智能点击（Click）

真实场景问题：按钮被遮挡/加载中状态

// 最佳实践：带状态检测的点击
await page.locator('button.submit')
  .click({
    force: false,       // 禁止强制点击（避免穿透）
    trial: false,       // 非测试模式（真实操作）
    timeout: 15000,     // 自定义超时（毫秒）
    position: { x: 10, y: 10 } // 点击相对坐标
  });

高级技巧：

# 安全点击（带自动重试）
async def safe_click(locator, attempts=3):
    for i in range(attempts):
        try:
            await locator.click()
            return True
        except Exception as e:
            if i == attempts-1: raise e
            await page.wait_for_timeout(1000)

2. 智能输入（Fill）

解决痛点：输入框动态加载/内容清空不彻底

// 三步安全输入法
await locator.clear();                 // 清空内容
await locator.pressSequentially(text, { 
  delay: 100                          // 模拟真人输入
});
await locator.press('Enter');          // 提交表单

特殊场景处理：

// 富文本编辑器输入（Quill/TinyMCE）
const editor = page.frameLocator('.editor-frame').locator('body');
await editor.type('Hello, Playwright!');

// 禁用JavaScript的输入框
await page.$eval('#legacy-input', el => el.value = 'text');

3. 选择操作（Select）

多维度选择方案：

选择方式	代码示例	适用场景
文本匹配	selectOption('label=Option 1')	选项文本稳定
值匹配	selectOption({ value: 'opt1' })	动态生成选项
多选	selectOption(['opt1', 'opt2'])	批量操作
索引定位	selectOption({ index: 2 })	无标识符选项

# 多级联动选择