/*! For license information please see ccf9c475.7ca588f8.js.LICENSE.txt */ "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[85574],{20602:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>c,contentTitle:()=>d,default:()=>o,frontMatter:()=>i,metadata:()=>a,toc:()=>h});var s=r(85893),n=r(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={},h=[{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 p(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h4:"h4",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,n.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h1,{id:"page-class",children:"Page class"}),"\n",(0,s.jsxs)(t.p,{children:["Page provides methods to interact with a single tab or ",(0,s.jsx)(t.a,{href:"https://developer.chrome.com/extensions/background_pages",children:"extension background page"})," in the browser."]}),"\n",(0,s.jsx)(t.admonition,{type:"note",children:(0,s.jsx)(t.p,{children:"One Browser instance might have multiple Page instances."})}),"\n",(0,s.jsx)(t.h4,{id:"signature",children:"Signature:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-typescript",children:"export declare abstract class Page extends EventEmitter\n"})}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Extends:"})," ",(0,s.jsx)(t.a,{href:"/next/api/puppeteer.eventemitter",children:"EventEmitter"}),"<",(0,s.jsx)(t.a,{href:"/next/api/puppeteer.pageevents",children:"PageEvents"}),">"]}),"\n",(0,s.jsx)(t.h2,{id:"remarks",children:"Remarks"}),"\n",(0,s.jsxs)(t.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,s.jsx)(t.code,{children:"Page"})," class."]}),"\n",(0,s.jsx)(t.h2,{id:"example-1",children:"Example 1"}),"\n",(0,s.jsx)(t.p,{children:"This example creates a page, navigates it to a URL, and then saves a screenshot:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.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,s.jsxs)(t.p,{children:["The Page class extends from Puppeteer's ",(0,s.jsx)(t.a,{href:"/next/api/puppeteer.eventemitter",children:"EventEmitter"})," class and will emit various events which are documented in the ",(0,s.jsx)(t.a,{href:"/next/api/puppeteer.pageevent",children:"PageEvent"})," enum."]}),"\n",(0,s.jsx)(t.h2,{id:"example-2",children:"Example 2"}),"\n",(0,s.jsxs)(t.p,{children:["This example logs a message for a single page ",(0,s.jsx)(t.code,{children:"load"})," event:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-ts",children:"page.once('load', () => console.log('Page loaded!'));\n"})}),"\n",(0,s.jsxs)(t.p,{children:["To unsubscribe from events use the ",(0,s.jsx)(t.a,{href:"/next/api/puppeteer.eventemitter.off",children:"EventEmitter.off()"})," method:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.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,s.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Property"}),(0,s.jsx)(t.th,{children:"Modifiers"}),(0,s.jsx)(t.th,{children:"Type"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"accessibility"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"readonly"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.accessibility",children:"Accessibility"})}),(0,s.jsxs)(t.td,{children:["The Accessibility class provides methods for inspecting the browser's accessibility tree. The accessibility tree is used by assistive technology such as ",(0,s.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Screen_reader",children:"screen readers"})," or ",(0,s.jsx)(t.a,{href:"https://en.wikipedia.org/wiki/Switch_access",children:"switches"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"coverage"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"readonly"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.coverage",children:"Coverage"})}),(0,s.jsx)(t.td,{children:"The Coverage class provides methods to gather information about parts of JavaScript and CSS that were used by the page."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"keyboard"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"readonly"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.keyboard",children:"Keyboard"})}),(0,s.jsxs)(t.td,{children:["Keyboard provides an api for managing a virtual keyboard. The high level api is ",(0,s.jsx)(t.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,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"mouse"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"readonly"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.mouse",children:"Mouse"})}),(0,s.jsx)(t.td,{children:"The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"touchscreen"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"readonly"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.touchscreen",children:"Touchscreen"})}),(0,s.jsx)(t.td,{children:"The Touchscreen class exposes touchscreen events."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:"tracing"}),(0,s.jsx)(t.td,{children:(0,s.jsx)("code",{children:"readonly"})}),(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.tracing",children:"Tracing"})}),(0,s.jsx)(t.td,{children:"The Tracing class exposes the tracing audit interface."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"methods",children:"Methods"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{children:"Method"}),(0,s.jsx)(t.th,{children:"Modifiers"}),(0,s.jsx)(t.th,{children:"Description"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.page._",children:"$(selector)"})}),(0,s.jsx)(t.td,{}),(0,s.jsxs)(t.td,{children:["Runs ",(0,s.jsx)("code",{children:"document.querySelector"})," within the page. If no element matches the selector, the return value resolves to ",(0,s.jsx)("code",{children:"null"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.page.__",children:"$$(selector)"})}),(0,s.jsx)(t.td,{}),(0,s.jsxs)(t.td,{children:["The method runs ",(0,s.jsx)("code",{children:"document.querySelectorAll"})," within the page. If no elements match the selector, the return value resolves to ",(0,s.jsx)("code",{children:"[]"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.page.__eval",children:"$$eval(selector, pageFunction, args)"})}),(0,s.jsx)(t.td,{}),(0,s.jsxs)(t.td,{children:["This method runs ",(0,s.jsx)("code",{children:"Array.from(document.querySelectorAll(selector))"})," within the page and passes the result as the first argument to the ",(0,s.jsx)("code",{children:"pageFunction"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.page._eval",children:"$eval(selector, pageFunction, args)"})}),(0,s.jsx)(t.td,{}),(0,s.jsxs)(t.td,{children:["This method runs ",(0,s.jsx)("code",{children:"document.querySelector"})," within the page and passes the result as the first argument to the ",(0,s.jsx)("code",{children:"pageFunction"}),"."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.page._x",children:"$x(expression)"})}),(0,s.jsx)(t.td,{}),(0,s.jsx)(t.td,{children:"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."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{children:(0,s.jsx)(t.a,{href:"/next/api/puppeteer.page.addscripttag",children:"addScriptTag(options)"})}),(0,s.jsx)(t.td,{}),(0,s.jsxs)(t.td,{children:["Adds a ",(0,s.jsx)("code",{children:"