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

Question

I'm trying to use Pupeteer to respond to a popup dialog box, but can't find a way to click the OK button which is just an image inside a <span>

This is what I've tried so far:

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

But the button is not found.

This is the pertinent section of the 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>

This is what the page looks like when inspected in 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

I was able to solve this by using $eval as follows:

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