import { Page } from "https://deno.land/x/puppeteer@14.1.1/vendor/puppeteer-core/puppeteer/api-docs-entry.d.ts";
Page provides methods to interact with a single tab or extension background page in Chromium.
Examples
This example creates a page, navigates it to a URL, and then * saves a screenshot:
This example creates a page, navigates it to a URL, and then * saves a screenshot:
const puppeteer = require('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 PageEmittedEvents enum.
This example logs a message for a single page load event:
This example logs a message for a single page load event:
page.once('load', () => console.log('Page loaded!'));
To unsubscribe from events use the off method:
function logRequest(interceptedRequest) {
console.log('A request was made:', interceptedRequest.url());
}
page.on('request', logRequest);
// Sometime later...
page.off('request', logRequest);
Constructors
Properties
Methods
Runs document.querySelector within the page. If no element matches the
selector, the return value resolves to null.
The method runs document.querySelectorAll within the page. If no elements
match the selector, the return value resolves to [].
This method runs Array.from(document.querySelectorAll(selector)) within
the page and passes the result as the first argument to the pageFunction.
This method runs document.querySelector within the page and passes the
result as the first argument to the pageFunction.
The method evaluates the XPath expression relative to the page document as its context node. If there are no such elements, the method resolves to an empty array.
Adds a <script> tag into the page with the desired URL or content.
Adds a <link rel="stylesheet"> tag into the page with the desired URL or a
<style type="text/css"> tag with the content.
This method fetches an element with selector, scrolls it into view if
needed, and then uses Page.mouse to click in the center of the
element. If there's no element matching selector, the method throws an
error.
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.
Generates a PDF of the page with the print CSS media type.
Emulates given device metrics and user agent. This method is a shortcut for
calling two methods: Page.setUserAgent and Page.setViewport
To aid emulation, Puppeteer provides a list of device descriptors that can
be obtained via the Puppeteer.devices page.emulate will resize
the page. A lot of websites don't expect phones to change size, so you
should emulate before navigating to the page.
Enables CPU throttling to emulate slow CPUs.
Emulates the idle state. If no arguments set, clears idle state emulation.
Simulates the given vision deficiency on the page.
Adds a function which would be invoked in one of the following scenarios:
-
whenever the page is navigated
-
whenever the child frame is attached or navigated. In this case, the function is invoked in the context of the newly attached frame.
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 Math.random.
The method adds a function called name on the page's window object. When
called, the function executes puppeteerFunction in node.js and returns a
Promise which resolves to the return value of puppeteerFunction.
If the puppeteerFunction returns a Promise, it will be awaited.
NOTE: Functions installed via page.exposeFunction survive navigations.
This method fetches an element with selector and focuses it. If there's no
element matching selector, the method throws an error.
This method navigate to the previous page in history.
This method navigate to the next page in history.
This method fetches an element with selector, scrolls it into view if
needed, and then uses Page.mouse to hover over the center of the element.
If there's no element matching selector, the method throws an error.
Listen to page events.
This method iterates the JavaScript heap and finds all objects with the given prototype.
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.
Toggles ignoring cache for each request based on the enabled state. By default, caching is enabled.
The extra HTTP headers will be sent with every request the page initiates. NOTE: 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.
page.setViewport will resize the page. A lot of websites don't expect
phones to change size, so you should set the viewport before navigating to
the page.
In the case of multiple pages in a single browser, each page can have its own viewport size.
This method fetches an element with selector, scrolls it into view if
needed, and then uses Page.touchscreen to tap in the center of the element.
If there's no element matching selector, the method throws an error.
Sends a keydown, keypress/input, and keyup event for each character
in the text.
To press a special key, like Control or ArrowDown, use Keyboard.press.
This method is typically coupled with an action that triggers file
choosing. The following example clicks a button that issues a file chooser
and then responds with /tmp/myfile.pdf as if a user has selected this file.
const [fileChooser] = await Promise.all([
page.waitForFileChooser(),
page.click('#upload-file-button'),
// some button that triggers file selection
]);
await fileChooser.accept(['/tmp/myfile.pdf']);
NOTE: This must be called before the file chooser is launched. It will not return a currently active file chooser.
The waitForFunction can be used to observe viewport size change:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const watchDog = page.waitForFunction('window.innerWidth < 100');
await page.setViewport({ width: 50, height: 50 });
await watchDog;
await browser.close();
})();
To pass arguments from node.js to the predicate of page.waitForFunction function:
const selector = '.foo';
await page.waitForFunction(
(selector) => !!document.querySelector(selector),
{},
selector
);
The predicate of page.waitForFunction can be asynchronous too:
const username = 'github-username';
await page.waitForFunction(
async (username) => {
const githubResponse = await fetch(
`https://api.github.com/users/${username}`
);
const githubUser = await githubResponse.json();
// show the avatar
const img = document.createElement('img');
img.src = githubUser.avatar_url;
// wait 3 seconds
await new Promise((resolve, reject) => setTimeout(resolve, 3000));
img.remove();
},
{},
username
);
Wait for the selector to appear in page. 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 works across navigations:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
let currentURL;
page
.waitForSelector('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();
})();
Causes your script to wait for the given number of milliseconds.
Wait for the xpath to appear in page. 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.
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();
})();