Skip to content
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

Merged
merged 10 commits into from Feb 22, 2018
30 changes: 18 additions & 12 deletions docs/api.md
Expand Up @@ -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;
Expand All @@ -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)
Copy link
Contributor

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 and elementHandle.evaluateHandle. We try to keep documentation consistent between them all; so all the changes has to be mirrored there as well.

Copy link
Contributor Author

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.


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):
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

evaluateHandler -> evaluateHandle on both of these.

Copy link
Contributor

Choose a reason for hiding this comment

The 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
Copy link
Contributor

Choose a reason for hiding this comment

The 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}`);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd drop this console.log – even two consecutive page.evaluate will result in strict equality failing as well:

const jsObject1 = await page.evaluate(pageFunction, elementHandle);
const jsObject2 = await page.evaluate(pageFunction, elementHandle);
console.log(jsObject1 === jsObject2); // false, unless pageFunction returns primitives

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, agree.

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 pageFunction that returns element.innterHTML.

console.log(`jsObject is equal to jsHandle.jsonValue(): ${jsObject === (await jsHandle.jsonValue())}`);
Copy link
Contributor

Choose a reason for hiding this comment

The 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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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().

Copy link
Contributor

Choose a reason for hiding this comment

The 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

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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 pageFunction which returned element.innterHTML - which is a String. That's why strict equality worked correctly for me.

I see that having these snippets in the docs without the pageFunction definition looks confusing.

```

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`:
Expand Down
2 changes: 1 addition & 1 deletion lib/Page.js
Expand Up @@ -643,7 +643,7 @@ class Page extends EventEmitter {
}

/**
* @param {function()} pageFunction
* @param {function()|string} pageFunction
* @param {!Array<*>} args
* @return {!Promise<*>}
*/
Expand Down