Direct Javascript access in Puppeteer

Noam Rosenthal
Dec 27, 2017 · 2 min read

I accidentally ran into this when I started using headless-chrome with the puppeteer project.

I love using puppeteer for testing browser code, and many times I use it to test Javascript libraries with a rich API.
But I got a bit bummed by the evaluate API. The environment inside the evaluate function and the connection with the environment outside of it feel too much disjointed and verbose, I have to pass too many parameters and remember their order.

For example, to use the scrollBy method, the following code needs to be written:

I have to repeat the parameters three times! This doesn’t feel right… I wanted the code to look more like:

So I played with ES6 proxies, trying to find the hack that would achieve this.
Doing that, I found an interesting feature of proxies when used with async/await code: the proxy trap would receive an “apply” call for the “then” function.

This was the bit I needed, and from there code similar to the above is actually possible! Also, you can now await regular getters inside the window, like this:

I use the proxy to chain and store all the getters, setters, and calls, and then break the chain when I receive the magic function call to “then”.

This is all available a small github project. It’s not yet ready to be maintained as an open source project (maybe it will if we start using it internally at Wix), but more like a concept.

Caveats: debugging code like this is a bit cumbersome and requires tools to ease the pain, and seeing “window” in a node context is confusing. But it was fun enough to share.

To be continued…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Noam Rosenthal

Written by

Earthling, mammal, person. Software architect @Wix, nuts for frontend, performance, graphics, mixing different programming worlds like JS and C++.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co