How to select elements within an iframe element in Puppeteer
You can get the iframe using contentFrame
as you are doing now, and then call $
.
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()
I had an issue with finding stripe elements. The reason for that is the following:
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
Therefore when I tried to use puppeteer's methods:Page.frames()
and Page.mainFrame().
ElementHandle.contentFrame()
I did not return any iframe to me. The problem is that it was happening silently and I couldn't figure out why it couldn't find anything.
Adding these arguments to launch options solved the issue: '--disable-web-security','--disable-features=IsolateOrigins,site-per-process'
await elementHandle.contentFrame() is null:
const frame = await elementHandle.contentFrame();