<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.7.1</li>
<li>Operating System: MacOS 10.15 Catalina</li>
<li>Node.js version: 12.18.4</li>
<li>Browser: Chromium</li>
<li>Extra: None</li>
</ul>
<p dir="auto"><strong>Code Snippet</strong></p>
<p dir="auto">Help us help you! Put down a short code snippet that illustrates your bug and<br>
that we can run and debug locally. For example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const { chromium } = require('playwright');

(async () =&gt; {
  const browser = await chromium.launch()
  const page = await browser.newPage()
  const URL = 'https://the-internet.herokuapp.com/key_presses'
  await page.goto(URL)

  const handles = await page.evaluateHandle(() =&gt; document.querySelectorAll('input'))

  if (handles) {
    const properties = await handles.getProperties()
    for (const property of properties.values()) {
      const elementHandle = property.asElement()
      if (elementHandle) {
        await elementHandle.focus()
      }
    }
    handles.dispose()
  }

  await browser.close()
})();"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-kos">{</span> chromium <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'playwright'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-kos">(</span><span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">browser</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">chromium</span><span class="pl-kos">.</span><span class="pl-en">launch</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-k">const</span> <span class="pl-s1">page</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">newPage</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-k">const</span> <span class="pl-c1">URL</span> <span class="pl-c1">=</span> <span class="pl-s">'https://the-internet.herokuapp.com/key_presses'</span>
  <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">goto</span><span class="pl-kos">(</span><span class="pl-c1">URL</span><span class="pl-kos">)</span>

  <span class="pl-k">const</span> <span class="pl-s1">handles</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">page</span><span class="pl-kos">.</span><span class="pl-en">evaluateHandle</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelectorAll</span><span class="pl-kos">(</span><span class="pl-s">'input'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>

  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">handles</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">properties</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">handles</span><span class="pl-kos">.</span><span class="pl-en">getProperties</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">const</span> <span class="pl-s1">property</span> <span class="pl-k">of</span> <span class="pl-s1">properties</span><span class="pl-kos">.</span><span class="pl-en">values</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">elementHandle</span> <span class="pl-c1">=</span> <span class="pl-s1">property</span><span class="pl-kos">.</span><span class="pl-en">asElement</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">elementHandle</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">await</span> <span class="pl-s1">elementHandle</span><span class="pl-kos">.</span><span class="pl-en">focus</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
    <span class="pl-s1">handles</span><span class="pl-kos">.</span><span class="pl-en">dispose</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">await</span> <span class="pl-s1">browser</span><span class="pl-kos">.</span><span class="pl-en">close</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Describe the bug</strong><br>
When I get the array of ElementHandle by <code class="notranslate">page.evaluateHandle()</code> and call any API of each ElementHandle (focus() for an example), an error <code class="notranslate">elementHandle.focus(): dispatcher[method] is not a function</code> is thrown. Reproducible example here: <a href="https://try.playwright.tech/?s=i1th62g" rel="nofollow">https://try.playwright.tech/?s=i1th62g</a></p>
<p dir="auto">playwright version 1.7.1</p>
<p dir="auto">Failed to run the example<br>
REF: <a href="https://playwright.dev/docs/api/class-page#pageexposebindingname-playwrightbinding-options" rel="nofollow">https://playwright.dev/docs/api/class-page#pageexposebindingname-playwrightbinding-options</a></p>
<blockquote>
<p dir="auto">await page.exposeBinding('clicked', async (source, element) =&gt; {<br>
console.log(await element.textContent());<br>
}, { handle: true });<br>
await page.setContent(`</p>
  &lt;script&gt;
    document.addEventListener('click', event =&gt; window.clicked(event.target));
  &lt;/script&gt;
  <div dir="auto">Click me</div>
  <div dir="auto">Or click me</div>
`);
</blockquote>
<p dir="auto">Google Chrome console reports error :<br>
<code class="notranslate">Uncaught (in promise) elementHandle.textContent: dispatcher[method] is not a function</code></p>