Skip to main content
Version: Next

ElementHandle class

ElementHandle represents an in-page DOM element.

Signature​

export declare abstract class ElementHandle<ElementType extends Node = Element> extends JSHandle<ElementType>

Extends: JSHandle<ElementType>

Remarks​

ElementHandles can be created with the Page.$() method.

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const hrefElement = await page.$('a');
  await hrefElement.click();
  // ...
})();

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

ElementHandle instances can be used as arguments in Page.$eval() and Page.evaluate() methods.

If you're using TypeScript, ElementHandle takes a generic argument that denotes the type of element the handle is holding within. For example, if you have a handle to a <select> element, you can type it as ElementHandle<HTMLSelectElement> and you get some nicer type checks.

The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the ElementHandle class.

Properties​

Property

Modifiers

Type

Description

frame

readonly

Frame

Frame corresponding to the current handle.

Methods​

Method

Modifiers

Description

$(selector)

Queries the current element for an element matching the given selector.

$$(selector, options)

Queries the current element for all elements matching the given selector.

$$eval(selector, pageFunction, args)

Runs the given function on an array of elements matching the given selector in the current element.

If the given function returns a promise, then this method will wait till the promise resolves.

$eval(selector, pageFunction, args)

Runs the given function on the first element matching the given selector in the current element.

If the given function returns a promise, then this method will wait till the promise resolves.

autofill(data)

If the element is a form input, you can use ElementHandle.autofill() to test if the form is compatible with the browser's autofill implementation. Throws an error if the form cannot be autofilled.

Remarks:

Currently, Puppeteer supports auto-filling credit card information only and in Chrome in the new headless and headful modes only.

// Select an input on the credit card form.
const name = await page.waitForSelector('form #name');
// Trigger autofill with the desired data.
await name.autofill({
  creditCard: {
    number: '4444444444444444',
    name: 'John Smith',
    expiryMonth: '01',
    expiryYear: '2030',
    cvc: '123',
  },
});
backendNodeId()

When connected using Chrome DevTools Protocol, it returns a DOM.BackendNodeId for the element.

boundingBox()

This method returns the bounding box of the element (relative to the main frame), or null if the element is not part of the layout (example: display: none).

boxModel()

This method returns boxes of the element, or null if the element is not part of the layout (example: display: none).

Remarks:

Boxes are represented as an array of points; Each Point is an object {x, y}. Box points are sorted clock-wise.

click(this, options)

This method scrolls element into view if needed, and then uses Page.mouse to click in the center of the element. If the element is detached from DOM, the method throws an error.

clickablePoint(offset)

Returns the middle point within an element unless a specific offset is provided.

contentFrame(this)

Resolves the frame associated with the element, if any. Always exists for HTMLIFrameElements.

contentFrame()
drag(this, target)

Drags an element over the given element or point.

dragAndDrop(this, target, options)

deprecated

Deprecated:

Use ElementHandle.drop instead.

dragEnter(this, data)

deprecated

Deprecated:

Do not use. dragenter will automatically be performed during dragging.

dragOver(this, data)

deprecated

Deprecated:

Do not use. dragover will automatically be performed during dragging.

drop(this, element)

Drops the given element onto the current one.

drop(this, data)

deprecated

Deprecated:

No longer supported.

focus()

Calls focus on the element.

hover(this)

This method scrolls element into view if needed, and then uses Page.mouse to hover over the center of the element. If the element is detached from DOM, the method throws an error.

isHidden()

An element is considered to be hidden if at least one of the following is true:

isIntersectingViewport(this, options)

Resolves to true if the element is visible in the current viewport. If an element is an SVG, we check if the svg owner element is in the viewport instead. See https://crbug.com/963246.

isVisible()

An element is considered to be visible if all of the following is true:

press(key, options)

Focuses the element, and then uses Keyboard.down() and Keyboard.up().

Remarks:

If key is a single character and no modifier keys besides Shift are being held down, a keypress/input event will also be generated. The text option can be specified to force an input event to be generated.

NOTE Modifier keys DO affect elementHandle.press. Holding down Shift will type the text in upper case.

screenshot(options)

This method scrolls element into view if needed, and then uses Page.screenshot() to take a screenshot of the element. If the element is detached from DOM, the method throws an error.

screenshot(options)
scrollIntoView(this)

Scrolls the element into view using either the automation protocol client or by calling element.scrollIntoView.

select(values)

Triggers a change and input event once all the provided options have been selected. If there's no <select> element matching selector, the method throws an error.

tap(this)

This method scrolls element into view if needed, and then uses Touchscreen.tap() to tap in the center of the element. If the element is detached from DOM, the method throws an error.

toElement(tagName)

Converts the current handle to the given element type.

touchEnd(this)
touchMove(this, touch)

This method scrolls the element into view if needed, and then moves the touch to the center of the element.

touchStart(this)

This method scrolls the element into view if needed, and then starts a touch in the center of the element.

type(text, options)

Focuses the element, and then sends a keydown, keypress/input, and keyup event for each character in the text.

To press a special key, like Control or ArrowDown, use ElementHandle.press().

uploadFile(this, paths)

Sets the value of an input element to the given file paths.

Remarks:

This will not validate whether the file paths exists. Also, if a path is relative, then it is resolved against the current working directory. For locals script connecting to remote chrome environments, paths must be absolute.

waitForSelector(selector, options)

Wait for an element matching the given selector to appear in the current element.

Unlike Frame.waitForSelector(), this method does not work across navigations or if the element is detached from DOM.