如何使用Playwright点击<input type="search">的清除伪元素？

方法1：模拟键盘快捷键 #

大部分浏览器的搜索输入框支持按Esc键清除内容，直接通过Playwright触发这个按键即可达到和点击清除按钮一致的效果：

await page.locator('input[type="search"]').press('Escape');

方法2：直接操作输入框内容（绕过伪元素） #

伪元素不属于DOM节点，Playwright无法直接定位，可直接清空输入框值并触发必要事件：

// 直接填充空值
await page.locator('input[type="search"]').fill('');

// 若需要触发input/change事件，用evaluate执行DOM操作
await page.evaluate(() => {
  const searchInput = document.querySelector('input[type="search"]');
  if (searchInput) {
    searchInput.value = '';
    searchInput.dispatchEvent(new Event('input'));
    searchInput.dispatchEvent(new Event('change'));
  }
});

方法3：定位浏览器原生清除按钮（针对Shadow DOM结构） #

部分浏览器会将清除按钮放在Shadow DOM中，可尝试穿透Shadow DOM定位：

// Chrome浏览器下的示例，不同浏览器选择器可能有差异
await page.locator('input[type="search"]').shadowLocator('#clear').click();

方法4：模拟坐标点击 #

如果以上方法都不适用，可获取输入框位置，计算清除按钮的大致坐标后模拟点击：

const inputBox = await page.locator('input[type="search"]').boundingBox();
if (inputBox) {
  // 清除按钮一般在输入框右侧，偏移量根据实际布局调整
  await page.mouse.click(inputBox.x + inputBox.width - 20, inputBox.y + inputBox.height / 2);
}

内容的提问来源于stack exchange，提问作者I.sh.