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

Question

我试图在(代码中指定的)输入中输入一个值，但 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 中的两段不同的代码，我试图在其中将值输入到输入表单中。

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

Answer 1

要访问 iframe 内的元素，您首先必须找到该框架并通过 elementHandle.contentFrame 获取其内容框架。这将返回 Frame具有与页面本身类似功能的对象。您可以使用 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