Puppeteer

Question

我必须填写 iframe 中的表格，这里是 sample page。我无法通过简单地使用 page.focus() 和 page.type() 来访问。我试图通过使用 const formFrame = page.mainFrame().childFrames()[0] 获取表单 iframe，这有效，但我无法真正与表单 iframe 交互。

Answer 1

我不想弄清楚如何进入 iFrame 并输入内容，而是通过直接导航到 IFrame URL

来简化问题

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

让你的脚本直接转到上面URL并尝试自动化，它应该可以工作

Edit-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") > -1);
    const serialNumber = await myframe.$("#MainContent_SerNumText");
    await serialNumber.type("12345");

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

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

输出为

Answer 2

我自己想出来了。这是代码。

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 });

Answer 3

虽然你已经想通了，但我认为我有更好的解决方案。希望对你有帮助。

async doFillForm() {
    return await this.page.evaluate(() => {
       let iframe = document.getElementById('frame_id_where_form_is _present');
       let doc = iframe.contentDocument;
       doc.querySelector('#username').value='Bob';
       doc.querySelector('#password').value='pass123';
    });
}

Answer 4

如果您不能 select/find iFrame 阅读此内容：

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

You can't access an with different origin using JavaScript, it would be a huge security flaw if you could do it. For the same-origin policy browsers block scripts trying to access a frame with a different origin. See more detailed answer here

因此，当我尝试使用 puppeteer 的方法时：Page.frames() 和 Page.mainFrame(). ElementHandle.contentFrame() 我没有 return 任何 iframe 给我。问题是它悄无声息地发生，我不明白为什么它找不到任何东西。

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

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

Puppeteer - How to fill form that is inside an iframe?