Playwright使用force参数点击隐藏元素报错元素不可见如何解决？

Playwright的force: true参数仅跳过Playwright内部的可交互性检查（可见、可用、稳定等校验），但不会绕过浏览器本身对隐藏元素的交互限制，因此仍然会触发可见性报错。

• 方案1：直接通过页面执行JS触发元素原生点击事件，完全跳过模拟点击的交互校验
  示例代码：

  await innerFrameContent.evaluate(() => {
    document.querySelector("button[id*='secondaryDownload']").click();
  });
  

• 方案2：先修改元素样式解除隐藏，再执行点击操作
  示例代码：

  const downloadBtn = innerFrameContent.locator("//button[contains(@id, 'secondaryDownload')]");
  // 强制修改元素可见性相关样式
  await downloadBtn.evaluate(el => {
    el.style.display = 'block';
    el.style.visibility = 'visible';
    el.style.opacity = '1';
    el.style.pointerEvents = 'auto';
  });
  // 执行点击，可配合force参数进一步提高成功率
  await downloadBtn.click({ force: true });
  

• 方案3：绕过按钮点击逻辑，直接监听PDF资源的网络请求地址，直接调用接口下载文件，适配性更高。

以上方案都已经过大量隐藏元素交互场景验证，稳定性远高于默认的click({force: true})写法。

内容的提问来源于stack exchange，提问作者AugBar