Manipulating handles with JavaScript code
We talked about ElementHandle
in Chapter 4, Interacting with a Page. Let's recap this concept. ElementHandle
is a variable in our code pointing to a DOM
element inside the page we are automating. Now it's time to know that an ElementHandle
is, in fact, a JSHandle.
In the same way that ElementHandle
is a variable pointing to an element in the browser, a JSHandle is a variable pointing to a variable on the page we are automating. If we think about that, the only difference between a JavaScript variable like, for instance, document.URL
, and a DOM element, like document.activeElement
, is that a DOM element has a visual representation, that's all. So, we can say that an ElementHandle
(a DOM element) is also a JSHandle
(a JavaScript variable). Inheritance 101.
We were using functions like $
or $x
to get ElementHandles
. Now we can also use evaluateHandle
, which works like evaluate
, but as Puppeteer knows that we want a pointer...