使用 Puppeteer 和 Node.JS 在网站上的 iFrame 中找不到隐藏的输入元素

Posted 2023-03-07

【中文标题】使用 Puppeteer 和 Node.JS 在网站上的 iFrame 中找不到隐藏的输入元素

【英文标题】：Can't find hidden input element in iFrame on website using Puppeteer and Node.JS

【发布时间】：2019-09-20 07:53:27

【问题描述】：

我正在尝试在（在代码中指定）输入中输入一个值，但 puppeteer 找不到选择器。输入类型是隐藏的，它可以成功找到页面上的所有其他元素，除了输入字段。编辑：我最近发现输入表单也在 iFrame 中。

我正在使用 puppeteer 和 node.js

我尝试过使用以下方法：

await page.$eval('input[name="checkout[credit_card][vault]"]', el => el.value = '000000');

和：

await page.$eval('input[name="number"]', el => el.value = 'Bob');

两者都会出现错误，提示找不到元素/选择器。

我也尝试过使用page.type();

html 看起来像这样：

<input 
  value="false" 
  size="30" 
  type="hidden" 
  name="checkout[credit_card][vault]" 
  id="checkout_credit_card_vault">

像这样

<input 
  autocomplete="cc-number" 
  id="number" 
  name="number" 
  type="tel" 
  aria-describedby="error-for-number tooltip-for-number"
  data-current-field="number" 
  class="input-placeholder-color--lvl-22" 
  placeholder="Card number">

这是 HTML 中的两段不同的代码，我试图将值输入到输入表单中。

我相信它们以某种方式与相同的输入字段相关，但我不确定。编程还是新手...

【问题讨论】：

输入字段在那个时间点可能不存在吗？您可以在拨打page.$eval 之前尝试page.waitForSelector。

您是否尝试仅使用 id 进行操作？或者您需要填写的字段超过 1 个？

我刚刚发现了一个重要因素...表单在 iFrame 中，我该如何处理？

【参考方案1】：

要访问iframe 中的元素，您首先必须找到框架并通过elementHandle.contentFrame 获取其内容框架。这将返回一个Frame 对象，该对象具有与page 本身类似的功能。您可以使用frame.$eval，其工作方式类似于page.$eval 函数（但在框架内）。

代码示例

const iframeHandle = await page.$('iframe#id-of-your-iframe'); // Change the selector
const frame = await iframeHandle.contentFrame();
await frame.$eval(/* ... */);
// ...

小幅改进

除此之外，您的代码应该可以工作。我只建议在您的代码中使用更好的选择器。如果可能，最好使用ID selector，因为 ID 在页面上是唯一的：

将input[name="checkout[credit_card][vault]"] 替换为input#checkout_credit_card_vault 将input[name="number"] 替换为input#number