-
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 5 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,26 @@ 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) | ||
|
||
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 `page.evaluate` returns JSON representation of the object and `page.evaluateHandler` returns 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. evaluateHandler -> evaluateHandle on both of these. 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. returns JSON representation -> returns a JSON representation |
||
```js | ||
const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window)); | ||
aWindowHandle; // Handle for the window object. | ||
``` | ||
// returns JavaScript object | ||
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. "returns a JSON object" to be consistent with your description. |
||
const jsObject = await page.evaluate(pageFunction, elementHandle); | ||
|
||
A string can also be passed in instead of a function. | ||
// returns in-page object (JSHandle) | ||
const jsHandle = await page.evaluateHandle(pageFunction, elementHandle); | ||
|
||
// both lines below print true | ||
console.log(`jsObject is NOT equal to jsHandle: ${jsObject !== 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. I'd drop this const jsObject1 = await page.evaluate(pageFunction, elementHandle);
const jsObject2 = await page.evaluate(pageFunction, elementHandle);
console.log(jsObject1 === jsObject2); // false, unless pageFunction returns primitives 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. Good point, agree. 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. Same as my comment above - it was working for me since I was using the |
||
console.log(`jsObject is equal to jsHandle.jsonValue(): ${jsObject === (await jsHandle.jsonValue())}`); | ||
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. I don't think this is actually the case: triple-equals checks for identity equality, which is not the case. 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. But identity equality (aka strict equality) means that type and values are the same. In this case it shows that jsObject is the same type and value as jsHandle.jsonValue(). 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. @yelisaveta in case of non-primitives, it means that two objects are the same by identity, not by value. e.g.: console.log({} === {}); // false
let a = {};
let b = a;
let c = a;
console.log(b === c); // 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. Sorry for a delay - I've now understood why I used strict equality check - initially I've created an example to demonstrate the difference between these two methods, see here: 53ae964 Examples were using I see that having these snippets in the docs without the |
||
``` | ||
|
||
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`: | ||
|
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.
There are many
evaluateHandle
calls:page.evaluateHandle
,frame.evaluateHandle
andelementHandle.evaluateHandle
. We try to keep documentation consistent between them all; so all the changes has to be mirrored there as well.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.
Cool, I will update there as well.