我必须填写 iframe 内的表格,这里是示例页面。我无法通过简单地使用page.focus()
and访问page.type()
。我试图通过使用来获取表单 iframe const formFrame = page.mainFrame().childFrames()[0]
,它可以工作,但我不能真正与表单 iframe 交互。
4 回答
我自己想通了。这是代码。
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 });
我没有弄清楚如何进入 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") > -1);
const serialNumber = await myframe.$("#MainContent_SerNumText");
await serialNumber.type("12345");
await page.screenshot({ path: 'example.png' });
await browser.close();
})();
输出是
如果您无法选择/找到 iFrame,请阅读以下内容:
我在查找条纹元素时遇到了问题。原因如下:
您无法使用 JavaScript 访问具有不同来源的内容,如果您能做到,那将是一个巨大的安全漏洞。对于同源策略,浏览器会阻止脚本尝试访问具有不同源的框架。在此处查看更详细的答案
因此,当我尝试使用 puppeteer 的方法时:Page.frames()
并且Page.mainFrame().
ElementHandle.contentFrame()
我没有返回任何 iframe 给我。问题是它正在悄无声息地发生,我无法弄清楚为什么它找不到任何东西。
将这些参数添加到启动选项解决了这个问题:
'--disable-web-security',
'--disable-features=IsolateOrigins,site-per-process'
虽然你已经想通了,但我认为我有更好的解决方案。希望能帮助到你。
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';
});
}