<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.14</li>
<li>Operating System: Windows</li>
<li>Node.js version: v14.15.4</li>
<li>Browser:  WebKit emulator</li>
</ul>
<h2 dir="auto">System:</h2>
<ul dir="auto">
<li>OS: Windows 10 10.0.19042</li>
<li>Memory: 4.70 GB / 15.86 GB</li>
</ul>
<h2 dir="auto">Binaries:</h2>
<ul dir="auto">
<li>Node: 14.15.4 - C:\Program Files\nodejs\node.EXE</li>
<li>Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD</li>
<li>npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD</li>
</ul>
<h2 dir="auto">Languages:</h2>
<ul dir="auto">
<li>Bash: 4.4.19 - C:\Program Files\Git\usr\bin\bash.EXE</li>
</ul>
<h2 dir="auto">npmPackages:</h2>
<ul dir="auto">
<li>playwright: ^1.14.0 =&gt; 1.14.0</li>
</ul>
<p dir="auto"><strong>Describe the bug</strong><br>
Running test using emulator (iPad11-webkit, Galaxy Tab 4 - chromium) as shown:<br>
use: {<br>
headless: false,<br>
screenshot: 'on',<br>
browserName: 'webkit',<br>
...devices['iPad Pro 11'],<br>
},<br>
use: {<br>
headless: false,<br>
screenshot: 'on',<br>
browserName: 'chromium',<br>
...devices['Galaxy Tab S4'],<br>
},</p>
<p dir="auto">the execution generates the following error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
page.click: Evaluation failed: TypeError: undefined is not an object (evaluating 'e.nodeType')
=========================== logs ===========================
waiting for selector &quot;hz-navbar hz-base-avatar div[class=&quot;avatar&quot;]&quot;
  selector resolved to visible &lt;div class=&quot;avatar&quot; _ngcontent-otn-c115=&quot;&quot;&gt;…&lt;/div&gt;
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)
============================================================"><pre class="notranslate"><code class="notranslate">
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 &lt;div class="avatar" _ngcontent-otn-c115=""&gt;…&lt;/div&gt;
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)
============================================================
</code></pre></div>
<p dir="auto">Using Chrome passes the test with different display settings but this only happens when using emulator. Test case:</p>
<ul dir="auto">
<li>Navigate to a page</li>
<li>page.click(avatar)</li>
</ul>
<p dir="auto">when watching the test on the emulator:</p>
<ul dir="auto">
<li>page is loaded</li>
<li>avatar is not in view but present in the DOM</li>
<li>visually, scrolling doesn't seem to happen as element is never shown in view</li>
</ul>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.14</li>
<li>Operating System: macOS</li>
<li>Node.js version: 14.17.5</li>
<li>Browser: Electron 12.0.15</li>
</ul>
<p dir="auto"><strong>Code Snippet</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="await frame.click(&quot;.Icon.new-dock-tab&quot;);
await frame.click(&quot;li.MenuItem.create-resource-tab&quot;); // This line throws"><pre class="notranslate"><span class="pl-k">await</span> <span class="pl-s1">frame</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-s">".Icon.new-dock-tab"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">await</span> <span class="pl-s1">frame</span><span class="pl-kos">.</span><span class="pl-en">click</span><span class="pl-kos">(</span><span class="pl-s">"li.MenuItem.create-resource-tab"</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// This line throws</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">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:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    frame.click: Evaluation failed: TypeError: Cannot read property 'nodeType' of undefined
        at u.previewNode (&lt;anonymous&gt;:3:44845)
        at u.checkHitTargetAt (&lt;anonymous&gt;:3:44014)
        at eval (eval at evaluate (:3:1339), &lt;anonymous&gt;:10:23)
        at t.default.evaluate (&lt;anonymous&gt;:3:1362)
        at t.default.&lt;anonymous&gt; (&lt;anonymous&gt;:1:44)
    =========================== logs ===========================
    waiting for selector &quot;li.MenuItem.create-resource-tab&quot;
      selector resolved to visible &lt;li tabindex=&quot;0&quot; class=&quot;MenuItem create-resource-tab&quot;&gt;…&lt;/li&gt;
    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)"><pre class="notranslate"><code class="notranslate">    frame.click: Evaluation failed: TypeError: Cannot read property 'nodeType' of undefined
        at u.previewNode (&lt;anonymous&gt;:3:44845)
        at u.checkHitTargetAt (&lt;anonymous&gt;:3:44014)
        at eval (eval at evaluate (:3:1339), &lt;anonymous&gt;:10:23)
        at t.default.evaluate (&lt;anonymous&gt;:3:1362)
        at t.default.&lt;anonymous&gt; (&lt;anonymous&gt;:1:44)
    =========================== logs ===========================
    waiting for selector "li.MenuItem.create-resource-tab"
      selector resolved to visible &lt;li tabindex="0" class="MenuItem create-resource-tab"&gt;…&lt;/li&gt;
    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)
</code></pre></div>
<p dir="auto">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.</p>
<p dir="auto">If I get the bounding box from the from chrome's devtools then I get the following:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
	&quot;bottom&quot;: 801.5,
	&quot;height&quot;: 34,
	&quot;left&quot;: 336.25,
	&quot;right&quot;: 481.140625,
	&quot;top&quot;: 767.5,
	&quot;width&quot;: 144.890625,
	&quot;x&quot;: 336.25,
	&quot;y&quot;: 767.5
}"><pre class="notranslate">{
	<span class="pl-ent">"bottom"</span>: <span class="pl-c1">801.5</span>,
	<span class="pl-ent">"height"</span>: <span class="pl-c1">34</span>,
	<span class="pl-ent">"left"</span>: <span class="pl-c1">336.25</span>,
	<span class="pl-ent">"right"</span>: <span class="pl-c1">481.140625</span>,
	<span class="pl-ent">"top"</span>: <span class="pl-c1">767.5</span>,
	<span class="pl-ent">"width"</span>: <span class="pl-c1">144.890625</span>,
	<span class="pl-ent">"x"</span>: <span class="pl-c1">336.25</span>,
	<span class="pl-ent">"y"</span>: <span class="pl-c1">767.5</span>
}</pre></div>
<p dir="auto">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 <code class="notranslate">await frame.waitForTimeout</code> calls before attempting the click, but that didn't work.</p>
<p dir="auto">However, I have found that passing in <code class="notranslate">{ position: { x: 0, y: 0 } }</code> as options to that click doesn't manifest this bug, probably because the bug is in <code class="notranslate">ElementHandle._clickablePoint</code> and not <code class="notranslate">ElementHandle._offsetPoint</code>.</p>