How to find / click elements inside iframe in puppeteer? - node.js

Question

Setup:
puppeteer - puppeteer#13.7.0
nodejs - v10.19.0
Puppetter launch setup:
"args" :[
'--ignore-certificate-errors',
'--ignore-certifcate-errors-spki-list',
'--no-sandbox',
'--disable-gpu',
'--start-maximized',
'--disable-setuid-sandbox',
'--disable-dev-shm-usage',
'--window-size=1200,800',
'--single-process',
'--disable-infobars',
'--disable-web-security',
'--disable-features=IsolateOrigins,site-per-process',
'--window-position=0,0',
'--no-zygote',
'--no-sandbox',
'--user-agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36"',
]
I'm trying to upload image onto Gmail -
The "image uploader" is iframe that gets dynamically loaded when you click on "insert photo" icon in the panel where you type receipient / subject / body / etc.
When I query the iframe, I can find the div (including searching by textContent, and getting the ID) but for some reason, theres two things i cannot do
1) get the bounding rect
2) return the element handle to puppetteer
For some reason, getting passing the element handle from inside frame.evalute() passes null value, so i can't call ".click()". I thought, maybe i could get the boundaries, and call page.mouse.click() based on coordinated returned but that also fails.
Here's what I did, with comments as explainers:
////////////////////////////////////////
// iframe url is actually docs.google.com
////////////////////////////////////////
const frame = await page.frames().find(f => f.url().startsWith('https://docs.google.com/'));
let upload_tab = await frame.evaluate(() => {
let upload = [...document.querySelectorAll('div[role="tab"]')].filter(
d=>d.textContent=="Upload"
);
////////////////////////
// this works
////////////////////////
console.log(upload[0].id);
////////////////////////
// this works
////////////////////////
console.log(upload[0].textContent);
////////////////////////
// this fails
////////////////////////
console.log(upload[0].getBoundingClientRect());
////////////////////////////////////////////////
// this fails (return "upload_tab" outside of
// page.evalute() shows up as NULL)
////////////////////////////////////////////////
return upload[0];
});
////////////////////////
// this fails b/c upload_tab is null
////////////////////////
await upload_tab.click();
Questions:
how is it that upload[0].getBoundingClientRect() fails while upload[0].textContent is working?
how can I pass the element from frame to pass to puppeteer?
any suggestions as to workarounds?