Skip to main content
Go to Latest
class ElementHandle
Re-export
import { ElementHandle } from "https://deno.land/x/puppeteer@14.1.1/vendor/puppeteer-core/puppeteer/api-docs-entry.js";

ElementHandle represents an in-page DOM element.

Constructors

new
ElementHandle(
client: CDPSession,
frame: Frame,
page: Page,
frameManager: FrameManager,
)

Type Parameters

optional
ElementType extends any = any

Properties

private
_frame
private
_frameManager
private
_fromProtocolQuad
private
_getBoxModel
private
_getOOPIFOffsets
private
_intersectQuadWithViewport
private
_page
private
_scrollIntoViewIfNeeded

Methods

$<T extends any = any>(selector: string): Promise<ElementHandle<T> | null>

Runs element.querySelector within the page. If no element matches the selector, the return value resolves to null.

$$<T extends any = any>(selector: string): Promise<Array<ElementHandle<T>>>

Runs element.querySelectorAll within the page. If no elements match the selector, the return value resolves to [].

$$eval<ReturnType>(
selector: string,
pageFunction: (elements: any[], ...args: unknown[]) => ReturnType | Promise<ReturnType>,
): Promise<WrapElementHandle<ReturnType>>

This method runs document.querySelectorAll within the element and passes it as the first argument to pageFunction. If there's no element matching selector, the method throws an error.

If pageFunction returns a Promise, then frame.$$eval would wait for the promise to resolve and return its value.

$eval<ReturnType>(
selector: string,
pageFunction: (element: any, ...args: unknown[]) => ReturnType | Promise<ReturnType>,
): Promise<WrapElementHandle<ReturnType>>

This method runs document.querySelector within the element and passes it as the first argument to pageFunction. If there's no element matching selector, the method throws an error.

If pageFunction returns a Promise, then frame.$eval would wait for the promise to resolve and return its value.

$x(expression: string): Promise<ElementHandle[]>

The method evaluates the XPath expression relative to the elementHandle. If there are no such elements, the method will resolve to an empty array.

boundingBox(): Promise<BoundingBox | null>

This method returns the bounding box of the element (relative to the main frame), or null if the element is not visible.

boxModel(): Promise<BoxModel | null>

This method returns boxes of the element, or null if the element is not visible.

click(options?: ClickOptions): Promise<void>

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?: Offset): Promise<Point>

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

contentFrame(): Promise<Frame | null>

Resolves to the content frame for element handles referencing iframe nodes, or null otherwise

This method creates and captures a dragevent from the element.

dragAndDrop(target: ElementHandle, options?: { delay: number; }): Promise<void>

This method triggers a dragenter, dragover, and drop on the element.

dragEnter(data?: Protocol.Input.DragData): Promise<void>

This method creates a dragenter event on the element.

dragOver(data?: Protocol.Input.DragData): Promise<void>

This method creates a dragover event on the element.

drop(data?: Protocol.Input.DragData): Promise<void>

This method triggers a drop on the element.

focus(): Promise<void>

Calls focus on the element.

hover(): Promise<void>

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.

isIntersectingViewport(options?: { threshold?: number; }): Promise<boolean>

Resolves to true if the element is visible in the current viewport.

press(key: KeyInput, options?: PressOptions): Promise<void>

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

screenshot(options?: ScreenshotOptions): Promise<string | Uint8Array>

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.

select(...values: string[]): Promise<string[]>

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(): Promise<void>

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.

type(text: string, options?: { delay: number; }): Promise<void>

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(...filePaths: string[]): Promise<void>

This method expects elementHandle to point to an input element.

waitForSelector(selector: string, options?: { visible?: boolean; hidden?: boolean; timeout?: number; }): Promise<ElementHandle | null>

Wait for the selector to appear within the element. If at the moment of calling the method the selector already exists, the method will return immediately. If the selector doesn't appear after the timeout milliseconds of waiting, the function will throw.

This method does not work across navigations or if the element is detached from DOM.

waitForXPath(xpath: string, options?: { visible?: boolean; hidden?: boolean; timeout?: number; }): Promise<ElementHandle | null>

Wait for the xpath within the element. If at the moment of calling the method the xpath already exists, the method will return immediately. If the xpath doesn't appear after the timeout milliseconds of waiting, the function will throw.

If xpath starts with // instead of .//, the dot will be appended automatically.

This method works across navigation

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
let currentURL;
page
.waitForXPath('//img')
.then(() => console.log('First URL with image: ' + currentURL));
for (currentURL of [
'https://example.com',
'https://google.com',
'https://bbc.com',
]) {
await page.goto(currentURL);
}
await browser.close();
})();