如何单击没有名称或 ID 的 Span

Question

我正在尝试使用 Pupeteer 来响应弹出对话框，但找不到单击“确定”按钮的方法，它只是 <span>

中的一个图像

这是我目前尝试过的方法：

  const [button] = await frame.$x('/html/body/div/div[4]/div[2]/div/span[1]');
  
  if (button) {
       await button.click()
  }

但是找不到按钮。

这是html的相关部分：

   <div class="vtm_text vtm_exportDialog"><input type="hidden" value="save">
      ...
      <span class="vtmBtn" style="min-width: 60px; padding: 3px;">OK</span>
      <span class="vtmBtn" style="min-width: 60px; padding: 3px;">Cancel</span>
    </div>

这是在 Chrome 中检查页面时的样子：

Answer 1

const [button] = await frame.$x("/html/body/div/div[4]/div[2]/div/span[1]");

async function pop_up() {
  if (button) {
    await button.click();
  }
}

document.getElementsByClassName("vtmBtn").addEventListener("click", (e) => {
  var img = document.createElement("img");
  img.setAttribute("src", "");
  //   in the empty string put the path of the image you want

  e.target.appendChild(img);
});

Answer 2

我使用 $eval 解决了这个问题，如下所示：

await frame.$eval('span[class=vtmBtn]', el => el.click());

如何单击没有名称或 ID 的 Span

How to Click a Span Without a Name or ID

javascript

web-scraping

puppeteer