fix(input): clicking an element should take into account frame position

[JoelEinbinder]

fixes #684

[aslushnikov]

The .getBoxModel returns something different for me. It probably should be fixed/enhanced first.

[JoelEinbinder]

It returns different numbers when scale is involved, which we currently don't handle in Puppeteer.

[veb]

Sorry if I'm not supposed to comment here, but I pulled this fix to try this snippet (posted by @paulirish in #618) and it does click if I comment out the outerHTML stuff.

const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch({headless: false, slowMo: 250});
const page = await browser.newPage();
await page.goto('https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml_button_test');

const frames = await page.frames();
const tryItFrame = frames.find(f => f.name() === 'iframeResult');
const framedButton = await tryItFrame.$('button');

const outerHTML = await framedButton.evaluate(e => e.parentNode.outerHTML);
console.log('the outerhtml: ', outerHTML); // to verify we're talking about the right element.. (we are.)

framedButton.click();
})();

How is the evaluate stuff supposed to work in this context?

In another script, I tried to select an input to type in some data but I keep getting framedInput.type is not a function:

    const framedInput = await iframe.$('input#fm-login-id');
    framedInput.click(usernameSelector);
    framedInput.type(username);

Am I being an idiot?!

[JoelEinbinder]

@veb Paul's code was slightly out of date. elementHandle.evaluate was dropped. elementHandle.type is coming shortly in #801.

Edit: #943 does not add elementHandle.evaluate, I got confused.

[veb]

Thanks @JoelEinbinder I've tested those changes on #801 before it was merged and they work perfectly. I'm just waiting for this one to be merged and then selecting and typing into iframes will be worked just as intended 👍