Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Why is an ElementHandle equal to JSHandle@node?

See original GitHub issue

Methods like page.$(selector) and page.$$(selector) are supposed to return an ElementHandle.

When I try to check what kind of Object I’ve got by using the toString() method on such a result, I’m expecting to see something like: <ElementHandle> instead I see JSHandle@node.

So an ElementHandle is a JSHandle@node? Why is this so?

For example (taken from:) https://github.com/GoogleChrome/puppeteer/issues/2179

"use strict";

const puppeteer = require("puppeteer");

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.setContent('<form data-form="personal">test</form>');

    console.log(await page.evaluate(() => document.body.outerHTML));

    console.log(
      await page.evaluate(
        () => document.querySelector('[data-form="personal"]').innerText
      )
    );

    const elementHandle = await page.$('[data-form="personal"]');
    console.log("elementHandle: ", elementHandle.toString());

    const jsHandle = await elementHandle.getProperty("innerText");
    console.log("jsHandle: ", jsHandle.toString());

    const json = await jsHandle.jsonValue();
    console.log(json);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

This is the output:

<body><form data-form="personal">test</form></body>
test
elementHandle:  JSHandle@node
jsHandle:  JSHandle:test
test

Issue Analytics

State:
Created 4 years ago
Reactions:10
Comments:5

Top GitHub Comments

5reactions

AnthonyCavanaghcommented, Jul 4, 2021

The most intelligent question on this subject, so of course no reply

2reactions

paddelbootcommented, Jul 8, 2022

Same problem. I run page.$$( selector ) and get a bunch of JSHandle@node in return. I expected an ElementHandle, as defined in the docs, from which I could then retrieve child elements.

Top Results From Across the Web

What is the difference between jsHandle and elementHandle ...

JSHandle represents an in-page JavaScript object. JSHandles can be created with the page.evaluateHandle method. const windowHandle = await page.

ElementHandle | Playwright - CukeTest

ElementHandle prevents DOM element from garbage collection unless the handle is disposed with ... This is equivalent to calling element.click().

ElementHandle class - Puppeteer

ElementHandle prevents the DOM element from being garbage-collected unless the handle is disposed. ElementHandles are auto-disposed when their origin frame ...

Node.isEqualNode() - Web APIs - MDN Web Docs

The isEqualNode() method of the Node interface tests whether two nodes are equal. Two nodes are equal when they have the same type, ......

Element Handle VS Locator API | Playwright Tutorial - Part 47

Locator represents a view of the element(s) on the page. It captures the logic sufficient to retrieve the element at any given moment....