-
Notifications
You must be signed in to change notification settings - Fork 9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add more explanation for page.evaluateHandle() #1867
Changes from 4 commits
53ae964
62dc92e
6947ce2
78d5b72
9dc7c54
15761e6
89b153e
e5616f7
499236e
fa77474
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -695,22 +695,21 @@ List of all available devices is available in the source code: [DeviceDescriptor | |
#### page.evaluate(pageFunction, ...args) | ||
- `pageFunction` <[function]|[string]> Function to be evaluated in the page context | ||
- `...args` <...[Serializable]|[JSHandle]> Arguments to pass to `pageFunction` | ||
- returns: <[Promise]<[Serializable]>> Resolves to the return value of `pageFunction` | ||
- returns: <[Promise]<[Serializable]>> Promise which resolves to the return value of `pageFunction` as a javascript-object | ||
|
||
If the function, passed to the `page.evaluate`, returns a [Promise], then `page.evaluate` would wait for the promise to resolve and return its value. | ||
If the function passed to the `page.evaluate` returns a [Promise], then `page.evaluate` would wait for the promise to resolve and return its value. | ||
|
||
If the function passed into `page.evaluate` returns a non-[Serializable] value, then `page.evaluate` resolves to `undefined`. | ||
Passing arguments to ```pageFunction```. | ||
|
||
Passing arguments to `pageFunction`: | ||
```js | ||
const result = await page.evaluate(x => { | ||
return Promise.resolve(8 * x); | ||
}, 7); | ||
console.log(result); // prints "56" | ||
``` | ||
|
||
A string can also be passed in instead of a function. | ||
|
||
A string can also be passed in instead of a function: | ||
```js | ||
console.log(await page.evaluate('1 + 2')); // prints "3" | ||
const x = 10; | ||
|
@@ -729,19 +728,19 @@ Shortcut for [page.mainFrame().evaluate(pageFunction, ...args)](#frameevaluatepa | |
#### page.evaluateHandle(pageFunction, ...args) | ||
- `pageFunction` <[function]|[string]> Function to be evaluated in the page context | ||
- `...args` <...[Serializable]|[JSHandle]> Arguments to pass to `pageFunction` | ||
- returns: <[Promise]<[JSHandle]>> Resolves to the return value of `pageFunction` | ||
- returns: <[Promise]<[JSHandle]>> Promise which resolves to the return value of `pageFunction` as in-page object (JSHandle) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There are many There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Cool, I will update there as well. |
||
|
||
If the function, passed to the `page.evaluateHandle`, returns a [Promise], then `page.evaluateHandle` would wait for the promise to resolve and return its value. | ||
If the function passed to the `page.evaluateHandle` returns a [Promise], then `page.evaluateHandle` would wait for the promise to resolve and return its value. | ||
|
||
The only difference between `page.evaluate` and `page.evaluateHandler` is that the former returns JSON representation of the object and the latter returns in-page object (JSHandle): | ||
```js | ||
const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window)); | ||
aWindowHandle; // Handle for the window object. | ||
const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window)); | ||
aWindowHandle; // Handle for the window object | ||
``` | ||
|
||
A string can also be passed in instead of a function. | ||
|
||
A string can also be passed in instead of a function: | ||
```js | ||
const aHandle = await page.evaluateHandle('document'); // Handle for the 'document'. | ||
const aHandle = await page.evaluateHandle('document'); // Handle for the 'document' | ||
``` | ||
|
||
[JSHandle] instances can be passed as arguments to the `page.evaluateHandle`: | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
/** | ||
* Copyright 2017 Google Inc. All rights reserved. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
/** | ||
* @fileoverview Gets HTML of the top search element from developers.google.com/web | ||
* using page.evaluate() and page.evaluateHandle() to show the difference between these two methods | ||
**/ | ||
|
||
'use strict'; | ||
|
||
const puppeteer = require('puppeteer'); | ||
|
||
(async() => { | ||
const browser = await puppeteer.launch(); | ||
const page = await browser.newPage(); | ||
|
||
await page.goto('https://developers.google.com/web/'); | ||
|
||
const elementHandle = await page.$('#top-search'); | ||
const pageFunction = element => element.innerHTML; | ||
|
||
// page.evaluate() evaluates pageFunction in page context and returns javascript-object | ||
const jsObject = await page.evaluate(pageFunction, elementHandle); | ||
|
||
// page.evaluateHandler() evaluates pageFunction in page context and returns in-page object (JSHandle) | ||
const jsHandle = await page.evaluateHandle(pageFunction, elementHandle); | ||
|
||
// to show the difference between two methods | ||
console.log(`jsObject is NOT equal to jsHandle: ${jsObject !== jsHandle}`); // prints true | ||
console.log(`jsObject is equal to jsHandle.jsonValue(): ${jsObject === (await jsHandle.jsonValue())}`); // prints true | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not sure if this is the best result to show int the demo, but I can't think of anything better. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Alternatively, this example might just be part of the docs? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yea. I'm also thinking we should just have these snippets and explanation as part of the docs. It's a less compelling standalone demo. |
||
|
||
await browser.close(); | ||
})(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
JavaScript object.