Page class
Page provides methods to interact with a single tab or extension background page in the browser.
One Browser instance might have multiple Page instances.
Signature
export declare abstract class Page extends EventEmitter<PageEvents>
Extends: EventEmitter<PageEvents>
Remarks
The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the Page
class.
Example 1
This example creates a page, navigates it to a URL, and then saves a screenshot:
import puppeteer from 'puppeteer';
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({path: 'screenshot.png'});
await browser.close();
})();
The Page class extends from Puppeteer's EventEmitter class and will emit various events which are documented in the PageEvent enum.
Example 2
This example logs a message for a single page load
event:
page.once('load', () => console.log('Page loaded!'));
To unsubscribe from events use the EventEmitter.off() method:
function logRequest(interceptedRequest) {
console.log('A request was made:', interceptedRequest.url());
}
page.on('request', logRequest);
// Sometime later...
page.off('request', logRequest);
Properties
Property | Modifiers | Type | Description |
---|---|---|---|
accessibility |
| The Accessibility class provides methods for inspecting the browser's accessibility tree. The accessibility tree is used by assistive technology such as screen readers or switches. Remarks: Accessibility is a very platform-specific thing. On different platforms, there are different screen readers that might have wildly different output. Blink - Chrome's rendering engine - has a concept of "accessibility tree", which is then translated into different platform-specific APIs. Accessibility namespace gives users access to the Blink Accessibility Tree. Most of the accessibility tree gets filtered out when converting from Blink AX Tree to Platform-specific AX-Tree or by assistive technologies themselves. By default, Puppeteer tries to approximate this filtering, exposing only the "interesting" nodes of the tree. The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the | |
coverage |
| The Coverage class provides methods to gather information about parts of JavaScript and CSS that were used by the page. Remarks: To output coverage in a form consumable by Istanbul, see puppeteer-to-istanbul. The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the | |
keyboard |
| Keyboard provides an api for managing a virtual keyboard. The high level api is Keyboard.type(), which takes raw characters and generates proper keydown, keypress/input, and keyup events on your page. Remarks: For finer control, you can use Keyboard.down(), Keyboard.up(), and Keyboard.sendCharacter() to manually fire events as if they were generated from a real keyboard. On macOS, keyboard shortcuts like The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the | |
mouse |
| The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport. Remarks: Every The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the | |
touchscreen |
| The Touchscreen class exposes touchscreen events. | |
tracing |
| The Tracing class exposes the tracing audit interface. Remarks: You can use The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the |
Methods
Method | Modifiers | Description |
---|---|---|
$(selector) | Finds the first element that matches the selector. If no element matches the selector, the return value resolves to Remarks: Shortcut for Page.mainFrame().$(selector). | |
$$(selector, options) | Finds elements on the page that match the selector. If no elements match the selector, the return value resolves to Remarks: Shortcut for Page.mainFrame().$$(selector). | |
$$eval(selector, pageFunction, args) | This method returns all elements matching the selector and passes the resulting array as the first argument to the Remarks: If | |
$eval(selector, pageFunction, args) | This method finds the first element within the page that matches the selector and passes the result as the first argument to the Remarks: If no element is found matching If | |
addScriptTag(options) | Adds a Remarks: Shortcut for page.mainFrame().addScriptTag(options). | |
addStyleTag(options) | Adds a Shortcut for page.mainFrame().addStyleTag(options). | |
addStyleTag(options) | ||
authenticate(credentials) | Provide credentials for note Request interception will be turned on behind the scenes to implement authentication. This might affect performance. Remarks: To disable authentication, pass | |
bringToFront() | Brings page to front (activates tab). | |
browser() | Get the browser the page belongs to. | |
browserContext() | Get the browser context that the page belongs to. | |
click(selector, options) | This method fetches an element with Remarks: Bear in mind that if
Shortcut for page.mainFrame().click(selector[, options]). | |
close(options) | ||
content() | The full HTML contents of the page, including the DOCTYPE. | |
| If no URLs are specified, this method returns cookies for the current page URL. If URLs are specified, only cookies for those URLs are returned. Deprecated: Page-level cookie API is deprecated. Use Browser.cookies() or BrowserContext.cookies() instead. | |
createCDPSession() | Creates a Chrome Devtools Protocol session attached to the page. | |
createPDFStream(options) | Generates a PDF of the page with the Remarks: To generate a PDF with the By default, | |
| Deprecated: Page-level cookie API is deprecated. Use Browser.deleteCookie() or BrowserContext.deleteCookie() instead. | |
emulate(device) | Emulates a given device's metrics and user agent. To aid emulation, Puppeteer provides a list of known devices that can be via KnownDevices. Remarks: This method is a shortcut for calling two methods: Page.setUserAgent() and Page.setViewport(). This method will resize the page. A lot of websites don't expect phones to change size, so you should emulate before navigating to the page. | |
emulateCPUThrottling(factor) | Enables CPU throttling to emulate slow CPUs. | |
emulateIdleState(overrides) | Emulates the idle state. If no arguments set, clears idle state emulation. | |
emulateMediaFeatures(features) | ||
emulateMediaType(type) | ||
emulateNetworkConditions(networkConditions) | This does not affect WebSockets and WebRTC PeerConnections (see https://crbug.com/563644). To set the page offline, you can use Page.setOfflineMode(). A list of predefined network conditions can be used by importing PredefinedNetworkConditions. | |
emulateTimezone(timezoneId) | ||
emulateVisionDeficiency(type) | Simulates the given vision deficiency on the page. | |
evaluate(pageFunction, args) | Evaluates a function in the page's context and returns the result. If the function passed to | |
evaluateHandle(pageFunction, args) | Remarks: The only difference between page.evaluate and If the function passed to You can pass a string instead of a function (although functions are recommended as they are easier to debug and use with TypeScript): | |
evaluateOnNewDocument(pageFunction, args) | Adds a function which would be invoked in one of the following scenarios:
The function is invoked after the document was created but before any of its scripts were run. This is useful to amend the JavaScript environment, e.g. to seed | |
exposeFunction(name, pptrFunction) | The method adds a function called If the puppeteerFunction returns a note Functions installed via | |
focus(selector) | This method fetches an element with Remarks: Shortcut for page.mainFrame().focus(selector). | |
frames() | An array of all frames attached to the page. | |
Maximum navigation time in milliseconds. | ||
getDefaultTimeout() | Maximum time in milliseconds. | |
goBack(options) | This method navigate to the previous page in history. | |
goForward(options) | This method navigate to the next page in history. | |
goto(url, options) | Navigates the frame or page to the given Remarks: Navigation to warning Headless shell mode doesn't support navigation to a PDF document. See the upstream issue. In headless shell, this method will not throw an error when any valid HTTP status code is returned by the remote server, including 404 "Not Found" and 500 "Internal Server Error". The status code for such responses can be retrieved by calling HTTPResponse.status(). | |
hover(selector) | This method fetches an element with Remarks: Shortcut for page.mainFrame().hover(selector). | |
isClosed() | Indicates that the page has been closed. | |
isDragInterceptionEnabled() |
|
Deprecated: We no longer support intercepting drag payloads. Use the new drag APIs found on ElementHandle to drag (or just use the Page.mouse). |
isJavaScriptEnabled() |
| |
isServiceWorkerBypassed() |
| |
locator(selector) | Creates a locator for the provided selector. See Locator for details and supported actions. | |
locator(func) | Creates a locator for the provided function. See Locator for details and supported actions. | |
mainFrame() | The page's main frame. | |
metrics() | Object containing metrics as key/value pairs. Remarks: All timestamps are in monotonic time: monotonically increasing time in seconds since an arbitrary point in the past. | |
pdf(options) | Generates a PDF of the page with the Remarks: To generate a PDF with the By default, | |
queryObjects(prototypeHandle) | This method iterates the JavaScript heap and finds all objects with the given prototype. | |
reload(options) | Reloads the page. | |
removeExposedFunction(name) | The method removes a previously added function via $Page.exposeFunction() called | |
removeScriptToEvaluateOnNewDocument(identifier) | Removes script that injected into page by Page.evaluateOnNewDocument. | |
screencast(options) | (Experimental) Captures a screencast of this page. Remarks: All recordings will be WebM format using the VP9 video codec. The FPS is 30. You must have ffmpeg installed on your system. | |
screenshot(options) | Captures a screenshot of this page. Remarks: While a screenshot is being taken in a BrowserContext, the following methods will automatically wait for the screenshot to finish to prevent interference with the screenshot process: BrowserContext.newPage(), Browser.newPage(), Page.close(). Calling Page.bringToFront() will not wait for existing screenshot operations. | |
screenshot(options) | ||
select(selector, values) | Triggers a Remarks: Shortcut for page.mainFrame().select() | |
setBypassCSP(enabled) | Toggles bypassing page's Content-Security-Policy. Remarks: NOTE: CSP bypassing happens at the moment of CSP initialization rather than evaluation. Usually, this means that | |
setBypassServiceWorker(bypass) | Toggles ignoring of service worker for each request. | |
setCacheEnabled(enabled) | Toggles ignoring cache for each request based on the enabled state. By default, caching is enabled. | |
setContent(html, options) | Set the content of the page. | |
| Deprecated: Page-level cookie API is deprecated. Use Browser.setCookie() or BrowserContext.setCookie() instead. | |
This setting will change the default maximum navigation time for the following methods and related shortcuts: | ||
setDefaultTimeout(timeout) | ||
setDragInterception(enabled) |
| Deprecated: We no longer support intercepting drag payloads. Use the new drag APIs found on ElementHandle to drag (or just use the Page.mouse). |
setExtraHTTPHeaders(headers) | The extra HTTP headers will be sent with every request the page initiates. tip All HTTP header names are lowercased. (HTTP headers are case-insensitive, so this shouldn’t impact your server code.) note page.setExtraHTTPHeaders does not guarantee the order of headers in the outgoing requests. | |
setGeolocation(options) | Sets the page's geolocation. Remarks: Consider using BrowserContext.overridePermissions() to grant permissions for the page to read its geolocation. | |
setJavaScriptEnabled(enabled) | Remarks: NOTE: changing this value won't affect scripts that have already been run. It will take full effect on the next navigation. | |
setOfflineMode(enabled) | Sets the network connection to offline. It does not change the parameters used in Page.emulateNetworkConditions() | |
setRequestInterception(value) | Activating request interception enables HTTPRequest.abort(), HTTPRequest.continue() and HTTPRequest.respond() methods. This provides the capability to modify network requests that are made by a page. Once request interception is enabled, every request will stall unless it's continued, responded or aborted; or completed using the browser cache. See the Request interception guide for more details. | |
setUserAgent(userAgent, userAgentMetadata) | ||
setViewport(viewport) |
In the case of multiple pages in a single browser, each page can have its own viewport size. Setting the viewport to Remarks: NOTE: in certain cases, setting viewport will reload the page in order to set the isMobile or hasTouch properties. | |
tap(selector) | This method fetches an element with Remarks: Shortcut for page.mainFrame().tap(selector). | |
target() |
| A target this page was created from. Deprecated: Use Page.createCDPSession() directly. |
title() | The page's title Remarks: Shortcut for page.mainFrame().title(). | |
type(selector, text, options) | Sends a To press a special key, like | |
url() | The page's URL. Remarks: Shortcut for page.mainFrame().url(). | |
viewport() | Returns the current page viewport settings without checking the actual page viewport. This is either the viewport set with the previous Page.setViewport() call or the default viewport set via ConnectOptions.defaultViewport. | |
waitForDevicePrompt(options) | This method is typically coupled with an action that triggers a device request from an api such as WebBluetooth. caution This must be called before the device request is made. It will not return a currently active device prompt. | |
waitForFileChooser(options) | This method is typically coupled with an action that triggers file choosing. caution This must be called before the file chooser is launched. It will not return a currently active file chooser. caution Interception of file dialogs triggered via DOM APIs such as window.showOpenFilePicker is currently not supported. Remarks: In the "headful" browser, this method results in the native file picker dialog | |
waitForFrame(urlOrPredicate, options) | Waits for a frame matching the given conditions to appear. | |
waitForFunction(pageFunction, options, args) | Waits for the provided function, | |
Waits for the page to navigate to a new URL or to reload. It is useful when you run code that will indirectly cause the page to navigate. Remarks: Usage of the History API to change the URL is considered a navigation. | ||
waitForNetworkIdle(options) | Waits for the network to be idle. | |
waitForRequest(urlOrPredicate, options) | Remarks: Optional Waiting Parameters have:
| |
waitForResponse(urlOrPredicate, options) | Remarks: Optional Parameter have:
| |
waitForSelector(selector, options) | Wait for the Remarks: The optional Parameter in Arguments
| |
workers() | All of the dedicated WebWorkers associated with the page. Remarks: This does not contain ServiceWorkers |