/*! For license information please see ccf9c475.9f4089c8.js.LICENSE.txt */ "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[85574],{26389:(e,s,t)=>{t.r(s),t.d(s,{assets:()=>c,contentTitle:()=>d,default:()=>p,frontMatter:()=>i,metadata:()=>a,toc:()=>l});var r=t(85893),n=t(11151);const i={sidebar_label:"Page"},d="Page class",a={id:"api/puppeteer.page",title:"Page class",description:"Page provides methods to interact with a single tab or extension background page in the browser.",source:"@site/../docs/api/puppeteer.page.md",sourceDirName:"api",slug:"/api/puppeteer.page",permalink:"/next/api/puppeteer.page",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{sidebar_label:"Page"},sidebar:"api",previous:{title:"BrowserContext.waitForTarget",permalink:"/next/api/puppeteer.browsercontext.waitfortarget"},next:{title:"Page.$",permalink:"/next/api/puppeteer.page._"}},c={},l=[{value:"Signature:",id:"signature",level:4},{value:"Remarks",id:"remarks",level:2},{value:"Example 1",id:"example-1",level:2},{value:"Example 2",id:"example-2",level:2},{value:"Properties",id:"properties",level:2},{value:"Methods",id:"methods",level:2}];function h(e){const s={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.h1,{id:"page-class",children:"Page class"}),"\n",(0,r.jsxs)(s.p,{children:["Page provides methods to interact with a single tab or ",(0,r.jsx)(s.a,{href:"https://developer.chrome.com/extensions/background_pages",children:"extension background page"})," in the browser."]}),"\n",(0,r.jsx)(s.admonition,{type:"note",children:(0,r.jsx)(s.p,{children:"One Browser instance might have multiple Page instances."})}),"\n",(0,r.jsx)(s.h4,{id:"signature",children:"Signature:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-typescript",children:"export declare abstract class Page extends EventEmitter\n"})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Extends:"})," ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.eventemitter",children:"EventEmitter"}),"<",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.pageevents",children:"PageEvents"}),">"]}),"\n",(0,r.jsx)(s.h2,{id:"remarks",children:"Remarks"}),"\n",(0,r.jsxs)(s.p,{children:["The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the ",(0,r.jsx)(s.code,{children:"Page"})," class."]}),"\n",(0,r.jsx)(s.h2,{id:"example-1",children:"Example 1"}),"\n",(0,r.jsx)(s.p,{children:"This example creates a page, navigates it to a URL, and then saves a screenshot:"}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"import puppeteer from 'puppeteer';\n\n(async () => {\n const browser = await puppeteer.launch();\n const page = await browser.newPage();\n await page.goto('https://example.com');\n await page.screenshot({path: 'screenshot.png'});\n await browser.close();\n})();\n"})}),"\n",(0,r.jsxs)(s.p,{children:["The Page class extends from Puppeteer's ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.eventemitter",children:"EventEmitter"})," class and will emit various events which are documented in the ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.pageevent",children:"PageEvent"})," enum."]}),"\n",(0,r.jsx)(s.h2,{id:"example-2",children:"Example 2"}),"\n",(0,r.jsxs)(s.p,{children:["This example logs a message for a single page ",(0,r.jsx)(s.code,{children:"load"})," event:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"page.once('load', () => console.log('Page loaded!'));\n"})}),"\n",(0,r.jsxs)(s.p,{children:["To unsubscribe from events use the ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.eventemitter.off",children:"EventEmitter.off()"})," method:"]}),"\n",(0,r.jsx)(s.pre,{children:(0,r.jsx)(s.code,{className:"language-ts",children:"function logRequest(interceptedRequest) {\n console.log('A request was made:', interceptedRequest.url());\n}\npage.on('request', logRequest);\n// Sometime later...\npage.off('request', logRequest);\n"})}),"\n",(0,r.jsx)(s.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsxs)("table",{children:[(0,r.jsx)("thead",{children:(0,r.jsxs)("tr",{children:[(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Property"})}),(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Modifiers"})}),(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Type"})}),(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Description"})})]})}),(0,r.jsxs)("tbody",{children:[(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"accessibility",children:"accessibility"})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"readonly"})})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.accessibility",children:"Accessibility"})})}),(0,r.jsxs)("td",{children:[(0,r.jsxs)(s.p,{children:["The Accessibility class provides methods for inspecting the browser's accessibility tree. The accessibility tree is used by assistive technology such as ",(0,r.jsx)(s.a,{href:"https://en.wikipedia.org/wiki/Screen_reader",children:"screen readers"})," or ",(0,r.jsx)(s.a,{href:"https://en.wikipedia.org/wiki/Switch_access",children:"switches"}),"."]}),(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Remarks:"})}),(0,r.jsx)(s.p,{children:"Accessibility is a very platform-specific thing. On different platforms, there are different screen readers that might have wildly different output."}),(0,r.jsx)(s.p,{children:'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.'}),(0,r.jsx)(s.p,{children:'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.'}),(0,r.jsxs)(s.p,{children:["The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the ",(0,r.jsx)(s.code,{children:"Accessibility"})," class."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"coverage",children:"coverage"})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"readonly"})})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.coverage",children:"Coverage"})})}),(0,r.jsxs)("td",{children:[(0,r.jsx)(s.p,{children:"The Coverage class provides methods to gather information about parts of JavaScript and CSS that were used by the page."}),(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Remarks:"})}),(0,r.jsxs)(s.p,{children:["To output coverage in a form consumable by ",(0,r.jsx)(s.a,{href:"https://github.com/istanbuljs",children:"Istanbul"}),", see ",(0,r.jsx)(s.a,{href:"https://github.com/istanbuljs/puppeteer-to-istanbul",children:"puppeteer-to-istanbul"}),"."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"keyboard",children:"keyboard"})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"readonly"})})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.keyboard",children:"Keyboard"})})}),(0,r.jsxs)("td",{children:[(0,r.jsxs)(s.p,{children:["Keyboard provides an api for managing a virtual keyboard. The high level api is ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.keyboard.type",children:"Keyboard.type()"}),", which takes raw characters and generates proper keydown, keypress/input, and keyup events on your page."]}),(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Remarks:"})}),(0,r.jsxs)(s.p,{children:["For finer control, you can use ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.keyboard.down",children:"Keyboard.down()"}),", ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.keyboard.up",children:"Keyboard.up()"}),", and ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.keyboard.sendcharacter",children:"Keyboard.sendCharacter()"})," to manually fire events as if they were generated from a real keyboard."]}),(0,r.jsxs)(s.p,{children:["On macOS, keyboard shortcuts like ",(0,r.jsx)(s.code,{children:"\u2318 A"})," -> Select All do not work. See ",(0,r.jsx)(s.a,{href:"https://github.com/puppeteer/puppeteer/issues/1313",children:"#1313"}),"."]}),(0,r.jsxs)(s.p,{children:["The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the ",(0,r.jsx)(s.code,{children:"Keyboard"})," class."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"mouse",children:"mouse"})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"readonly"})})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.mouse",children:"Mouse"})})}),(0,r.jsxs)("td",{children:[(0,r.jsx)(s.p,{children:"The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport."}),(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Remarks:"})}),(0,r.jsxs)(s.p,{children:["Every ",(0,r.jsx)(s.code,{children:"page"})," object has its own Mouse, accessible with [",(0,r.jsx)(s.code,{children:"page.mouse"}),"](#pagemouse)."]}),(0,r.jsxs)(s.p,{children:["The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the ",(0,r.jsx)(s.code,{children:"Mouse"})," class."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"touchscreen",children:"touchscreen"})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"readonly"})})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.touchscreen",children:"Touchscreen"})})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:"The Touchscreen class exposes touchscreen events."})})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"tracing",children:"tracing"})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.code,{children:"readonly"})})}),(0,r.jsx)("td",{children:(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.tracing",children:"Tracing"})})}),(0,r.jsxs)("td",{children:[(0,r.jsx)(s.p,{children:"The Tracing class exposes the tracing audit interface."}),(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Remarks:"})}),(0,r.jsxs)(s.p,{children:["You can use ",(0,r.jsx)(s.code,{children:"tracing.start"})," and ",(0,r.jsx)(s.code,{children:"tracing.stop"})," to create a trace file which can be opened in Chrome DevTools or ",(0,r.jsx)(s.a,{href:"https://chromedevtools.github.io/timeline-viewer/",children:"timeline viewer"}),"."]}),(0,r.jsxs)(s.p,{children:["The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the ",(0,r.jsx)(s.code,{children:"Tracing"})," class."]})]})]})]})]}),"\n",(0,r.jsx)(s.h2,{id:"methods",children:"Methods"}),"\n",(0,r.jsxs)("table",{children:[(0,r.jsx)("thead",{children:(0,r.jsxs)("tr",{children:[(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Method"})}),(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Modifiers"})}),(0,r.jsx)("th",{children:(0,r.jsx)(s.p,{children:"Description"})})]})}),(0,r.jsxs)("tbody",{children:[(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"_",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.page._",children:"$(selector)"})})}),(0,r.jsx)("td",{}),(0,r.jsxs)("td",{children:[(0,r.jsxs)(s.p,{children:["Finds the first element that matches the selector. If no element matches the selector, the return value resolves to ",(0,r.jsx)(s.code,{children:"null"}),"."]}),(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Remarks:"})}),(0,r.jsxs)(s.p,{children:["Shortcut for ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.frame._",children:"Page.mainFrame().$(selector)"}),"."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"__",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.page.__",children:"$$(selector, options)"})})}),(0,r.jsx)("td",{}),(0,r.jsxs)("td",{children:[(0,r.jsxs)(s.p,{children:["Finds elements on the page that match the selector. If no elements match the selector, the return value resolves to ",(0,r.jsx)(s.code,{children:"[]"}),"."]}),(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Remarks:"})}),(0,r.jsxs)(s.p,{children:["Shortcut for ",(0,r.jsx)(s.a,{href:"/next/api/puppeteer.frame.__",children:"Page.mainFrame().$$(selector)"}),"."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"__eval",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.page.__eval",children:"$$eval(selector, pageFunction, args)"})})}),(0,r.jsx)("td",{}),(0,r.jsxs)("td",{children:[(0,r.jsxs)(s.p,{children:["This method returns all elements matching the selector and passes the resulting array as the first argument to the ",(0,r.jsx)(s.code,{children:"pageFunction"}),"."]}),(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Remarks:"})}),(0,r.jsxs)(s.p,{children:["If ",(0,r.jsx)(s.code,{children:"pageFunction"})," returns a promise ",(0,r.jsx)(s.code,{children:"$$eval"})," will wait for the promise to resolve and then return its value."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"_eval",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.page._eval",children:"$eval(selector, pageFunction, args)"})})}),(0,r.jsx)("td",{}),(0,r.jsxs)("td",{children:[(0,r.jsxs)(s.p,{children:["This method finds the first element within the page that matches the selector and passes the result as the first argument to the ",(0,r.jsx)(s.code,{children:"pageFunction"}),"."]}),(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Remarks:"})}),(0,r.jsxs)(s.p,{children:["If no element is found matching ",(0,r.jsx)(s.code,{children:"selector"}),", the method will throw an error."]}),(0,r.jsxs)(s.p,{children:["If ",(0,r.jsx)(s.code,{children:"pageFunction"})," returns a promise ",(0,r.jsx)(s.code,{children:"$eval"})," will wait for the promise to resolve and then return its value."]})]})]}),(0,r.jsxs)("tr",{children:[(0,r.jsx)("td",{children:(0,r.jsx)("span",{id:"addscripttag",children:(0,r.jsx)(s.a,{href:"/next/api/puppeteer.page.addscripttag",children:"addScriptTag(options)"})})}),(0,r.jsx)("td",{}),(0,r.jsxs)("td",{children:[(0,r.jsxs)(s.p,{children:["Adds a ",(0,r.jsx)(s.code,{children:"