“错误：节点不可点击或不是 HTMLElement”当我尝试按名称获取输入时 Puppeteer答案

【问题标题】："Error: Node is either not clickable or not an HTMLElement" Puppeteer when i tried to get input by name“错误：节点不可点击或不是 HTMLElement”当我尝试按名称获取输入时 Puppeteer
【发布时间】：2022-01-31 18:03:15
【问题描述】：

这是我的 HTML 结构：

<div id="divImporte">
  <p class="btn01">
    <input type="button" name="Enviar Tasas" value="Enviar Tasas">
  </p>
</div>

这就是我尝试选择输入的方式：

第一种方式：

const buttonTasas = await page.$$("input[type='button'][value='Enviar Tasas']");

第二种方式：

const buttonTasas = await page.waitForSelector("input[type='button'][value='Enviar Tasas']");

然后点击它：

if (buttonTasas && buttonTasas.length > 0) {
  await buttonTasas[0].click();
}

我收到了这个错误：

"Error: Node is either not clickable or not an HTMLElement"

我该如何解决？谢谢

【问题讨论】：

小心你的“第一种方式”返回一个数组，而2nd way 没有，否则这看起来是正确的。尝试添加{visible: true} 作为waitForSelector 的第二个参数，以确保它等待元素可见，并尝试在单击带有await page.waitForTimeout(1000) 的元素之前添加一些小的延迟，以确保元素已加载
嗨@lezhumain 我尝试使用超时和 {visible: true} 作为第二个参数，但我得到了同样的错误。当我在 buttonTasas 中使用 node.warn 时，我得到了这个：JSHandle@node

标签： javascript node.js selenium puppeteer node-red

【解决方案1】：

有时puppeteer 出于某种原因无法单击，因此在仔细检查buttonTasas 不为空并尝试在调用click() 方法之前添加一些延迟后，您可以尝试以下解决方法来调用页面中直接点击功能：

page.evaluate((btnSelector) => {
    // this executes in the page
    document.querySelector(btnSelector).click();
}, "input[type='button'][value='Enviar Tasas']");

或者你可以直接使用该元素吗：

page.evaluate((btn) => {
    // this executes in the page
    btn.click();
}, buttonTasas);

【讨论】：

【解决方案2】：

浏览器的 UI 工具通常存在空格问题。尝试使用不带任何空格或换行符的表达式搜索元素。您可以在 CSS 表达式中使用 *= 在字符串中查找单词：

await page.$$("input[type='button'][value*='Enviar']");

或

await page.$$("input[type='button'][value*='Enviar'][value*='Tasas']");

【讨论】：