Playwright有头模式下清除输入后元素非空的不稳定问题解决

问题根源 #

你的测试不稳定核心原因是目标元素为contenteditable属性的span元素，而非普通input框：

• Playwright原生clear()方法对contenteditable元素的处理逻辑和input不同，清空操作后DOM文本更新在有头模式下存在延迟
• 单独调用waitFor()仅能确保元素存在，无法等待清空操作后的文本变更完成
• Promise.all的写法属于“巧合生效”，并行执行逻辑未保证清空完成后再断言，并非稳定方案

最优解决方案 #

1. 优化清空操作（适配contenteditable元素） #

替换原生clear()，用模拟键盘全选删除的方式确保内容彻底清空，这种方式更适配富文本类的contenteditable元素：

const labelInput = qaElementPropertyEditorLabelInput();
// 点击激活元素
await labelInput.click();
// 全选内容（Control+A适配Windows/Linux，Meta+A适配Mac）
await page.keyboard.press('Control+A');
await page.keyboard.press('Delete');

2. 精准断言文本为空 #

直接断言元素的文本内容为空，利用Playwright内置的自动重试等待机制，无需额外手动waitFor()：

await expect(labelInput, "Label property field is empty now").toHaveText('');

完整稳定代码示例 #

const labelInput = qaElementPropertyEditorLabelInput();

// 激活并清空contenteditable元素
await labelInput.click();
await page.keyboard.press('Control+A');
await page.keyboard.press('Delete');

// 断言文本为空，Playwright会自动重试直到条件满足或超时
await expect(labelInput, "Label property field is empty now").toHaveText('');

为什么不用硬等待？ #

硬等待（如page.waitForTimeout(2000)）会降低测试效率，且无法适配不同环境的性能差异。Playwright的expect断言自带自动重试检查机制，会持续验证直到条件满足，这是更可靠的等待方式。

额外注意点 #

• 若你的定位器同时匹配input和span（or逻辑），建议拆分定位器，分别处理不同类型的元素，避免逻辑混淆
• 有头模式下浏览器渲染线程会占用资源，DOM更新速度比无头模式慢，因此需要基于文本/属性变化的断言，而非仅依赖元素存在性等待

内容的提问来源于stack exchange，提问作者Barış Can Ateş