如何在 Puppeteer 中选择 iframe 元素中的元素

Question

由于 ESPN 不提供 API，我正在尝试使用 Puppeteer 来抓取有关我的梦幻足球联赛的数据。但是，由于登录表单与 iframe 元素嵌套，我很难尝试使用 puppeteer 登录。

我已经去http://www.espn.com/login 并选择了 iframe。除了主要部分之外，我似乎无法选择 iframe 中的任何元素

    frame.$('.main')

这是似乎通过登录表单获取 iframe 的代码。

    const browser = await puppeteer.launch({headless:false});
    const page = await browser.newPage();

    await page.goto('http://www.espn.com/login')
    await page.waitForSelector("iframe");

    const elementHandle = await page.$('div#disneyid-wrapper iframe');
    const frame = await elementHandle.contentFrame();
    await browser.close()

我希望能够访问 iframe 元素中的用户名字段、密码字段和登录按钮。每当我尝试访问这些字段时，都会返回 null。

Answer 1

您可以像现在一样使用contentFrame 获取iframe，然后调用$。

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

await page.goto('http://www.espn.com/login')

const elementHandle = await page.waitForSelector('div#disneyid-wrapper iframe');
const frame = await elementHandle.contentFrame();
await frame.waitForSelector('[ng-model="vm.username"]');
const username = await frame.$('[ng-model="vm.username"]');
await username.type('foo');
await browser.close()

Answer 2

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

你不能使用 JavaScript 访问不同来源的，如果你能做到，那将是一个巨大的安全漏洞。对于同源策略，浏览器会阻止脚本尝试访问具有不同源的框架。 See more detailed answer here

因此，当我尝试使用 puppeteer 的方法时：Page.frames() 和 Page.mainFrame(). ElementHandle.contentFrame() 我没有返回任何 iframe 给我。问题是它是在无声中发生的，我不知道为什么它找不到任何东西。

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

Answer 3

等待 elementHandle.contentFrame() 为空：

const frame = await elementHandle.contentFrame();