Using Puppeteer like frontend JavaScript
Frontend JavaScript vs Puppeteer
This is how you can access the content of an <iframe>, which must belong to the same ancestor, and edit its content, using JavaScript on the frontend:
const inputOutsideIframe = document.querySelector('#some_input')
const iframe = document.querySelector('#some_iframe')
const inputInsideIframe = iframe.contentWindow.document.querySelector('#some_input')
inputInsideIframe.value = inputOutsideIframe.value
This is how you could do the same thing using Puppeteer:
const puppeteer = require('puppeteer')
const browser = await puppeteer.launch({
headless: false,
})
const pages = await browser.pages()
const page = pages[0]
await page.goto('https://example.com')
const inputOutsideIframe = await page.$('#some_input')
const inputOutsideIframeValueHandle = await inputOutsideIframe.getProperty('value')
const inputOutsideIframeValue = inputOutsideIframeValueHandle._remoteObject.value
const iframe = await page.$('#some_iframe')
const iframeExecutionContext = await iframe.executionContext()
const iframeWindow = iframeExecutionContext.frame()
const typeOptions = {delay: 100}
const inputInsideIframe = await iframeWindow.$('#some_input')
await inputInsideIframe.type(inputOutsideIframeValue, typeOptions)
dptoledo@pm.me