# Playwright API Tip-Of-Tree ##### Table of Contents - [Playwright module](#playwright-module) - [class: Browser](#class-browser) - [class: BrowserContext](#class-browsercontext) - [class: Page](#class-page) - [class: Frame](#class-frame) - [class: ElementHandle](#class-elementhandle) - [class: JSHandle](#class-jshandle) - [class: ConsoleMessage](#class-consolemessage) - [class: Dialog](#class-dialog) - [class: Keyboard](#class-keyboard) - [class: Mouse](#class-mouse) - [class: Request](#class-request) - [class: Response](#class-response) - [class: Selectors](#class-selectors) - [class: Route](#class-route) - [class: TimeoutError](#class-timeouterror) - [class: Accessibility](#class-accessibility) - [class: Worker](#class-worker) - [class: BrowserServer](#class-browserserver) - [class: BrowserType](#class-browsertype) - [class: ChromiumBrowser](#class-chromiumbrowser) - [class: ChromiumBrowserContext](#class-chromiumbrowsercontext) - [class: ChromiumCoverage](#class-chromiumcoverage) - [class: CDPSession](#class-cdpsession) - [class: FirefoxBrowser](#class-firefoxbrowser) - [class: WebKitBrowser](#class-webkitbrowser) - [Environment Variables](#environment-variables) - [Working with selectors](#working-with-selectors) - [Working with Chrome Extensions](#working-with-chrome-extensions) ### Playwright module Playwright module provides a method to launch a browser instance. The following is a typical example of using Playwright to drive automation: ```js const { chromium, firefox, webkit } = require('playwright'); (async () => { const browser = await chromium.launch(); // Or 'firefox' or 'webkit'. const page = await browser.newPage(); await page.goto('http://example.com'); // other actions... await browser.close(); })(); ``` By default, the `playwright` NPM package automatically downloads browser executables during installation. The `playwright-core` NPM package can be used to skip automatic downloads. - [playwright.chromium](#playwrightchromium) - [playwright.devices](#playwrightdevices) - [playwright.errors](#playwrighterrors) - [playwright.firefox](#playwrightfirefox) - [playwright.selectors](#playwrightselectors) - [playwright.webkit](#playwrightwebkit) #### playwright.chromium - returns: <[BrowserType]> This object can be used to launch or connect to Chromium, returning instances of [ChromiumBrowser]. #### playwright.devices - returns: <[Object]> Returns a list of devices to be used with [`browser.newContext([options])`](#browsernewcontextoptions) or [`browser.newPage([options])`](#browsernewpageoptions). Actual list of devices can be found in [src/deviceDescriptors.ts](https://github.com/Microsoft/playwright/blob/master/src/deviceDescriptors.ts). ```js const { webkit, devices } = require('playwright'); const iPhone = devices['iPhone 6']; (async () => { const browser = await webkit.launch(); const context = await browser.newContext({ ...iPhone }); const page = await context.newPage(); await page.goto('http://example.com'); // other actions... await browser.close(); })(); ``` #### playwright.errors - returns: <[Object]> - `TimeoutError` <[function]> A class of [TimeoutError]. Playwright methods might throw errors if they are unable to fulfill a request. For example, [page.waitForSelector(selector[, options])](#pagewaitforselectorselector-options) might fail if the selector doesn't match any nodes during the given timeframe. For certain types of errors Playwright uses specific error classes. These classes are available via [`playwright.errors`](#playwrighterrors). An example of handling a timeout error: ```js try { await page.waitForSelector('.foo'); } catch (e) { if (e instanceof playwright.errors.TimeoutError) { // Do something if this is a timeout. } } ``` #### playwright.firefox - returns: <[BrowserType]> This object can be used to launch or connect to Firefox, returning instances of [FirefoxBrowser]. #### playwright.selectors - returns: <[Selectors]> Selectors can be used to install custom selector engines. See [Working with selectors](#working-with-selectors) for more information. #### playwright.webkit - returns: <[BrowserType]> This object can be used to launch or connect to WebKit, returning instances of [WebKitBrowser]. ### class: Browser * extends: [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) A Browser is created when Playwright connects to a browser instance, either through [`browserType.launch`](#browsertypelaunchoptions) or [`browserType.connect`](#browsertypeconnectoptions). An example of using a [Browser] to create a [Page]: ```js const { firefox } = require('playwright'); // Or 'chromium' or 'webkit'. (async () => { const browser = await firefox.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); await browser.close(); })(); ``` See [ChromiumBrowser], [FirefoxBrowser] and [WebKitBrowser] for browser-specific features. Note that [browserType.connect(options)](#browsertypeconnectoptions) and [browserType.launch([options])](#browsertypelaunchoptions) always return a specific browser instance, based on the browser being connected to or launched. - [event: 'disconnected'](#event-disconnected) - [browser.close()](#browserclose) - [browser.contexts()](#browsercontexts) - [browser.isConnected()](#browserisconnected) - [browser.newContext([options])](#browsernewcontextoptions) - [browser.newPage([options])](#browsernewpageoptions) #### event: 'disconnected' Emitted when Browser gets disconnected from the browser application. This might happen because of one of the following: - Browser application is closed or crashed. - The [`browser.close`](#browserclose) method was called. #### browser.close() - returns: <[Promise]> In case this browser is obtained using [browserType.launch](#browsertypelaunchoptions), closes the browser and all of its pages (if any were opened). In case this browser is obtained using [browserType.connect](#browsertypeconnectoptions), clears all created contexts belonging to this browser and disconnects from the browser server. The [Browser] object itself is considered to be disposed and cannot be used anymore. #### browser.contexts() - returns: <[Array]<[BrowserContext]>> Returns an array of all open browser contexts. In a newly created browser, this will return zero browser contexts. ```js const browser = await pw.webkit.launch(); console.log(browser.contexts().length); // prints `0` const context = await browser.newContext(); console.log(browser.contexts().length); // prints `1` ``` #### browser.isConnected() - returns: <[boolean]> Indicates that the browser is connected. #### browser.newContext([options]) - `options` <[Object]> - `ignoreHTTPSErrors` <[boolean]> Whether to ignore HTTPS errors during navigation. Defaults to `false`. - `bypassCSP` <[boolean]> Toggles bypassing page's Content-Security-Policy. - `viewport` [Object]> Sets a consistent viewport for each page. Defaults to an 1280x720 viewport. `null` disables the default viewport. - `width` <[number]> page width in pixels. - `height` <[number]> page height in pixels. - `userAgent` <[string]> Specific user agent to use in this context. - `deviceScaleFactor` <[number]> Specify device scale factor (can be thought of as dpr). Defaults to `1`. - `isMobile` <[boolean]> Whether the `meta viewport` tag is taken into account and touch events are enabled. Defaults to `false`. Not supported in Firefox. - `hasTouch` <[boolean]> Specifies if viewport supports touch events. Defaults to false. - `javaScriptEnabled` <[boolean]> Whether or not to enable or disable JavaScript in the context. Defaults to true. - `timezoneId` <[string]> Changes the timezone of the context. See [ICU’s `metaZones.txt`](https://cs.chromium.org/chromium/src/third_party/icu/source/data/misc/metaZones.txt?rcl=faee8bc70570192d82d2978a71e2a615788597d1) for a list of supported timezone IDs. - `geolocation` <[Object]> - `latitude` <[number]> Latitude between -90 and 90. - `longitude` <[number]> Longitude between -180 and 180. - `accuracy` <[number]> Non-negative accuracy value. Defaults to `0`. - `locale` <[string]> Specify user locale, for example `en-GB`, `de-DE`, etc. Locale will affect `navigator.language` value, `Accept-Language` request header value as well as number and date formatting rules. - `permissions` <[Array]<[string]>> A list of permissions to grant to all pages in this context. See [browserContext.grantPermissions](#browsercontextgrantpermissionspermissions-options) for more details. - `extraHTTPHeaders` <[Object]> An object containing additional HTTP headers to be sent with every request. All header values must be strings. - `offline` <[boolean]> Whether to emulate network being offline. Defaults to `false`. - `httpCredentials` <[Object]> Credentials for [HTTP authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication). - `username` <[string]> - `password` <[string]> - returns: <[Promise]<[BrowserContext]>> Creates a new browser context. It won't share cookies/cache with other browser contexts. ```js (async () => { const browser = await playwright.firefox.launch(); // Or 'chromium' or 'webkit'. // Create a new incognito browser context. const context = await browser.newContext(); // Create a new page in a pristine context. const page = await context.newPage(); await page.goto('https://example.com'); })(); ``` #### browser.newPage([options]) - `options` <[Object]> - `ignoreHTTPSErrors` <[boolean]> Whether to ignore HTTPS errors during navigation. Defaults to `false`. - `bypassCSP` <[boolean]> Toggles bypassing page's Content-Security-Policy. - `viewport` [Object]> Sets a consistent viewport for each page. Defaults to an 1280x720 viewport. `null` disables the default viewport. - `width` <[number]> page width in pixels. - `height` <[number]> page height in pixels. - `userAgent` <[string]> Specific user agent to use in this context. - `deviceScaleFactor` <[number]> Specify device scale factor (can be thought of as dpr). Defaults to `1`. - `isMobile` <[boolean]> Whether the `meta viewport` tag is taken into account and touch events are enabled. Defaults to `false`. Not supported in Firefox. - `hasTouch` <[boolean]> Specifies if viewport supports touch events. Defaults to false. - `javaScriptEnabled` <[boolean]> Whether or not to enable or disable JavaScript in the context. Defaults to `true`. - `timezoneId` <[string]> Changes the timezone of the context. See [ICU’s `metaZones.txt`](https://cs.chromium.org/chromium/src/third_party/icu/source/data/misc/metaZones.txt?rcl=faee8bc70570192d82d2978a71e2a615788597d1) for a list of supported timezone IDs. - `geolocation` <[Object]> - `latitude` <[number]> Latitude between -90 and 90. - `longitude` <[number]> Longitude between -180 and 180. - `accuracy` <[number]> Non-negative accuracy value. Defaults to `0`. - `locale` <[string]> Specify user locale, for example `en-GB`, `de-DE`, etc. Locale will affect `navigator.language` value, `Accept-Language` request header value as well as number and date formatting rules. - `permissions` <[Array]<[string]>> A list of permissions to grant to all pages in this context. See [browserContext.grantPermissions](#browsercontextgrantpermissionspermissions-options) for more details. - `extraHTTPHeaders` <[Object]> An object containing additional HTTP headers to be sent with every request. All header values must be strings. - `offline` <[boolean]> Whether to emulate network being offline. Defaults to `false`. - `httpCredentials` <[Object]> Credentials for [HTTP authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication). - `username` <[string]> - `password` <[string]> - returns: <[Promise]<[Page]>> Creates a new page in a new browser context. Closing this page will close the context as well. This is a convenience API that should only be used for the single-page scenarios and short snippets. Production code and testing frameworks should explicitly create [browser.newContext](#browsernewcontextoptions) followed by the [browserContext.newPage](#browsercontextnewpage) to control their exact life times. ### class: BrowserContext * extends: [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) BrowserContexts provide a way to operate multiple independent browser sessions. If a page opens another page, e.g. with a `window.open` call, the popup will belong to the parent page's browser context. Playwright allows creation of "incognito" browser contexts with `browser.newContext()` method. "Incognito" browser contexts don't write any browsing data to disk. ```js // Create a new incognito browser context const context = await browser.newContext(); // Create a new page inside context. const page = await context.newPage(); await page.goto('https://example.com'); // Dispose context once it's no longer needed. await context.close(); ``` - [event: 'close'](#event-close) - [event: 'page'](#event-page) - [browserContext.addCookies(cookies)](#browsercontextaddcookiescookies) - [browserContext.addInitScript(script[, arg])](#browsercontextaddinitscriptscript-arg) - [browserContext.clearCookies()](#browsercontextclearcookies) - [browserContext.clearPermissions()](#browsercontextclearpermissions) - [browserContext.close()](#browsercontextclose) - [browserContext.cookies([urls])](#browsercontextcookiesurls) - [browserContext.exposeFunction(name, playwrightFunction)](#browsercontextexposefunctionname-playwrightfunction) - [browserContext.grantPermissions(permissions[][, options])](#browsercontextgrantpermissionspermissions-options) - [browserContext.newPage()](#browsercontextnewpage) - [browserContext.pages()](#browsercontextpages) - [browserContext.route(url, handler)](#browsercontextrouteurl-handler) - [browserContext.setDefaultNavigationTimeout(timeout)](#browsercontextsetdefaultnavigationtimeouttimeout) - [browserContext.setDefaultTimeout(timeout)](#browsercontextsetdefaulttimeouttimeout) - [browserContext.setExtraHTTPHeaders(headers)](#browsercontextsetextrahttpheadersheaders) - [browserContext.setGeolocation(geolocation)](#browsercontextsetgeolocationgeolocation) - [browserContext.setHTTPCredentials(httpCredentials)](#browsercontextsethttpcredentialshttpcredentials) - [browserContext.setOffline(offline)](#browsercontextsetofflineoffline) - [browserContext.waitForEvent(event[, optionsOrPredicate])](#browsercontextwaitforeventevent-optionsorpredicate) #### event: 'close' Emitted when Browser context gets closed. This might happen because of one of the following: - Browser context is closed. - Browser application is closed or crashed. - The [`browser.close`](#browserclose) method was called. #### event: 'page' - <[Page]> The event is emitted when a new Page is created in the BrowserContext. The page may still be loading. The event will also fire for popup pages. See also [`Page.on('popup')`](#event-popup) to receive events about popups relevant to a specific page. The earliest moment that page is available is when it has navigated to the initial url. For example, when opening a popup with `window.open('http://example.com')`, this event will fire when the network request to "http://example.com" is done and its response has started loading in the popup. ```js const [page] = await Promise.all([ context.waitForEvent('page'), page.click('a[target=_blank]'), ]); console.log(await page.evaluate('location.href')); ``` > **NOTE** Use [Page.waitForLoadState](#pagewaitforloadstateoptions) to wait until the page gets to a particular state (you should not need it in most cases). #### browserContext.addCookies(cookies) - `cookies` <[Array]<[Object]>> - `name` <[string]> **required** - `value` <[string]> **required** - `url` <[string]> either url or domain / path are required - `domain` <[string]> either url or domain / path are required - `path` <[string]> either url or domain / path are required - `expires` <[number]> Unix time in seconds. - `httpOnly` <[boolean]> - `secure` <[boolean]> - `sameSite` <"Strict"|"Lax"|"None"> - returns: <[Promise]> ```js await browserContext.addCookies([cookieObject1, cookieObject2]); ``` #### browserContext.addInitScript(script[, arg]) - `script` <[function]|[string]|[Object]> Script to be evaluated in all pages in the browser context. - `path` <[string]> Path to the JavaScript file. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd). - `content` <[string]> Raw script content. - `arg` <[Serializable]> Optional argument to pass to `script` (only supported when passing a function). - returns: <[Promise]> Adds a script which would be evaluated in one of the following scenarios: - Whenever a page is created in the browser context or is navigated. - Whenever a child frame is attached or navigated in any page in the browser context. In this case, the script is evaluated in the context of the newly attached frame. The script is evaluated 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`. An example of overriding `Math.random` before the page loads: ```js // preload.js Math.random = () => 42; ``` ```js // In your playwright script, assuming the preload.js file is in same folder. await browserContext.addInitScript({ path: 'preload.js' }); ``` > **NOTE** The order of evaluation of multiple scripts installed via [browserContext.addInitScript(script[, arg])](#browsercontextaddinitscriptscript-arg) and [page.addInitScript(script[, arg])](#pageaddinitscriptscript-arg) is not defined. #### browserContext.clearCookies() - returns: <[Promise]> Clears context bookies. #### browserContext.clearPermissions() - returns: <[Promise]> Clears all permission overrides for the browser context. ```js const context = await browser.newContext(); await context.grantPermissions(['clipboard-read']); // do stuff .. context.clearPermissions(); ``` #### browserContext.close() - returns: <[Promise]> Closes the browser context. All the pages that belong to the browser context will be closed. > **NOTE** the default browser context cannot be closed. #### browserContext.cookies([urls]) - `urls` <[string]|[Array]<[string]>> - returns: <[Promise]<[Array]<[Object]>>> - `name` <[string]> - `value` <[string]> - `domain` <[string]> - `path` <[string]> - `expires` <[number]> Unix time in seconds. - `httpOnly` <[boolean]> - `secure` <[boolean]> - `sameSite` <"Strict"|"Lax"|"None"> If no URLs are specified, this method returns all cookies. If URLs are specified, only cookies that affect those URLs are returned. #### browserContext.exposeFunction(name, playwrightFunction) - `name` <[string]> Name of the function on the window object. - `playwrightFunction` <[function]> Callback function that will be called in the Playwright's context. - returns: <[Promise]> The method adds a function called `name` on the `window` object of every frame in every page in the context. When called, the function executes `playwrightFunction` in node.js and returns a [Promise] which resolves to the return value of `playwrightFunction`. If the `playwrightFunction` returns a [Promise], it will be awaited. See [page.exposeFunction(name, playwrightFunction)](#pageexposefunctionname-playwrightfunction) for page-only version. > **NOTE** Functions installed via `page.exposeFunction` survive navigations. An example of adding an `md5` function to all pages in the context: ```js const { webkit } = require('playwright'); // Or 'chromium' or 'firefox'. const crypto = require('crypto'); (async () => { const browser = await webkit.launch({ headless: false }); const context = await browser.newContext(); await context.exposeFunction('md5', text => crypto.createHash('md5').update(text).digest('hex')); const page = await context.newPage(); await page.setContent(`
`); await page.click('button'); })(); ``` #### browserContext.grantPermissions(permissions[][, options]) - `permissions` <[Array]<[string]>> A permission or an array of permissions to grant. Permissions can be one of the following values: - `'*'` - `'geolocation'` - `'midi'` - `'midi-sysex'` (system-exclusive midi) - `'notifications'` - `'push'` - `'camera'` - `'microphone'` - `'background-sync'` - `'ambient-light-sensor'` - `'accelerometer'` - `'gyroscope'` - `'magnetometer'` - `'accessibility-events'` - `'clipboard-read'` - `'clipboard-write'` - `'payment-handler'` - `options` <[Object]> - `origin` <[string]> The [origin] to grant permissions to, e.g. "https://example.com". - returns: <[Promise]> Grants specified permissions to the browser context. Only grants corresponding permissions to the given origin if specified. #### browserContext.newPage() - returns: <[Promise]<[Page]>> Creates a new page in the browser context. #### browserContext.pages() - returns: <[Array]<[Page]>> All open pages in the context. Non visible pages, such as `"background_page"`, will not be listed here. You can find them using [chromiumBrowserContext.backgroundPages()](#chromiumbrowsercontextbackgroundpages). #### browserContext.route(url, handler) - `url` <[string]|[RegExp]|[function]\([string]\):[boolean]> A glob pattern, regex pattern or predicate receiving [URL] to match while routing. - `handler` <[function]\([Route], [Request]\)> handler function to route the request. - returns: <[Promise]> Routing provides the capability to modify network requests that are made by any page in the browser context. Once route is enabled, every request matching the url pattern will stall unless it's continued, fulfilled or aborted. An example of a naïve handler that aborts all image requests: ```js const context = await browser.newContext(); await context.route('**/*.{png,jpg,jpeg}', route => route.abort()); const page = await context.newPage(); await page.goto('https://example.com'); await browser.close(); ``` or the same snippet using a regex pattern instead: ```js const context = await browser.newContext(); await context.route(/(\.png$)|(\.jpg$)/, route => route.abort()); const page = await context.newPage(); await page.goto('https://example.com'); await browser.close(); ``` Page routes (set up with [page.route(url, handler)](#pagerouteurl-handler)) take precedence over browser context routes when request matches both handlers. > **NOTE** Enabling routing disables http cache. #### browserContext.setDefaultNavigationTimeout(timeout) - `timeout` <[number]> Maximum navigation time in milliseconds This setting will change the default maximum navigation time for the following methods and related shortcuts: - [page.goBack([options])](#pagegobackoptions) - [page.goForward([options])](#pagegoforwardoptions) - [page.goto(url[, options])](#pagegotourl-options) - [page.reload([options])](#pagereloadoptions) - [page.setContent(html[, options])](#pagesetcontenthtml-options) - [page.waitForNavigation([options])](#pagewaitfornavigationoptions) > **NOTE** [`page.setDefaultNavigationTimeout`](#pagesetdefaultnavigationtimeouttimeout) and [`page.setDefaultTimeout`](#pagesetdefaulttimeouttimeout) take priority over [`browserContext.setDefaultNavigationTimeout`](#browsercontextsetdefaultnavigationtimeouttimeout). #### browserContext.setDefaultTimeout(timeout) - `timeout` <[number]> Maximum time in milliseconds This setting will change the default maximum time for all the methods accepting `timeout` option. > **NOTE** [`page.setDefaultNavigationTimeout`](#pagesetdefaultnavigationtimeouttimeout), [`page.setDefaultTimeout`](#pagesetdefaulttimeouttimeout) and [`browserContext.setDefaultNavigationTimeout`](#browsercontextsetdefaultnavigationtimeouttimeout) take priority over [`browserContext.setDefaultTimeout`](#browsercontextsetdefaulttimeouttimeout). #### browserContext.setExtraHTTPHeaders(headers) - `headers` <[Object]> An object containing additional HTTP headers to be sent with every request. All header values must be strings. - returns: <[Promise]> The extra HTTP headers will be sent with every request initiated by any page in the context. These headers are merged with page-specific extra HTTP headers set with [page.setExtraHTTPHeaders()](#pagesetextrahttpheadersheaders). If page overrides a particular header, page-specific header value will be used instead of the browser context header value. > **NOTE** `browserContext.setExtraHTTPHeaders` does not guarantee the order of headers in the outgoing requests. #### browserContext.setGeolocation(geolocation) - `geolocation` [Object]> - `latitude` <[number]> Latitude between -90 and 90. **required** - `longitude` <[number]> Longitude between -180 and 180. **required** - `accuracy` <[number]> Non-negative accuracy value. Defaults to `0`. - returns: <[Promise]> Sets the contexts's geolocation. Passing `null` or `undefined` emulates position unavailable. ```js await browserContext.setGeolocation({latitude: 59.95, longitude: 30.31667}); ``` > **NOTE** Consider using [browserContext.grantPermissions](#browsercontextgrantpermissionspermissions-options) to grant permissions for the browser context pages to read its geolocation. #### browserContext.setHTTPCredentials(httpCredentials) - `httpCredentials` [Object]> - `username` <[string]> **required** - `password` <[string]> **required** - returns: <[Promise]> Provide credentials for [HTTP authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication). To disable authentication, pass `null`. #### browserContext.setOffline(offline) - `offline` <[boolean]> Whether to emulate network being offline for the browser context. - returns: <[Promise]> #### browserContext.waitForEvent(event[, optionsOrPredicate]) - `event` <[string]> Event name, same one would pass into `browserContext.on(event)`. - `optionsOrPredicate` <[Function]|[Object]> Either a predicate that receives an event or an options object. - `predicate` <[Function]> receives the event data and resolves to truthy value when the waiting should resolve. - `timeout` <[number]> maximum time to wait for in milliseconds. Defaults to `30000` (30 seconds). Pass `0` to disable timeout. The default value can be changed by using the [browserContext.setDefaultTimeout(timeout)](#browsercontextsetdefaulttimeouttimeout). - returns: <[Promise]<[Object]>> Promise which resolves to the event data value. Waits for event to fire and passes its value into the predicate function. Resolves when the predicate returns truthy value. Will throw an error if the context closes before the event is fired. ```js const context = await browser.newContext(); await context.grantPermissions(['geolocation']); ``` ### class: Page * extends: [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter) Page provides methods to interact with a single tab in a [Browser], or an [extension background page](https://developer.chrome.com/extensions/background_pages) in Chromium. One [Browser] instance might have multiple [Page] instances. This example creates a page, navigates it to a URL, and then saves a screenshot: ```js const { webkit } = require('playwright'); // Or 'chromium' or 'firefox'. (async () => { const browser = await webkit.launch(); const context = await browser.newContext(); const page = await context.newPage(); await page.goto('https://example.com'); await page.screenshot({path: 'screenshot.png'}); await browser.close(); })(); ``` The Page class emits various events (described below) which can be handled using any of Node's native [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter) methods, such as `on`, `once` or `removeListener`. This example logs a message for a single page `load` event: ```js page.once('load', () => console.log('Page loaded!')); ``` To unsubscribe from events use the `removeListener` method: ```js function logRequest(interceptedRequest) { console.log('A request was made:', interceptedRequest.url()); } page.on('request', logRequest); // Sometime later... page.removeListener('request', logRequest); ``` - [event: 'close'](#event-close-1) - [event: 'console'](#event-console) - [event: 'dialog'](#event-dialog) - [event: 'domcontentloaded'](#event-domcontentloaded) - [event: 'filechooser'](#event-filechooser) - [event: 'frameattached'](#event-frameattached) - [event: 'framedetached'](#event-framedetached) - [event: 'framenavigated'](#event-framenavigated) - [event: 'load'](#event-load) - [event: 'pageerror'](#event-pageerror) - [event: 'popup'](#event-popup) - [event: 'request'](#event-request) - [event: 'requestfailed'](#event-requestfailed) - [event: 'requestfinished'](#event-requestfinished) - [event: 'response'](#event-response) - [event: 'worker'](#event-worker) - [page.$(selector)](#pageselector) - [page.$$(selector)](#pageselector-1) - [page.$$eval(selector, pageFunction, arg)](#pageevalselector-pagefunction-arg) - [page.$eval(selector, pageFunction, arg)](#pageevalselector-pagefunction-arg-1) - [page.accessibility](#pageaccessibility) - [page.addInitScript(script[, arg])](#pageaddinitscriptscript-arg) - [page.addScriptTag(options)](#pageaddscripttagoptions) - [page.addStyleTag(options)](#pageaddstyletagoptions) - [page.check(selector, [options])](#pagecheckselector-options) - [page.click(selector[, options])](#pageclickselector-options) - [page.close([options])](#pagecloseoptions) - [page.content()](#pagecontent) - [page.context()](#pagecontext) - [page.coverage](#pagecoverage) - [page.dblclick(selector[, options])](#pagedblclickselector-options) - [page.emulateMedia(options)](#pageemulatemediaoptions) - [page.evaluate(pageFunction, arg)](#pageevaluatepagefunction-arg) - [page.evaluateHandle(pageFunction, arg)](#pageevaluatehandlepagefunction-arg) - [page.exposeFunction(name, playwrightFunction)](#pageexposefunctionname-playwrightfunction) - [page.fill(selector, value[, options])](#pagefillselector-value-options) - [page.focus(selector[, options])](#pagefocusselector-options) - [page.frame(options)](#pageframeoptions) - [page.frames()](#pageframes) - [page.goBack([options])](#pagegobackoptions) - [page.goForward([options])](#pagegoforwardoptions) - [page.goto(url[, options])](#pagegotourl-options) - [page.hover(selector[, options])](#pagehoverselector-options) - [page.isClosed()](#pageisclosed) - [page.keyboard](#pagekeyboard) - [page.mainFrame()](#pagemainframe) - [page.mouse](#pagemouse) - [page.opener()](#pageopener) - [page.pdf([options])](#pagepdfoptions) - [page.press(selector, key[, options])](#pagepressselector-key-options) - [page.reload([options])](#pagereloadoptions) - [page.route(url, handler)](#pagerouteurl-handler) - [page.screenshot([options])](#pagescreenshotoptions) - [page.selectOption(selector, values[, options])](#pageselectoptionselector-values-options) - [page.setContent(html[, options])](#pagesetcontenthtml-options) - [page.setDefaultNavigationTimeout(timeout)](#pagesetdefaultnavigationtimeouttimeout) - [page.setDefaultTimeout(timeout)](#pagesetdefaulttimeouttimeout) - [page.setExtraHTTPHeaders(headers)](#pagesetextrahttpheadersheaders) - [page.setViewportSize(viewportSize)](#pagesetviewportsizeviewportsize) - [page.title()](#pagetitle) - [page.type(selector, text[, options])](#pagetypeselector-text-options) - [page.uncheck(selector, [options])](#pageuncheckselector-options) - [page.url()](#pageurl) - [page.viewportSize()](#pageviewportsize) - [page.waitFor(selectorOrFunctionOrTimeout[, options[, arg]])](#pagewaitforselectororfunctionortimeout-options-arg) - [page.waitForEvent(event[, optionsOrPredicate])](#pagewaitforeventevent-optionsorpredicate) - [page.waitForFunction(pageFunction, arg[, options])](#pagewaitforfunctionpagefunction-arg-options) - [page.waitForLoadState([options])](#pagewaitforloadstateoptions) - [page.waitForNavigation([options])](#pagewaitfornavigationoptions) - [page.waitForRequest(urlOrPredicate[, options])](#pagewaitforrequesturlorpredicate-options) - [page.waitForResponse(urlOrPredicate[, options])](#pagewaitforresponseurlorpredicate-options) - [page.waitForSelector(selector[, options])](#pagewaitforselectorselector-options) - [page.workers()](#pageworkers) #### event: 'close' Emitted when the page closes. #### event: 'console' - <[ConsoleMessage]> Emitted when JavaScript within the page calls one of console API methods, e.g. `console.log` or `console.dir`. Also emitted if the page throws an error or a warning. The arguments passed into `console.log` appear as arguments on the event handler. An example of handling `console` event: ```js page.on('console', msg => { for (let i = 0; i < msg.args().length; ++i) console.log(`${i}: ${msg.args()[i]}`); }); page.evaluate(() => console.log('hello', 5, {foo: 'bar'})); ``` #### event: 'dialog' - <[Dialog]> Emitted when a JavaScript dialog appears, such as `alert`, `prompt`, `confirm` or `beforeunload`. Playwright can respond to the dialog via [Dialog]'s [accept](#dialogacceptprompttext) or [dismiss](#dialogdismiss) methods. #### event: 'domcontentloaded' Emitted when the JavaScript [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) event is dispatched. #### event: 'filechooser' - <[Object]> - `element` <[ElementHandle]> handle to the input element that was clicked - `multiple` <[boolean]> Whether file chooser allow for [multiple](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-multiple) file selection. Emitted when a file chooser is supposed to appear, such as after clicking the ``. Playwright can respond to it via setting the input files using [`elementHandle.setInputFiles`](#elementhandlesetinputfilesfiles). ```js page.on('filechooser', async ({element, multiple}) => { await element.setInputFiles('/tmp/myfile.pdf'); }); ``` #### event: 'frameattached' - <[Frame]> Emitted when a frame is attached. #### event: 'framedetached' - <[Frame]> Emitted when a frame is detached. #### event: 'framenavigated' - <[Frame]> Emitted when a frame is navigated to a new url. #### event: 'load' Emitted when the JavaScript [`load`](https://developer.mozilla.org/en-US/docs/Web/Events/load) event is dispatched. #### event: 'pageerror' - <[Error]> The exception message Emitted when an uncaught exception happens within the page. #### event: 'popup' - <[Page]> Page corresponding to "popup" window Emitted when the page opens a new tab or window. This event is emitted in addition to the [`browserContext.on('page')`](#event-page), but only for popups relevant to this page. The earliest moment that page is available is when it has navigated to the initial url. For example, when opening a popup with `window.open('http://example.com')`, this event will fire when the network request to "http://example.com" is done and its response has started loading in the popup. ```js const [popup] = await Promise.all([ page.waitForEvent('popup'), page.evaluate(() => window.open('https://example.com')), ]); console.log(await popup.evaluate('location.href')); ``` > **NOTE** Use [Page.waitForLoadState](#pagewaitforloadstateoptions) to wait until the page gets to a particular state (you should not need it in most cases). #### event: 'request' - <[Request]> Emitted when a page issues a request. The [request] object is read-only. In order to intercept and mutate requests, see !!!`page.route()` or `brows. #### event: 'requestfailed' - <[Request]> Emitted when a request fails, for example by timing out. > **NOTE** HTTP Error responses, such as 404 or 503, are still successful responses from HTTP standpoint, so request will complete with [`'requestfinished'`](#event-requestfinished) event and not with [`'requestfailed'`](#event-requestfailed). #### event: 'requestfinished' - <[Request]> Emitted when a request finishes successfully. #### event: 'response' - <[Response]> Emitted when a [response] is received. #### event: 'worker' - <[Worker]> Emitted when a dedicated [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) is spawned by the page. #### page.$(selector) - `selector` <[string]> A selector to query page for - returns: <[Promise][ElementHandle]>> The method runs `document.querySelector` within the page. If no element matches the selector, the return value resolves to `null`. Shortcut for [page.mainFrame().$(selector)](#frameselector). #### page.$$(selector) - `selector` <[string]> A selector to query page for - returns: <[Promise]<[Array]<[ElementHandle]>>> The method runs `document.querySelectorAll` within the page. If no elements match the selector, the return value resolves to `[]`. Shortcut for [page.mainFrame().$$(selector)](#frameselector-1). #### page.$$eval(selector, pageFunction, arg) - `selector` <[string]> A selector to query page for - `pageFunction` <[function]\([Array]<[Element]>\)> Function to be evaluated in browser context - `arg` <[Serializable]|[JSHandle]> Optional argument to pass to `pageFunction` - returns: <[Promise]<[Serializable]>> Promise which resolves to the return value of `pageFunction` This method runs `Array.from(document.querySelectorAll(selector))` within the page and passes it as the first argument to `pageFunction`. If `pageFunction` returns a [Promise], then `page.$$eval` would wait for the promise to resolve and return its value. Examples: ```js const divsCounts = await page.$$eval('div', (divs, min) => divs.length >= min, 10); ``` #### page.$eval(selector, pageFunction, arg) - `selector` <[string]> A selector to query page for - `pageFunction` <[function]\([Element]\)> Function to be evaluated in browser context - `arg` <[Serializable]|[JSHandle]> Optional argument to pass to `pageFunction` - returns: <[Promise]<[Serializable]>> Promise which resolves to the return value of `pageFunction` This method runs `document.querySelector` within the page 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 `page.$eval` would wait for the promise to resolve and return its value. Examples: ```js const searchValue = await page.$eval('#search', el => el.value); const preloadHref = await page.$eval('link[rel=preload]', el => el.href); const html = await page.$eval('.main-container', (e, suffix) => e.outerHTML + suffix, 'hello'); ``` Shortcut for [page.mainFrame().$eval(selector, pageFunction)](#frameevalselector-pagefunction-arg). #### page.accessibility - returns: <[Accessibility]> #### page.addInitScript(script[, arg]) - `script` <[function]|[string]|[Object]> Script to be evaluated in the page. - `path` <[string]> Path to the JavaScript file. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd). - `content` <[string]> Raw script content. - `arg` <[Serializable]> Optional argument to pass to `script` (only supported when passing a function). - returns: <[Promise]> Adds a script which would be evaluated in one of the following scenarios: - Whenever the page is navigated. - Whenever the child frame is attached or navigated. In this case, the scritp is evaluated in the context of the newly attached frame. The script is evaluated 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`. An example of overriding `Math.random` before the page loads: ```js // preload.js Math.random = () => 42; // In your playwright script, assuming the preload.js file is in same folder const preloadFile = fs.readFileSync('./preload.js', 'utf8'); await page.addInitScript(preloadFile); ``` > **NOTE** The order of evaluation of multiple scripts installed via [browserContext.addInitScript(script[, arg])](#browsercontextaddinitscriptscript-arg) and [page.addInitScript(script[, arg])](#pageaddinitscriptscript-arg) is not defined. #### page.addScriptTag(options) - `options` <[Object]> - `url` <[string]> URL of a script to be added. - `path` <[string]> Path to the JavaScript file to be injected into frame. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd). - `content` <[string]> Raw JavaScript content to be injected into frame. - `type` <[string]> Script type. Use 'module' in order to load a Javascript ES6 module. See [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) for more details. - returns: <[Promise]<[ElementHandle]>> which resolves to the added tag when the script's onload fires or when the script content was injected into frame. Adds a ` `); await page.click('button'); })(); ``` An example of adding a `window.readfile` function to the page: ```js const { chromium } = require('playwright'); // Or 'firefox' or 'webkit'. const fs = require('fs'); (async () => { const browser = await chromium.launch(); const page = await browser.newPage(); page.on('console', msg => console.log(msg.text())); await page.exposeFunction('readfile', async filePath => { return new Promise((resolve, reject) => { fs.readFile(filePath, 'utf8', (err, text) => { if (err) reject(err); else resolve(text); }); }); }); await page.evaluate(async () => { // use window.readfile to read contents of a file const content = await window.readfile('/etc/hosts'); console.log(content); }); await browser.close(); })(); ``` #### page.fill(selector, value[, options]) - `selector` <[string]> A selector to query page for. - `value` <[string]> Value to fill for the ``, `