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

Question

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

我试过使用以下方法：

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

和：

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

并且都以错误结束，提示未找到 element/selector。

我也试过使用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. This will return a Frame object which has similar functions like the page itself. You can use the 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

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

Can't find hidden input element in iFrame on website using Puppeteer and Node.JS

html

javascript

node.js

puppeteer