# class:page
### class: Page v0.9.0
- 繼承: [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter)
Page 提供操作一個 tab 頁或者 [extension background page](https://developer.chrome.com/extensions/background_pages) 的方法。一個 [Browser](#?product=Puppeteer&version=v1.11.0&show=api-class-browser "Browser") 實例可以有多個 [Page](#?product=Puppeteer&version=v1.11.0&show=api-class-page "Page") 實例。
下面的例子創建一個 Page 實例,導航到一個 url ,然后保存截圖:
```
const puppeteer = require('puppeteer');puppeteer.launch().then(async browser => { const page = await browser.newPage(); await page.goto('https://example.com'); await page.screenshot({path: 'screenshot.png'}); await browser.close();});
```
Page會觸發多種事件(下面描述的),可以用 `node` [原生的方法](https://nodejs.org/api/events.html#events_class_eventemitter) 來捕獲處理,比如 `on`,`once` 或者 `removeListener`。
下面的例子捕獲了一個 `page` 實例的 `load` 事件,打印了一句話:
```
page.once('load', () => console.log('Page loaded!'));
```
可以用 `removeListener` 取消對事件的監聽:
```
function logRequest(interceptedRequest) { console.log('A request was made:', interceptedRequest.url());}page.on('request', logRequest);// 一段時間后...page.removeListener('request', logRequest);
```
#### Events
- [page.on('close')](#?product=Puppeteer&version=v1.11.0&show=api-event-close)v0.9.0
- [page.on('console')](#?product=Puppeteer&version=v1.11.0&show=api-event-console)v0.9.0
- [page.on('dialog')](#?product=Puppeteer&version=v1.11.0&show=api-event-dialog)v0.9.0
- [page.on('domcontentloaded')](#?product=Puppeteer&version=v1.11.0&show=api-event-domcontentloaded)v0.9.0
- [page.on('error')](#?product=Puppeteer&version=v1.11.0&show=api-event-error)v0.9.0
- [page.on('frameattached')](#?product=Puppeteer&version=v1.11.0&show=api-event-frameattached)v0.9.0
- [page.on('framedetached')](#?product=Puppeteer&version=v1.11.0&show=api-event-framedetached)v0.9.0
- [page.on('framenavigated')](#?product=Puppeteer&version=v1.11.0&show=api-event-framenavigated)v0.9.0
- [page.on('load')](#?product=Puppeteer&version=v1.11.0&show=api-event-load)v0.9.0
- [page.on('metrics')](#?product=Puppeteer&version=v1.11.0&show=api-event-metrics)v0.9.0
- [page.on('pageerror')](#?product=Puppeteer&version=v1.11.0&show=api-event-pageerror)v0.9.0
- [page.on('request')](#?product=Puppeteer&version=v1.11.0&show=api-event-request)v0.9.0
- [page.on('requestfailed')](#?product=Puppeteer&version=v1.11.0&show=api-event-requestfailed)v0.9.0
- [page.on('requestfinished')](#?product=Puppeteer&version=v1.11.0&show=api-event-requestfinished)v0.9.0
- [page.on('response')](#?product=Puppeteer&version=v1.11.0&show=api-event-response)v0.9.0
- [page.on('workercreated')](#?product=Puppeteer&version=v1.11.0&show=api-event-workercreated)v0.9.0
- [page.on('workerdestroyed')](#?product=Puppeteer&version=v1.11.0&show=api-event-workerdestroyed)v0.9.0
#### Namespaces
- [page.accessibility](#?product=Puppeteer&version=v1.11.0&show=api-pageaccessibility)v0.9.0
- [page.coverage](#?product=Puppeteer&version=v1.11.0&show=api-pagecoverage)v0.9.0
- [page.keyboard](#?product=Puppeteer&version=v1.11.0&show=api-pagekeyboard)v0.9.0
- [page.mouse](#?product=Puppeteer&version=v1.11.0&show=api-pagemouse)v0.9.0
- [page.touchscreen](#?product=Puppeteer&version=v1.11.0&show=api-pagetouchscreen)v0.9.0
- [page.tracing](#?product=Puppeteer&version=v1.11.0&show=api-pagetracing)v0.9.0
#### Methods
- [page.$(selector)](#?product=Puppeteer&version=v1.11.0&show=api-pageselector)v0.9.0
- [page.$$(selector)](#?product=Puppeteer&version=v1.11.0&show=api-pageselector-1)v0.9.0
- [page.$$eval(selector, pageFunction\[, ...args\])](#?product=Puppeteer&version=v1.11.0&show=api-pageevalselector-pagefunction-args)v0.9.0
- [page.$eval(selector, pageFunction\[, ...args\])](#?product=Puppeteer&version=v1.11.0&show=api-pageevalselector-pagefunction-args-1)v0.9.0
- [page.$x(expression)](#?product=Puppeteer&version=v1.11.0&show=api-pagexexpression)v0.9.0
- [page.addScriptTag(options)](#?product=Puppeteer&version=v1.11.0&show=api-pageaddscripttagoptions)v0.9.0
- [page.addStyleTag(options)](#?product=Puppeteer&version=v1.11.0&show=api-pageaddstyletagoptions)v0.9.0
- [page.authenticate(credentials)](#?product=Puppeteer&version=v1.11.0&show=api-pageauthenticatecredentials)v0.9.0
- [page.bringToFront()](#?product=Puppeteer&version=v1.11.0&show=api-pagebringtofront)v0.9.0
- [page.browser()](#?product=Puppeteer&version=v1.11.0&show=api-pagebrowser)v0.9.0
- [page.click(selector\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-pageclickselector-options)v0.9.0
- [page.close(\[options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagecloseoptions)v0.9.0
- [page.content()](#?product=Puppeteer&version=v1.11.0&show=api-pagecontent)v0.9.0
- [page.cookies(\[...urls\])](#?product=Puppeteer&version=v1.11.0&show=api-pagecookiesurls)v0.9.0
- [page.deleteCookie(...cookies)](#?product=Puppeteer&version=v1.11.0&show=api-pagedeletecookiecookies)v0.9.0
- [page.emulate(options)](#?product=Puppeteer&version=v1.11.0&show=api-pageemulateoptions)v0.9.0
- [page.emulateMedia(mediaType)](#?product=Puppeteer&version=v1.11.0&show=api-pageemulatemediamediatype)v0.9.0
- [page.evaluate(pageFunction\[, ...args\])](#?product=Puppeteer&version=v1.11.0&show=api-pageevaluatepagefunction-args)v0.9.0
- [page.evaluateHandle(pageFunction\[, ...args\])](#?product=Puppeteer&version=v1.11.0&show=api-pageevaluatehandlepagefunction-args)v0.9.0
- [page.evaluateOnNewDocument(pageFunction\[, ...args\])](#?product=Puppeteer&version=v1.11.0&show=api-pageevaluateonnewdocumentpagefunction-args)v0.9.0
- [page.exposeFunction(name, puppeteerFunction)](#?product=Puppeteer&version=v1.11.0&show=api-pageexposefunctionname-puppeteerfunction)v0.9.0
- [page.focus(selector)](#?product=Puppeteer&version=v1.11.0&show=api-pagefocusselector)v0.9.0
- [page.frames()](#?product=Puppeteer&version=v1.11.0&show=api-pageframes)v0.9.0
- [page.goBack(\[options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagegobackoptions)v0.9.0
- [page.goForward(\[options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagegoforwardoptions)v0.9.0
- [page.goto(url\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagegotourl-options)v0.9.0
- [page.hover(selector)](#?product=Puppeteer&version=v1.11.0&show=api-pagehoverselector)v0.9.0
- [page.isClosed()](#?product=Puppeteer&version=v1.11.0&show=api-pageisclosed)v0.9.0
- [page.mainFrame()](#?product=Puppeteer&version=v1.11.0&show=api-pagemainframe)v0.9.0
- [page.metrics()](#?product=Puppeteer&version=v1.11.0&show=api-pagemetrics)v0.9.0
- [page.pdf(\[options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagepdfoptions)v0.9.0
- [page.queryObjects(prototypeHandle)](#?product=Puppeteer&version=v1.11.0&show=api-pagequeryobjectsprototypehandle)v0.9.0
- [page.reload(\[options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagereloadoptions)v0.9.0
- [page.screenshot(\[options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagescreenshotoptions)v0.9.0
- [page.select(selector, ...values)](#?product=Puppeteer&version=v1.11.0&show=api-pageselectselector-values)v0.9.0
- [page.setBypassCSP(enabled)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetbypasscspenabled)v0.9.0
- [page.setCacheEnabled(\[enabled\])](#?product=Puppeteer&version=v1.11.0&show=api-pagesetcacheenabledenabled)v0.9.0
- [page.setContent(html\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagesetcontenthtml-options)v0.9.0
- [page.setCookie(...cookies)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetcookiecookies)v0.9.0
- [page.setDefaultNavigationTimeout(timeout)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetdefaultnavigationtimeouttimeout)v0.9.0
- [page.setExtraHTTPHeaders(headers)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetextrahttpheadersheaders)v0.9.0
- [page.setGeolocation(options)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetgeolocationoptions)v0.9.0
- [page.setJavaScriptEnabled(enabled)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetjavascriptenabledenabled)v0.9.0
- [page.setOfflineMode(enabled)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetofflinemodeenabled)v0.9.0
- [page.setRequestInterception(value)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetrequestinterceptionvalue)v0.9.0
- [page.setUserAgent(userAgent)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetuseragentuseragent)v0.9.0
- [page.setViewport(viewport)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetviewportviewport)v0.9.0
- [page.tap(selector)](#?product=Puppeteer&version=v1.11.0&show=api-pagetapselector)v0.9.0
- [page.target()](#?product=Puppeteer&version=v1.11.0&show=api-pagetarget)v0.9.0
- [page.title()](#?product=Puppeteer&version=v1.11.0&show=api-pagetitle)v0.9.0
- [page.type(selector, text\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagetypeselector-text-options)v0.9.0
- [page.url()](#?product=Puppeteer&version=v1.11.0&show=api-pageurl)v0.9.0
- [page.viewport()](#?product=Puppeteer&version=v1.11.0&show=api-pageviewport)v0.9.0
- [page.waitFor(selectorOrFunctionOrTimeout\[, options\[, ...args\]\])](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitforselectororfunctionortimeout-options-args)v0.9.0
- [page.waitForFunction(pageFunction\[, options\[, ...args\]\])](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitforfunctionpagefunction-options-args)v0.9.0
- [page.waitForNavigation(\[options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitfornavigationoptions)v0.9.0
- [page.waitForRequest(urlOrPredicate\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitforrequesturlorpredicate-options)v0.9.0
- [page.waitForResponse(urlOrPredicate\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitforresponseurlorpredicate-options)v0.9.0
- [page.waitForSelector(selector\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitforselectorselector-options)v0.9.0
- [page.waitForXPath(xpath\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitforxpathxpath-options)v0.9.0
- [page.workers()](#?product=Puppeteer&version=v1.11.0&show=api-pageworkers)v0.9.0
### NameSpaces
#### page.accessibilityv0.9.0
- returns: <[Accessibility](#?product=Puppeteer&version=v1.11.0&show=api-class-accessibility "Accessibility")>
#### page.coveragev0.9.0
- returns: <[Coverage](#?product=Puppeteer&version=v1.11.0&show=api-class-coverage "Coverage")>
#### page.keyboardv0.9.0
- returns: <[Keyboard](#?product=Puppeteer&version=v1.11.0&show=api-class-keyboard "Keyboard")>
#### page.mousev0.9.0
- returns: <[Mouse](#?product=Puppeteer&version=v1.11.0&show=api-class-mouse "Mouse")>
#### page.touchscreenv0.9.0
- returns: <[Touchscreen](#?product=Puppeteer&version=v1.11.0&show=api-class-touchscreen "Touchscreen")>
#### page.tracingv0.9.0
- returns: <[Tracing](#?product=Puppeteer&version=v1.11.0&show=api-class-tracing "Tracing")>
### Events
#### page.on('close') v0.9.0
當頁面關閉時觸發。
#### page.on('console') v0.9.0
- <[ConsoleMessage](#?product=Puppeteer&version=v1.11.0&show=api-class-consolemessage "ConsoleMessage")>
當頁面js代碼調用了 `console` 的某個方法,比如 `console.log`,或者 `console.dir` 的時候觸發。(如果不監聽這個事件,js源碼的console語句不會輸出)。當頁面拋出一個錯誤或者經過的時候也會觸發。
js源碼中傳給 `console.log` 的參數,會傳給 `console` 事件的監聽器。
一個監聽 `console` 事件的例子:
```
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'})); // 這個代碼表示在頁面實例中執行了console.log。如果沒有監聽console事件,這里的輸出不會出現在你的控制臺
```
#### page.on('dialog') v0.9.0
- <[Dialog](#?product=Puppeteer&version=v1.11.0&show=api-class-dialog "Dialog")>
當js對話框出現的時候觸發,比如`alert`, `prompt`, `confirm` 或者 `beforeunload`。Puppeteer可以通過[Dialog](#?product=Puppeteer&version=v1.11.0&show=api-class-dialog "Dialog")'s [accept](#?product=Puppeteer&version=v1.11.0&show=api-dialogacceptprompttext) 或者 [dismiss](#?product=Puppeteer&version=v1.11.0&show=api-dialogdismiss)來響應彈窗。
#### page.on('domcontentloaded') v0.9.0
當頁面的 [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded)事件被觸發時觸發。
#### page.on('error') v0.9.0
- <[Error](https://nodejs.org/api/errors.html#errors_class_error "Error")>
當頁面崩潰時觸發。
> **注意**`error` 在 `node` 中有特殊的意義, 點擊 [error events](https://nodejs.org/api/events.html#events_error_events) 查看詳情。
#### page.on('frameattached') v0.9.0
- <[Frame](#?product=Puppeteer&version=v1.11.0&show=api-class-frame "Frame")>
當 `iframe` 加載的時候觸發。
#### page.on('framedetached') v0.9.0
- <[Frame](#?product=Puppeteer&version=v1.11.0&show=api-class-frame "Frame")>
當 `iframe` 從頁面移除的時候觸發。
#### page.on('framenavigated') v0.9.0
- <[Frame](#?product=Puppeteer&version=v1.11.0&show=api-class-frame "Frame")>
當 `iframe` 導航到新的 url 時觸發。
#### page.on('load') v0.9.0
當頁面的 [`load`](https://developer.mozilla.org/en-US/docs/Web/Events/load) 事件被觸發時觸發。
#### page.on('metrics') v0.9.0
- <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `title` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 傳給 `console.timeStamp` 方法的title參數。
- `metrics` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 包含度量對象的鍵值對,值是<[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")>類型
當頁面js代碼調用了 `console.timeStamp` 方法時觸發。`page.metrics` 章節有描述所有的 metrics。
#### page.on('pageerror') v0.9.0
- <[Error](https://nodejs.org/api/errors.html#errors_class_error "Error")> 異常信息
當發生頁面js代碼沒有捕獲的異常時觸發。
#### page.on('request') v0.9.0
- <[Request](#?product=Puppeteer&version=v1.11.0&show=api-class-request "Request")>
當頁面發送一個請求時觸發。參數 [request](#?product=Puppeteer&version=v1.11.0&show=api-class-request "Request") 對象是只讀的。 如果需要攔截并且改變請求,參考 `page.setRequestInterception` 章節。
#### page.on('requestfailed') v0.9.0
- <[Request](#?product=Puppeteer&version=v1.11.0&show=api-class-request "Request")>
當頁面的請求失敗時觸發。比如某個請求超時了。
#### page.on('requestfinished') v0.9.0
- <[Request](#?product=Puppeteer&version=v1.11.0&show=api-class-request "Request")>
當頁面的某個請求成功完成時觸發。
#### page.on('response') v0.9.0
- <[Response](#?product=Puppeteer&version=v1.11.0&show=api-class-response "Response")>
當頁面的某個請求接收到對應的 [response](#?product=Puppeteer&version=v1.11.0&show=api-class-response "Response") 時觸發。
#### page.on('workercreated') v0.9.0
- <[Worker](#?product=Puppeteer&version=v1.11.0&show=api-class-worker "Worker")>
當頁面生成相應的 [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 時觸發。
#### page.on('workerdestroyed') v0.9.0
- <[Worker](#?product=Puppeteer&version=v1.11.0&show=api-class-worker "Worker")>
當頁面終止相應的 [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 時觸發。
### Methods
#### page.$(selector)v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 選擇器
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<?[ElementHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-elementhandle "ElementHandle")>>
此方法在頁面內執行 `document.querySelector`。如果沒有元素匹配指定選擇器,返回值是 `null`。
[page.mainFrame().$(selector)](#?product=Puppeteer&version=v1.11.0&show=api-frameselector) 的簡寫。
#### page.$$(selector)v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 選擇器
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[ElementHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-elementhandle "ElementHandle")>>>
此方法在頁面內執行 `document.querySelectorAll`。如果沒有元素匹配指定選擇器,返回值是 `[]`。
[page.mainFrame().$$(selector)](#?product=Puppeteer&version=v1.11.0&show=api-frameselector-1) 的簡寫。
#### page.$$eval(selector, pageFunction\[, ...args\])v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 一個框架選擇器
- `pageFunction` <[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")> 在瀏覽器實例上下文中要執行的方法
- `...args` <...[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")|[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")> 要傳給 `pageFunction` 的參數。(比如你的代碼里生成了一個變量,在頁面中執行方法時需要用到,可以通過這個 `args` 傳進去)
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")>> Promise對象,完成后是 `pageFunction` 的返回值
此方法在頁面內執行 `Array.from(document.querySelectorAll(selector))`,然后把匹配到的元素數組作為第一個參數傳給 `pageFunction`。
如果 `pageFunction` 返回的是 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise"),那么此方法會等 promise 完成后返回其返回值。
示例:
```
const divsCounts = await page.$$eval('div', divs => divs.length);
```
#### page.$eval(selector, pageFunction\[, ...args\])v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 選擇器
- `pageFunction` <[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")> 在瀏覽器實例上下文中要執行的方法
- `...args` <...[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")|[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")> 要傳給 `pageFunction` 的參數。(比如你的代碼里生成了一個變量,在頁面中執行方法時需要用到,可以通過這個 `args` 傳進去)
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")>> Promise對象,完成后是 `pageFunction` 的返回值
此方法在頁面內執行 `document.querySelector`,然后把匹配到的元素作為第一個參數傳給 `pageFunction`。
如果 `pageFunction` 返回的是 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise"),那么此方法會等 promise 完成后返回其返回值。
示例:
```
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 => e.outerHTML);
```
[page.mainFrame().$eval(selector, pageFunction)](#?product=Puppeteer&version=v1.11.0&show=api-frameevalselector-pagefunction-args) 的簡寫。
#### page.$x(expression)v0.9.0
- `expression` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> XPath表達式,參考: [evaluate](https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate).
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[ElementHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-elementhandle "ElementHandle")>>>
此方法解析指定的XPath表達式。
[page.mainFrame().$x(expression)](#?product=Puppeteer&version=v1.11.0&show=api-framexexpression) 的簡寫。
#### page.addScriptTag(options)v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `url` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要添加的script的src
- `path` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要注入frame的js文件路徑. 如果 `path` 是相對路徑, 那么相對 [當前路徑](https://nodejs.org/api/process.html#process_process_cwd) 解析。
- `content` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要注入頁面的js代碼(即content)
- `type` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 腳本類型。 如果要注入 `ES6 module`,值為'module'。點擊 [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) 查看詳情。
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[ElementHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-elementhandle "ElementHandle")>> Promise對象,即注入完成的tag標簽。當 script 的 onload 觸發或者代碼被注入到 frame。
注入一個指定src(url)或者代碼(content)的 `script` 標簽到當前頁面。
[page.mainFrame().addScriptTag(options)](#?product=Puppeteer&version=v1.11.0&show=api-frameaddscripttagoptions) 的簡寫。
#### page.addStyleTag(options)v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `url` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> link標簽的href屬性值
- `path` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 樣式文件的路徑. 如果`path` 是相對路徑,那么相對 [當前路徑](https://nodejs.org/api/process.html#process_process_cwd)解析。
- `content` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> css代碼(即content)
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[ElementHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-elementhandle "ElementHandle")>> Promise對象,即注入完成的tag標簽。當style的onload觸發或者代碼被注入到frame。
添加一個指定link(url)的 `<link rel="stylesheet">` 標簽。 或者添加一個指定代碼(content)的 `<style type="text/css">` 標簽。
[page.mainFrame().addStyleTag(options)](#?product=Puppeteer&version=v1.11.0&show=api-frameaddstyletagoptions) 的簡寫。
#### page.authenticate(credentials)v0.9.0
- `credentials` <?[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `username` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `password` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
為[HTTP authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication) 提供認證憑據 。
傳 `null` 禁用認證。
#### page.bringToFront()v0.9.0
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
相當于多個tab時,切換到某個tab。
#### page.browser()v0.9.0
- returns: <[Browser](#?product=Puppeteer&version=v1.11.0&show=api-class-browser "Browser")>
得到當前 page 實例所屬的 browser 實例。
#### page.click(selector\[, options\])v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要點擊的元素的選擇器。 如果有多個匹配的元素, 點擊第一個。
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `button` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> `left`, `right`, 或者 `middle`, 默認是 `left`。
- `clickCount` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 默認是 1. 查看 [UIEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail "UIEvent.detail")。
- `delay` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> `mousedown` 和 `mouseup` 之間停留的時間,單位是毫秒。默認是0
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")> Promise對象,匹配的元素被點擊。 如果沒有元素被點擊,Promise對象將被rejected。
此方法找到一個匹配 `selector` 選擇器的元素,如果需要會把此元素滾動到可視,然后通過 [page.mouse](#?product=Puppeteer&version=v1.11.0&show=api-pagemouse) 點擊它。 如果選擇器沒有匹配任何元素,此方法將會報錯。
要注意如果 `click()` 觸發了一個跳轉,會有一個獨立的 `page.waitForNavigation()` Promise對象需要等待。 正確的等待點擊后的跳轉是這樣的:
```
const [response] = await Promise.all([ page.waitForNavigation(waitOptions), page.click(selector, clickOptions),]);
```
[page.mainFrame().click(selector\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-frameclickselector-options) 的簡寫。
#### page.close(\[options\])v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `runBeforeUnload` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 默認 `false`. 是否執行 [before unload](https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload)
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
`page.close()` 在 beforeunload 處理之前默認不執行
> **注意** 如果 `runBeforeUnload` 設置為true,可能會彈出一個 `beforeunload` 對話框。 這個對話框需要通過頁面的 ['dialog'](#?product=Puppeteer&version=v1.11.0&show=api-event-dialog) 事件手動處理。
#### page.content()v0.9.0
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>>
返回頁面的完整 html 代碼,包括 doctype。
#### page.cookies(\[...urls\])v0.9.0
- `...urls` <...[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>>>
- `name` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `value` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `domain` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `path` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `expires` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> Unix time, 單位是秒
- `httpOnly` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")>
- `secure` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")>
- `session` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")>
- `sameSite` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> `"Strict"` 或者 `"Lax"`。
如果不指定任何 url,此方法返回當前頁面域名的 cookie。 如果指定了 url,只返回指定的 url 下的 cookie。
#### page.deleteCookie(...cookies)v0.9.0
- `...cookies` <...[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `name` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> **必須的參數**
- `url` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `domain` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `path` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `secure` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")>
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
#### page.emulate(options)v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `viewport` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `width` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面的寬度,單位像素.
- `height` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面的高度,單位像素.
- `deviceScaleFactor` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 定義設備縮放, (類似于 dpr). 默認 `1`。
- `isMobile` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 要不要包含`meta viewport` 標簽. 默認 `false`。
- `hasTouch`<[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 指定終端是否支持觸摸。默認 `false`
- `isLandscape` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 指定終端是不是 landscape 模式. 默認 `false`。
- `userAgent` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
根據指定的參數和 user agent 生成模擬器。此方法是和下面兩個方法效果相同:
- [page.setUserAgent(userAgent)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetuseragentuseragent)
- [page.setViewport(viewport)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetviewportviewport)
為了支持模擬器,puppeteer 提供了一些設備的參數選項,可以通過 `require('puppeteer/DeviceDescriptors')` 命令引入。 下面是通過 puppeteer 生成 iPhone 6 模擬器的例子:
```
const puppeteer = require('puppeteer');const devices = require('puppeteer/DeviceDescriptors');const iPhone = devices['iPhone 6'];puppeteer.launch().then(async browser => { const page = await browser.newPage(); await page.emulate(iPhone); await page.goto('https://www.google.com'); // 其他操作... await browser.close();});
```
支持的設備可以在這里找到: [DeviceDescriptors.js](https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js)。
#### page.emulateMedia(mediaType)v0.9.0
- `mediaType` <?[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 改變頁面的css媒體類型。支持的值僅包括 `'screen'`, `'print'` 和 `null`。傳 `null` 禁用媒體模擬
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
#### page.evaluate(pageFunction\[, ...args\])v0.9.0
- `pageFunction` <[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")|[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要在頁面實例上下文中執行的方法
- `...args` <...[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")|[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")> 要傳給 `pageFunction` 的參數
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")>> `pageFunction`執行的結果
如果pageFunction返回的是[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise"),`page.evaluate`將等待promise完成,并返回其返回值。
如果pageFunction返回的是不能序列化的值,將返回`undefined`
給`pageFunction`傳參數示例:
```
const result = await page.evaluate(x => { return Promise.resolve(8 * x);}, 7); // (譯者注: 7 可以是你自己代碼里任意方式得到的值)console.log(result); // 輸出 "56"
```
也可以傳一個字符串:
```
console.log(await page.evaluate('1 + 2')); // 輸出 "3"const x = 10;console.log(await page.evaluate(`1 + ${x}`)); // 輸出 "11"
```
[ElementHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-elementhandle "ElementHandle") 實例 可以作為參數傳給 `page.evaluate`:
```
const bodyHandle = await page.$('body');const html = await page.evaluate(body => body.innerHTML, bodyHandle);await bodyHandle.dispose();
```
[page.mainFrame().evaluate(pageFunction, ...args)](#?product=Puppeteer&version=v1.11.0&show=api-frameevaluatepagefunction-args) 的簡寫。
#### page.evaluateHandle(pageFunction\[, ...args\])v0.9.0
- `pageFunction` <[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")|[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要在頁面實例上下文中執行的方法
- `...args` <...[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")|[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")> 要傳給 `pageFunction` 的參數
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")>> `pageFunction` 執行的結果 頁內類型(JSHandle)
此方法和 `page.evaluate` 的唯一區別是此方法返回的是頁內類型(JSHandle)
如果傳給此方法的方法(參數)返回的是Promise對象,將等待promise完成并返回其返回值
也可以傳一個字符串替代方法:
```
const aHandle = await page.evaluateHandle('document'); // 'document'對象
```
[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle") 實例可以作為 `page.evaluateHandle`的參數:
```
const aHandle = await page.evaluateHandle(() => document.body);const resultHandle = await page.evaluateHandle(body => body.innerHTML, aHandle);console.log(await resultHandle.jsonValue());await resultHandle.dispose();
```
[page.mainFrame().executionContext().evaluateHandle(pageFunction, ...args)](#?product=Puppeteer&version=v1.11.0&show=api-executioncontextevaluatehandlepagefunction-args) 的簡寫。
#### page.evaluateOnNewDocument(pageFunction\[, ...args\])v0.9.0
- `pageFunction` <[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")|[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要在頁面實例上下文中執行的方法
- `...args` <...[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")> 要傳給 `pageFunction` 的參數
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
添加一個方法,在以下某個場景被調用:
- 頁面導航完成后
- 頁面的iframe加載或導航完成。這種場景,指定的函數被調用的上下文是新加載的iframe。
指定的函數在所屬的頁面被創建并且所屬頁面的任意 script 執行之前被調用。常用于修改頁面js環境,比如給 `Math.random` 設定種子
下面是在頁面加載前重寫 `navigator.languages` 屬性的例子:
```
// preload.js// 重寫 `languages` 屬性,使其用一個新的get方法Object.defineProperty(navigator, "languages", { get: function() { return ["en-US", "en", "bn"]; }});// 假設 preload.js 和當前的代碼在同一個目錄const preloadFile = fs.readFileSync('./preload.js', 'utf8');await page.evaluateOnNewDocument(preloadFile);
```
#### page.exposeFunction(name, puppeteerFunction)v0.9.0
- `name` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 掛載到window對象的方法名
- `puppeteerFunction` <[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")> 調用name方法時實際執行的方法
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
此方法添加一個命名為 `name` 的方法到頁面的 `window` 對象 當調用 `name` 方法時,在 `node.js` 中執行 `puppeteerFunction`,并且返回 Promise 對象,解析后返回 `puppeteerFunction` 的返回值
如果 `puppeteerFunction` 返回的是 Promise 對象,此方法會等其解析后再返回
> **注意** 通過 `page.exposeFunction` 掛載到頁面的方法在多次跳轉后扔有用 (原文:> **NOTE** Functions installed via `page.exposeFunction` survive navigations.)
添加md5()到頁面的例子:
```
const puppeteer = require('puppeteer');const crypto = require('crypto');puppeteer.launch().then(async browser => { const page = await browser.newPage(); page.on('console', msg => console.log(msg.text())); await page.exposeFunction('md5', text => crypto.createHash('md5').update(text).digest('hex') ); await page.evaluate(async () => { // 使用 window.md5 計算哈希 const myString = 'PUPPETEER'; const myHash = await window.md5(myString); console.log(`md5 of ${myString} is ${myHash}`); }); await browser.close();});
```
添加 readfile() 到頁面的例子:
```
const puppeteer = require('puppeteer');const fs = require('fs');puppeteer.launch().then(async browser => { 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 () => { // 使用 window.readfile 讀取文件內容 const content = await window.readfile('/etc/hosts'); console.log(content); }); await browser.close();});
```
#### page.focus(selector)v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要給焦點的元素的選擇器[selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors "selector")。如果有多個匹配的元素,焦點給第一個元素。
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")> Promise對象,當`selector`選擇器匹配的元素獲得焦點后resolve。如果沒有元素匹配指定選擇器,將會rejected。
此方法找到一個匹配`selector`的元素,并且把焦點給它。 如果沒有匹配的元素,此方法將報錯。
[page.mainFrame().focus(selector)](#?product=Puppeteer&version=v1.11.0&show=api-framefocusselector) 的簡寫。
#### page.frames()v0.9.0
- 返回: <[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[Frame](#?product=Puppeteer&version=v1.11.0&show=api-class-frame "Frame")>> 加載到頁面中的所有iframe標簽
#### page.goBack(\[options\])v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 導航配置,可選值:
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 跳轉等待時間,單位是毫秒, 默認是30秒, 傳 `0` 表示無限等待。可以通過[page.setDefaultNavigationTimeout(timeout)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetdefaultnavigationtimeouttimeout)方法修改默認值
- `waitUntil` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")|[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>> 滿足什么條件認為頁面跳轉完成,默認是`load`事件觸發時。指定事件數組,那么所有事件觸發后才認為是跳轉完成。事件包括:
- `load` - 頁面的load事件觸發時
- `domcontentloaded` - 頁面的`DOMContentLoaded`事件觸發時
- `networkidle0` - 不再有網絡連接時觸發(至少500毫秒后)
- `networkidle2` - 只有2個網絡連接時觸發(至少500毫秒后)
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<?[Response](#?product=Puppeteer&version=v1.11.0&show=api-class-response "Response")>> Promise對象resolve后是主要的請求的響應。如果有多個跳轉, resolve后是最后一次跳轉的響應. 如果不能回退,解析后是null
導航到頁面歷史的前一個頁面。
#### page.goForward(\[options\])v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 導航配置,可選值:
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 跳轉等待時間,單位是毫秒, 默認是30秒, 傳 `0` 表示無限等待。可以通過[page.setDefaultNavigationTimeout(timeout)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetdefaultnavigationtimeouttimeout)方法修改默認值
- `waitUntil` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")|[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>> 滿足什么條件認為頁面跳轉完成,默認是 `load` 事件觸發時。指定事件數組,那么所有事件觸發后才認為是跳轉完成。事件包括:
- `load` - 頁面的load事件觸發時
- `domcontentloaded` - 頁面的 `DOMContentLoaded` 事件觸發時
- `networkidle0` - 不再有網絡連接時觸發(至少500毫秒后)
- `networkidle2` - 只有2個網絡連接時觸發(至少500毫秒后)
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<?[Response](#?product=Puppeteer&version=v1.11.0&show=api-class-response "Response")>> Promise對象resolve后是主要的請求的響應. 如果有多個跳轉, resolve后是最后一次跳轉的響應. 如果不能向前,resolve后是null
導航到頁面歷史的后一個頁面。
#### page.goto(url\[, options\])v0.9.0
- `url` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 導航到的地址. 地址應該帶有http協議, 比如 `https://`.
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 導航配置,可選值:
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 跳轉等待時間,單位是毫秒, 默認是30秒, 傳 `0` 表示無限等待。可以通過[page.setDefaultNavigationTimeout(timeout)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetdefaultnavigationtimeouttimeout)方法修改默認值
- `waitUntil` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")|[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>> 滿足什么條件認為頁面跳轉完成,默認是 `load` 事件觸發時。指定事件數組,那么所有事件觸發后才認為是跳轉完成。事件包括:
- `load` - 頁面的load事件觸發時
- `domcontentloaded` - 頁面的 `DOMContentLoaded` 事件觸發時
- `networkidle0` - 不再有網絡連接時觸發(至少500毫秒后)
- `networkidle2` - 只有2個網絡連接時觸發(至少500毫秒后)
- `referer` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> Referer header value. If provided it will take preference over the referer header value set by [page.setExtraHTTPHeaders()](#?product=Puppeteer&version=v1.11.0&show=api-pagesetextrahttpheadersheaders).
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<?[Response](#?product=Puppeteer&version=v1.11.0&show=api-class-response "Response")>> Promise對象resolve后是主要的請求的響應。如果有多個跳轉, resolve后是最后一次跳轉的響應
以下情況此方法將報錯:
- 發生了 SSL 錯誤 (比如有些自簽名的https證書).
- 目標地址無效
- 超時
- 主頁面不能加載
- the main resource failed to load.
> **注意**`page.goto` 拋出或返回主頁面的響應。唯一的例外是導航到 `about:blank` 或導航到具有不同散列的相同URL,這將成功并返回 `null`。
>
> **注意** 無頭模式不支持打開 PDF 文件。查看 [upstream issue](https://bugs.chromium.org/p/chromium/issues/detail?id=761295)。
快捷方式 [page.mainFrame().goto(url, options)](#?product=Puppeteer&version=v1.11.0&show=api-framegotourl-options)
#### page.hover(selector)v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要hover的元素的選擇器。如果有多個匹配的元素,hover第一個。
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")> Promise對象,當匹配的元素成功被hover后resolve。如果沒有匹配的元素,將會rejected。
此方法找到一個匹配的元素,如果需要會把此元素滾動到可視,然后通過 [page.mouse](#?product=Puppeteer&version=v1.11.0&show=api-pagemouse) 來hover到元素的中間。 如果沒有匹配的元素,此方法將會報錯。
[page.mainFrame().hover(selector)](#?product=Puppeteer&version=v1.11.0&show=api-framehoverselector) 的簡寫。
#### page.isClosed()v0.9.0
- returns: <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")>
表示頁面是否被關閉。
#### page.mainFrame()v0.9.0
- 返回: <[Frame](#?product=Puppeteer&version=v1.11.0&show=api-class-frame "Frame")> 返回頁面的主frame
保證頁面一直有有一個主 frame
#### page.metrics()v0.9.0
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>> 包含指標數據的鍵值對:
- `Timestamp` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 時間點(when the metrics sample was taken)
- `Documents` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面的documents數量。
- `Frames` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面的iframe數量。
- `JSEventListeners` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面的js事件數量。
- `Nodes` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面的dom節點數量。
- `LayoutCount` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 整頁面或部分頁面的布局數量。
- `RecalcStyleCount` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面樣式重新計算數量。
- `LayoutDuration` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面布局總時間。
- `RecalcStyleDuration` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面樣式重新計算總時間。
- `ScriptDuration` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面js代碼執行總時間。
- `TaskDuration` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面任務執行總時間。
- `JSHeapUsedSize` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面占用堆內存大小。
- `JSHeapTotalSize` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 總的頁面堆內存大小。
> **注意** All timestamps are in monotonic time: monotonically increasing time in seconds since an arbitrary point in the past.
#### page.pdf(\[options\])v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 可以有以下配置項:
- `path` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> pdf文件保存的路徑。如果是相對路徑,則相對[當前路徑](https://nodejs.org/api/process.html#process_process_cwd)。如果不指定路徑,將不保存到硬盤。
- `scale` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 頁面渲染的縮放。默認是1。縮放值必須介于0.1到2之間。
- `displayHeaderFooter` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 顯示頁眉和頁腳。默認是不顯示
- `headerTemplate` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 頁眉的html模板,可以有這些變量:
- `date` 格式化的日期
- `title` 網頁標題
- `url` 網頁地址
- `pageNumber` 當前頁碼
- `totalPages` 總頁數
- `footerTemplate` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 頁腳的html模板。和頁眉模板變量相同。
- `printBackground` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 是否打印背景圖. 默認是 `false`。
- `landscape` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 頁面橫向(?Paper orientation). 默認為 `false`.
- `pageRanges` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要輸出的頁碼范圍, 比如, '1-5, 8, 11-13'。默認是空字符串,表示全部頁碼。
- `format` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 頁面格式。如果設置了,將覆蓋 `width` 和 `height` 配置. 默認是 'Letter'。
- `width` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 頁面寬度, 接受帶單位的字符串。
- `height` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 頁面高度, 接受帶單位的字符串。
- `margin` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 頁面空白白邊配置,默認是空
- `top` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 頂部的白邊
- `right` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 右側白邊, 接受帶單位的字符串
- `bottom` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 底部白邊, 接受帶單位的字符串
- `left` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 左側白邊, 接受帶單位的字符串
- `preferCSSPageSize` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 給頁面優先級聲明的任何CSS `@page` 大小超過 `width` 和 `height` 或 `format` 選項中聲明的大小。 默認為 `false`,它將縮放內容以適合紙張大小。
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer "Buffer")>> Promise對象,resolve后是pdf buffer。
> **注意** 目前僅支持無頭模式的 Chrome
`page.pdf()` 生成當前頁面的pdf格式,帶著 `pring` css media。如果要生成帶著 `screen` media的pdf,在`page.pdf()` 前面先調用 [page.emulateMedia('screen')](#?product=Puppeteer&version=v1.11.0&show=api-pageemulatemediamediatype)
> **注意** 默認情況下,`page.pdf()` 生成一個帶有修改顏色的 pdf 用于打印。 使用\[`-webkit-print-color-adjust`\]([https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust)屬性強制渲染精確的顏色。](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust%EF%BC%89%E5%B1%9E%E6%80%A7%E5%BC%BA%E5%88%B6%E6%B8%B2%E6%9F%93%E7%B2%BE%E7%A1%AE%E7%9A%84%E9%A2%9C%E8%89%B2%E3%80%82)
```
// 生成 'screen' media 格式的pdf.await page.emulateMedia('screen');await page.pdf({path: 'page.pdf'});
```
`width`, `height`, 和 `margin` 接受帶單位的字符串. 不帶單位的默認是像素(px)
幾個例子:
- `page.pdf({width: 100})` - pdf將是 100 pixels寬
- `page.pdf({width: '100px'})` - pdf將是 100 pixels寬
- `page.pdf({width: '10cm'})` - pdf將是 10 厘米寬.
支持的單位包括:
- `px` - 像素
- `in` - 英寸
- `cm` - 厘米
- `mm` - 毫米
`format` 可選值:
- `Letter`: 8.5in x 11in
- `Legal`: 8.5in x 14in
- `Tabloid`: 11in x 17in
- `Ledger`: 17in x 11in
- `A0`: 33.1in x 46.8in
- `A1`: 23.4in x 33.1in
- `A2`: 16.5in x 23.4in
- `A3`: 11.7in x 16.5in
- `A4`: 8.27in x 11.7in
- `A5`: 5.83in x 8.27in
- `A6`: 4.13in x 5.83in
> **注意**`headerTemplate` 和 `footerTemplate` 有下面的限制:
>
> 1. js腳本不會被執行
> 2. 頁面的樣式對模板內無效
#### page.queryObjects(prototypeHandle)v0.9.0
- `prototypeHandle` <[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")> A handle to the object prototype.
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")>> Promise which resolves to a handle to an array of objects with this prototype.
此方法遍歷js堆棧,找到所有帶有指定原型的對象
```
// 創建 Map 對象await page.evaluate(() => window.map = new Map());// 獲取 Map 對象的原型const mapPrototype = await page.evaluateHandle(() => Map.prototype);// 查詢所有的 map 實例,存儲為一個數組const mapInstances = await page.queryObjects(mapPrototype);// 計算堆棧中 map 對象的數量const count = await page.evaluate(maps => maps.length, mapInstances);await mapInstances.dispose();await mapPrototype.dispose();
```
[page.mainFrame().executionContext().queryObjects(prototypeHandle)](#?product=Puppeteer&version=v1.11.0&show=api-executioncontextqueryobjectsprototypehandle) 的簡寫
#### page.reload(\[options\])v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 導航配置,可選值:
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 跳轉等待時間,單位是毫秒, 默認是30秒, 傳 `0` 表示無限等待。可以通過[page.setDefaultNavigationTimeout(timeout)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetdefaultnavigationtimeouttimeout)方法修改默認值
- `waitUntil` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")|[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>> 滿足什么條件認為頁面跳轉完成,默認是 `load` 事件觸發時。指定事件數組,那么所有事件觸發后才認為是跳轉完成。事件包括:
- `load` - 頁面的load事件觸發時
- `domcontentloaded` - 頁面的 `DOMContentLoaded` 事件觸發時
- `networkidle0` - 不再有網絡連接時觸發(至少500毫秒后)
- `networkidle2` - 只有2個網絡連接時觸發(至少500毫秒后)
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<?[Response](#?product=Puppeteer&version=v1.11.0&show=api-class-response "Response")>> Promise對象解析后是主要的請求的響應. 如果有多個跳轉, 解析后是最后一次跳轉的響應
#### page.screenshot(\[options\])v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 可選配置:
- `path` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 截圖保存路徑。截圖圖片類型將從文件擴展名推斷出來。如果是相對路徑,則從[當前路徑](https://nodejs.org/api/process.html#process_process_cwd)解析。如果沒有指定路徑,圖片將不會保存到硬盤。
- `type` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 指定截圖類型, 可以是 `jpeg` 或者 `png`。默認 'png'.
- `quality` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 圖片質量, 可選值 0-100. `png` 類型不適用。
- `fullPage` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 如果設置為true,則對完整的頁面(需要滾動的部分也包含在內)。默認是false
- `clip` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 指定裁剪區域。需要配置:
- `x` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 裁剪區域相對于左上角(0, 0)的x坐標
- `y` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 裁剪區域相對于左上角(0, 0)的y坐標
- `width` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 裁剪的寬度
- `height` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 裁剪的高度
- `omitBackground` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 隱藏默認的白色背景,背景透明。默認不透明
- `encoding` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 圖像的編碼可以是 `base64` 或 `binary`。 默認為“二進制”。
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<\[Buffer|String\]>> Promise對象,resolve后是截圖的buffer
> **備注** 在OS X上 截圖需要至少1/6秒。查看討論:[https://crbug.com/741689。](https://crbug.com/741689%E3%80%82)
#### page.select(selector, ...values)v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要查找的選擇器
- `...values` <...[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 查找的配置項。如果選擇器有多個屬性,所有的值都會查找,否則只有第一個元素被找到。(翻譯不一定準確,具體要實驗)
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>>> 所有符合的元素
當提供的選擇器完成選中后,觸發`change`和`input`事件 如果沒有元素匹配指定選擇器,將報錯。
```
page.select('select#colors', 'blue'); // 單選擇器page.select('select#colors', 'red', 'green', 'blue'); // 多選擇器
```
[page.mainFrame().select()](#?product=Puppeteer&version=v1.11.0&show=api-frameselectselector-values) 的簡寫
#### page.setBypassCSP(enabled)v0.9.0
- `enabled` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 設置繞過頁面的安全政策
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
設置繞過頁面的安全政策
> **注意** CSP 發生在 CSP 初始化而不是評估階段。也就是說應該在導航到這個域名前設置
#### page.setCacheEnabled(\[enabled\])v0.9.0
\-- `enabled` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 設置緩存的 `enabled` 狀態
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
設置每個請求忽略緩存。默認是啟用緩存的。
#### page.setContent(html\[, options\])v0.9.0
- `...cookies` <...[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `name` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> **required**
- `value` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> **required**
- `url` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `domain` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `path` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `expires` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> Unix time in seconds.
- `httpOnly` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")>
- `secure` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")>
- `sameSite` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> `"Strict"` 或 `"Lax"`。
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
await page.setCookie(cookieObject1, cookieObject2);
#### page.setCookie(...cookies)v0.9.0
- `...cookies` <...[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `name` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> **required**
- `value` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> **required**
- `url` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `domain` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `path` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
- `expires` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> Unix time in seconds.
- `httpOnly` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")>
- `secure` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")>
- `sameSite` <"Strict"|"Lax">
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
await page.setCookie(cookieObject1, cookieObject2);
#### page.setDefaultNavigationTimeout(timeout)v0.9.0
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 最多等待時間,單位是毫秒
此方法會改變下面幾個方法的默認30秒等待時間:
- [page.goto(url, options)](#?product=Puppeteer&version=v1.11.0&show=api-pagegotourl-options)
- [page.goBack(options)](#?product=Puppeteer&version=v1.11.0&show=api-pagegobackoptions)
- [page.goForward(options)](#?product=Puppeteer&version=v1.11.0&show=api-pagegoforwardoptions)
- [page.reload(options)](#?product=Puppeteer&version=v1.11.0&show=api-pagereloadoptions)
- [page.waitForNavigation(options)](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitfornavigationoptions)
#### page.setExtraHTTPHeaders(headers)v0.9.0
- `headers` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 每個 HTTP 請求都會帶上這些請求頭。值必須是字符串
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
當前頁面發起的每個請求都會帶上這些請求頭
> **注意** 此方法不保證請求頭的順序
#### page.setGeolocation(options)v0.9.0
- `options`
- `latitude` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> Latitude between -90 and 90.
- `longitude` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> Longitude between -180 and 180.
- `accuracy` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> Optional non-negative accuracy value.
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
Sets the page's geolocation.
```
await page.setGeolocation({latitude: 59.95, longitude: 30.31667});
```
> **注意** 考慮使用 [browserContext.overridePermissions](#?product=Puppeteer&version=v1.11.0&show=api-browsercontextoverridepermissionsorigin-permissions) 授予頁面權限去讀取地址位置。
#### page.setJavaScriptEnabled(enabled)v0.9.0
- `enabled` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 是否啟用js
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
> **注意** 改變這個值不會影響已經執行的js。下一個跳轉會完全起作用。
#### page.setOfflineMode(enabled)v0.9.0
- `enabled` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 設置 `true`, 啟用離線模式。
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
#### page.setRequestInterception(value)v0.9.0
- `value` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 是否啟用請求攔截器
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
啟用請求攔截器,會激活 `request.abort`, `request.continue` 和 `request.respond` 方法。這提供了修改頁面發出的網絡請求的功能。
一旦啟用請求攔截,每個請求都將停止,除非它繼續,響應或中止。 通過請求攔截器取消所有圖片請求:
```
const puppeteer = require('puppeteer');puppeteer.launch().then(async browser => { const page = await browser.newPage(); await page.setRequestInterception(true); page.on('request', interceptedRequest => { if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg')) interceptedRequest.abort(); else interceptedRequest.continue(); }); await page.goto('https://example.com'); await browser.close();});
```
> **注意** 啟用請求攔截器會禁用頁面緩存。
#### page.setUserAgent(userAgent)v0.9.0
- `userAgent` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> Specific user agent to use in this page
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")> Promise which resolves when the user agent is set.
#### page.setViewport(viewport)v0.9.0
- `viewport` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `width` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 寬度,單位是像素
- `height` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 高度,單位是像素
- `deviceScaleFactor` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 定義設備縮放, (類似于 dpr)。 默認 `1`。
- `isMobile` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 要不要包含`meta viewport` 標簽。 默認 `false`。
- `hasTouch`<[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 指定終端是否支持觸摸。 默認 `false`
- `isLandscape` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 指定終端是不是 landscape 模式。 默認 `false`。
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
> **注意** 在大部分情況下,改變 viewport 會重新加載頁面以設置 `isMobile` 或者 `hasTouch`
如果是一個瀏覽器多個頁面的情況,每個頁面都可以有單獨的viewport
#### page.tap(selector)v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要點擊的元素的選擇器。如果有多個匹配的元素,點擊第一個
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
此方法找到一個匹配的元素,如果需要會把此元素滾動到可視,然后通過 [page.touchscreen](#?product=Puppeteer&version=v1.11.0&show=api-pagetouchscreen) 來點擊元素的中間位置 如果沒有匹配的元素,此方法會報錯
[page.mainFrame().tap(selector)](#?product=Puppeteer&version=v1.11.0&show=api-frametapselector) 的簡寫
#### page.target()v0.9.0
- returns: <[Target](#?product=Puppeteer&version=v1.11.0&show=api-class-target "Target")> a target this page was created from.
#### page.title()v0.9.0
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>> 返回頁面標題.
[page.mainFrame().title()](#?product=Puppeteer&version=v1.11.0&show=api-frametitle)的簡寫
#### page.type(selector, text\[, options\])v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要輸入內容的元素選擇器。如果有多個匹配的元素,輸入到第一個匹配的元素。
- `text` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要輸入的內容
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `delay` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 每個字符輸入的延遲,單位是毫秒。默認是 0。
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")>
每個字符輸入后都會觸發 `keydown`, `keypress`/`input` 和 `keyup` 事件
要點擊特殊按鍵,比如 `Control` 或 `ArrowDown`,用 [`keyboard.press`](#?product=Puppeteer&version=v1.11.0&show=api-keyboardpresskey-options)
```
page.type('#mytextarea', 'Hello'); // 立即輸入page.type('#mytextarea', 'World', {delay: 100}); // 輸入變慢,像一個用戶
```
[page.mainFrame().type(selector, text\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-frametypeselector-text-options) 的簡寫
#### page.url()v0.9.0
- returns: <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>
[page.mainFrame().url()](#?product=Puppeteer&version=v1.11.0&show=api-frameurl) 的簡寫
#### page.viewport()v0.9.0
- 返回: <?[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")>
- `width` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 寬度,單位是像素
- `height` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 高度,單位是像素
- `deviceScaleFactor` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 定義設備縮放, (類似于 dpr)。 默認 `1`。
- `isMobile` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 要不要包含`meta viewport` 標簽。 默認 `false`。
- `hasTouch`<[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 指定終端是否支持觸摸。 默認 `false`
- `isLandscape` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 指定終端是不是 landscape 模式。 默認 `false`。
#### page.waitFor(selectorOrFunctionOrTimeout\[, options\[, ...args\]\])v0.9.0
- `selectorOrFunctionOrTimeout` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")|[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")|[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")> 選擇器, 方法 或者 超時時間
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 可選的等待參數
- `...args` <...[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")|[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")> 傳給 `pageFunction` 的參數
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")>> Promise which resolves to a JSHandle of the success value
此方法根據第一個參數的不同有不同的結果:
- 如果 `selectorOrFunctionOrTimeout` 是 `string`, 那么認為是 css 選擇器或者一個xpath, 根據是不是'//'開頭, 這時候此方法是 [page.waitForSelector](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitforselectorselector-options) 或 [page.waitForXPath](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitforxpathxpath-options)的簡寫
- 如果 `selectorOrFunctionOrTimeout` 是 `function`, 那么認為是一個predicate,這時候此方法是[page.waitForFunction()](#?product=Puppeteer&version=v1.11.0&show=api-pagewaitforfunctionpagefunction-options-args)的簡寫
- 如果 `selectorOrFunctionOrTimeout` 是 `number`, 那么認為是超時時間,單位是毫秒,返回的是Promise對象,在指定時間后resolve
- 否則會報錯
// wait for selectorawait page.waitFor('.foo');// wait for 1 secondawait page.waitFor(1000);// wait for predicateawait page.waitFor(() => !!document.querySelector('.foo'));
將 node.js 中的參數傳遞給 `page.waitFor` 函數:
```
const selector = '.foo';await page.waitFor(selector => !!document.querySelector(selector), {}, selector);
```
[page.mainFrame().waitFor(selectorOrFunctionOrTimeout\[, options\[, ...args\]\])](#?product=Puppeteer&version=v1.11.0&show=api-framewaitforselectororfunctionortimeout-options-args)的簡寫
#### page.waitForFunction(pageFunction\[, options\[, ...args\]\])v0.9.0
- `pageFunction` <[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")|[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要在瀏覽器實例上下文執行的方法
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 可選的等待參數:
- `polling` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")|[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> An interval at which the `pageFunction` is executed, defaults to `raf`. If `polling` is a number, then it is treated as an interval in milliseconds at which the function would be executed. If `polling` is a string, then it can be one of the following values:
- `raf` - to constantly execute `pageFunction` in `requestAnimationFrame` callback. This is the tightest polling mode which is suitable to observe styling changes.
- `mutation` - to execute `pageFunction` on every DOM mutation.
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 最長時間,單位是毫秒. 默認 `30000` (30 seconds). 傳 `0` 表示不會超時。
- `...args` <...[Serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Description "Serializable")|[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")> 傳給 `pageFunction`的參數
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[JSHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-jshandle "JSHandle")>> Promise 對象,當 `pageFunction` 返回等于true的結果時resolve, resolves 為結果的 JSHandle 類型
`waitForFunction` 可以用來監控頁面的大小變化:
```
const puppeteer = require('puppeteer');puppeteer.launch().then(async browser => { const page = await browser.newPage(); const watchDog = page.waitForFunction('window.innerWidth < 100'); await page.setViewport({width: 50, height: 50}); await watchDog; await browser.close();});
```
將 node.js 中的參數傳遞給 `page.waitForFunction` 函數:
```
const selector = '.foo';await page.waitForFunction(selector => !!document.querySelector(selector), {}, selector);
```
[page.mainFrame().waitForFunction(pageFunction\[, options\[, ...args\]\])](#?product=Puppeteer&version=v1.11.0&show=api-framewaitforfunctionpagefunction-options-args) 的簡寫
#### page.waitForNavigation(\[options\])v0.9.0
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 導航配置,可選值:
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 跳轉等待時間,單位是毫秒, 默認是30秒, 傳 `0` 表示無限等待. 可以通過[page.setDefaultNavigationTimeout(timeout)](#?product=Puppeteer&version=v1.11.0&show=api-pagesetdefaultnavigationtimeouttimeout)方法修改默認值
- `waitUntil` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")|[Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array "Array")<[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")>> 滿足什么條件認為頁面跳轉完成,默認是 `load` 事件觸發時。指定事件數組,那么所有事件觸發后才認為是跳轉完成。事件包括:
- `load` - 頁面的load事件觸發時
- `domcontentloaded` - 頁面的`DOMContentLoaded`事件觸發時
- `networkidle0` - 不再有網絡連接時觸發(至少500毫秒后)
- `networkidle2` - 只有2個網絡連接時觸發(至少500毫秒后)
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<\[?Response\]>> Promise對象resolve后是主要的請求的響應。如果有多個跳轉, resolve后是最后一次跳轉的響應。如果由于使用 History API 而導航到不同的錨點或導航,導航將以 `null` 解析。
此方法在頁面跳轉到一個新地址或重新加載時解析,如果你的代碼會間接引起頁面跳轉,這個方法比較有用: 比如這個例子:
```
const [response] = await Promise.all([ page.waitForNavigation(), // The promise resolves after navigation has finished page.click('a.my-link'), // 點擊該鏈接將間接導致導航(跳轉)]);
```
**注意** 通過 [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) 改變地址會認為是一次跳轉。
快捷方式 [page.mainFrame().waitForNavigation(options)](#?product=Puppeteer&version=v1.11.0&show=api-framewaitfornavigationoptions)。
#### page.waitForRequest(urlOrPredicate\[, options\])v0.9.0
- `urlOrPredicate` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")|[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")> A URL or predicate to wait for.
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> Optional waiting parameters
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> Maximum wait time in milliseconds, defaults to 30 seconds, pass `0` to disable the timeout.
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Request](#?product=Puppeteer&version=v1.11.0&show=api-class-request "Request")>> Promise which resolves to the matched request.
const firstRequest = await page.waitForRequest('<http://example.com/resource');const> finalRequest = await page.waitForRequest(request => request.url() === '<http://example.com>' && request.method() === 'GET');return firstRequest.url();
#### page.waitForResponse(urlOrPredicate\[, options\])v0.9.0
- `urlOrPredicate` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")|[Function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function "Function")> A URL or predicate to wait for.
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> Optional waiting parameters
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> Maximum wait time in milliseconds, defaults to 30 seconds, pass `0` to disable the timeout.
- returns: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[Response](#?product=Puppeteer&version=v1.11.0&show=api-class-response "Response")>> Promise which resolves to the matched response.
const firstResponse = await page.waitForResponse('<https://example.com/resource');const> finalResponse = await page.waitForResponse(response => response.url() === '<https://example.com>' && response.status() === 200);return finalResponse.ok();
#### page.waitForSelector(selector\[, options\])v0.9.0
- `selector` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要等待的元素選擇器
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 可選參數:
- `visible` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 等元素出現在dom中并且可以看到, 比如。 沒有 `display: none` 或者 `visibility: hidden` 樣式。 默認是 `false`。
- `hidden` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 等元素在dom中消失或看不到, 比如。 有 `display: none` 或者 `visibility: hidden` 樣式。 默認是 `false`。
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 最大等待時間,單位是毫秒,默認是`30000` (30 seconds),傳0表示不會超時
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[ElementHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-elementhandle "ElementHandle")>> Promise對象,當指定選擇器匹配的元素添加到dom中時resolve
等待指定的選擇器匹配的元素出現在頁面中,如果調用此方法時已經有匹配的元素,那么此方法立即返回。 如果指定的選擇器在超時時間后扔不出現,此方法會報錯。
此方法在頁面跳轉時仍然有效:
```
const puppeteer = require('puppeteer');puppeteer.launch().then(async browser => { 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();});
```
[page.mainFrame().waitForSelector(selector\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-framewaitforselectorselector-options) 的簡寫
#### page.waitForXPath(xpath\[, options\])v0.9.0
- `xpath` <[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#String_type "String")> 要等待的元素的xpath
- `options` <[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object "Object")> 可選參數:
- `visible` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 等元素出現在dom中并且可以看到, 比如. 沒有 `display: none` 或者 `visibility: hidden` 樣式. 默認是 `false`.
- `hidden` <[boolean](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Boolean_type "Boolean")> 等元素在dom中消失或看不到, 比如. 有 `display: none` 或者 `visibility: hidden` 樣式. 默認是 `false`.
- `timeout` <[number](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type "Number")> 最大等待時間,單位是毫秒,默認是`30000` (30 seconds),傳0表示不會超時
- 返回: <[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise "Promise")<[ElementHandle](#?product=Puppeteer&version=v1.11.0&show=api-class-elementhandle "ElementHandle")>> Promise對象,當指定xpath匹配的元素添加到dom中時resolve
等待指定的xpath匹配的元素出現在頁面中,如果調用此方法時已經有匹配的元素,那么此方法立即返回。 如果指定的xpath在超時時間后扔不出現,此方法會報錯。
此方法在頁面跳轉時仍然有效:
```
const puppeteer = require('puppeteer');puppeteer.launch().then(async browser => { 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();});
```
[page.mainFrame().waitForXPath(xpath\[, options\])](#?product=Puppeteer&version=v1.11.0&show=api-framewaitforxpathxpath-options) 的簡寫
#### page.workers()v0.9.0
- returns: 該方法返回所有與頁面關聯的 [WebWorkers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)
> **備注** 這不包含 ServiceWorkers

puppeteer.js中文網|class:page
puppeteer.js中文文檔, puppeteer chrome, puppeteer firefox, puppeteer api 中文文檔
puppeteer.js中文網包含了Puppeteer中文文檔,最新資訊,應用案例等。Puppeteer 是一個 Node 庫,它提供了一個高級 API 來通過 DevTools 協議控制 Chromium 或 Chrome。
- Introduction
- 版本記錄
- 概要
- puppeteer-vs-puppeteer-core
- 環境變量
- error-handling
- working-with-chrome-extensions
- class:puppeteer
- class:browserfetcher
- class:browser
- class:page
- class:worker
- class:accessibility
- class:keyboard
- class:mouse
- class:touchscreen
- class:tracing
- class:dialog
- class:consolemessage
- class:frame
- class:executioncontext
- class:jshandle
- class:elementhandle
- class:request
- class:response
- class:securitydetails
- class:target
- class:cdpsession
- class:coverage
- class:timeouterror