Issue 1:
Context:

Playwright Version: 1.14

Operating System: Windows

Node.js version: v14.15.4

Browser: WebKit emulator

System:

OS: Windows 10 10.0.19042

Memory: 4.70 GB / 15.86 GB

Binaries:

Node: 14.15.4 - C:\Program Files\nodejs\node.EXE

Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD

npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD

Languages:

Bash: 4.4.19 - C:\Program Files\Git\usr\bin\bash.EXE

npmPackages:

playwright: ^1.14.0 => 1.14.0

Describe the bug

Running test using emulator (iPad11-webkit, Galaxy Tab 4 - chromium) as shown:

use: {

headless: false,

screenshot: 'on',

browserName: 'webkit',

...devices['iPad Pro 11'],

},

use: {

headless: false,

screenshot: 'on',

browserName: 'chromium',

...devices['Galaxy Tab S4'],

},

the execution generates the following error

page.click: Evaluation failed: TypeError: undefined is not an object (evaluating 'e.nodeType')
=========================== logs ===========================
waiting for selector "hz-navbar hz-base-avatar div[class="avatar"]"
selector resolved to visible <div class="avatar" _ngcontent-otn-c115="">…</div>
attempting click action
waiting for element to be visible, enabled and stable
element is not stable - waiting...
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (726.67,52.12)
============================================================

Using Chrome passes the test with different display settings but this only happens when using emulator. Test case:

Navigate to a page

page.click(avatar)

when watching the test on the emulator:

page is loaded

avatar is not in view but present in the DOM

visually, scrolling doesn't seem to happen as element is never shown in view

Issue 2:
Context:

Playwright Version: 1.14

Operating System: macOS

Node.js version: 14.17.5

Browser: Electron 12.0.15

Code Snippet

await frame.click(".Icon.new-dock-tab");
await frame.click("li.MenuItem.create-resource-tab"); // This line throws

Describe the bug

I have been converting my team's old spectron tests to use playwright and ran into this very strange case where if I tried to execute the second line above it would consistently throw the following error:

frame.click: Evaluation failed: TypeError: Cannot read property 'nodeType' of undefined
at u.previewNode (<anonymous>:3:44845)
at u.checkHitTargetAt (<anonymous>:3:44014)
at eval (eval at evaluate (:3:1339), <anonymous>:10:23)
at t.default.evaluate (<anonymous>:3:1362)
at t.default.<anonymous> (<anonymous>:1:44)
=========================== logs ===========================
waiting for selector "li.MenuItem.create-resource-tab"
selector resolved to visible <li tabindex="0" class="MenuItem create-resource-tab">…</li>
attempting click action
waiting for element to be visible, enabled and stable
element is visible, enabled and stable
scrolling into view if needed
done scrolling
checking that element receives pointer events at (483.69,898.25)

After doing a lot of diving into the playwright codebase narrowed down why this was happening to the fact that the pointer events provided in the logs above don't actually intersect with the bounding box of the element selected by the specified selector above.

If I get the bounding box from the from chrome's devtools then I get the following:

{
"bottom": 801.5,
"height": 34,
"left": 336.25,
"right": 481.140625,
"top": 767.5,
"width": 144.890625,
"x": 336.25,
"y": 767.5
}

Note, this is all happening within an iframe, if that makes any difference. And I know that the component in question jumps around a bit. I tried adding in some await frame.waitForTimeout calls before attempting the click, but that didn't work.

However, I have found that passing in { position: { x: 0, y: 0 } } as options to that click doesn't manifest this bug, probably because the bug is in ElementHandle._clickablePoint and not ElementHandle._offsetPoint.