Puppeteer - 如何填写iframe内的表单？

Question

我必须填写一个iframe内的表单,这里是示例页面.我无法通过简单地使用page.focus()和访问page.type().我试图通过使用获取表单iframe const formFrame = page.mainFrame().childFrames()[0],但是我无法与表单iframe进行交互.

Answer 1

如果您无法选择/找到 iFrame，请阅读以下内容：

我在查找条纹元素时遇到了问题。原因如下：

您无法使用 JavaScript 访问具有不同来源的内容，如果您可以这样做，这将是一个巨大的安全漏洞。对于同源策略，浏览器会阻止尝试访问具有不同来源的框架的脚本。在此处查看更详细的答案

因此，当我尝试使用 puppeteer 的方法时：Page.frames()并且Page.mainFrame(). ElementHandle.contentFrame()我没有向我返回任何 iframe。问题是它是默默发生的，我不明白为什么它找不到任何东西。

将这些参数添加到启动选项解决了这个问题： '--disable-web-security', '--disable-features=IsolateOrigins,site-per-process'

Answer 2

我没有弄清楚如何进入iFrame和类型,而是直接导航到IFrame URL来简化问题

https://warranty.goodmanmfg.com/registration/NewRegistration/NewRegistration.aspx?Sender=Goodman

让您的脚本直接转到上面的URL并尝试自动化,它应该工作

编辑-1:使用框架

由于简单的方法对你不起作用,我们用框架本身来做

下面是一个简单的脚本,可以帮助您入门

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('http://www.goodmanmfg.com/product-registration', {timeout: 80000});
    var frames = await page.frames();
    var myframe = frames.find(
        f =>
            f.url().indexOf("NewRegistration") > 0);
    const serialNumber = await myframe.$("#MainContent_SerNumText");
    await serialNumber.type("12345");

    await page.screenshot({path: 'example.png'});

  await browser.close();
})();

输出是

Answer 3

我自己弄清楚了。这是代码。

console.log('waiting for iframe with form to be ready.');
await page.waitForSelector('iframe');
console.log('iframe is ready. Loading iframe content');

const elementHandle = await page.$(
    'iframe[src="https://example.com"]',
);
const frame = await elementHandle.contentFrame();

console.log('filling form in iframe');
await frame.type('#Name', 'Bob', { delay: 100 });