如何使用 puppeteer 单击 display:none 元素？

Question

我想单击display 属性为none 的元素。 我怎样才能做到这一点？

代码：

page.click(".foo");

Answer 1

您可以使用 JavaScript click 函数。该函数会触发元素点击事件，不关心元素是否可见。

你需要使用page.evaluate在页面内执行。

示例：

await page.evaluate(() => {
  document.querySelector('.foo').click();
});

Answer 2

问题仍然存在，对我没有用：await page.evaluate(() => { document.querySelector('.foo').click(); });

花了至少半天后，我做了一个小技巧，将 CSS 'display' 属性更改为 'inherit'，click() 一个元素，并将 CSS 'display' 恢复为原始。

  let inputCheckBox = await document.querySelector("input[type='checkbox']");

  const cssDisplay = inputCheckBox.style.display;
  if (!cssDisplay || 'none' === cssDisplay) {
     inputCheckBox.style.display = 'inherit';
  }

  await inputCheckBox.click();

  if (cssDisplay !== inputCheckBox.style.display) {
     inputCheckBox.style.display = cssDisplay;
  }