feat(browser): Run puppeteer in browser (POC)

[Janpot]

Proof of concept for #2119

[aslushnikov]

@Janpot thank you for the PR, it turned out to be quite minimalistic.

I evaluate this PR as a "what needs to be changed in pptr so that this can be implemented as a third-party library". From this standpoint, I see two things we need to address:

• helper.projectRoot() clearly stands on your way
• you'd like to pass your own transport implementation in puppeteer.connect. This way you can make it through a websocket (like you did) or over the chrome.debugger in the extension-land.

@JoelEinbinder claimed he has another approach that achieves the same results. Joel, can you please share your code?

[Janpot]

@aslushnikov
"I evaluate this PR as ..." That is a good assessment. I posted the issue initially when I was exploring an idea but currently I have no immediate use-case anymore. I'm still interested in this as a thought experiment though. And I don't mind following up on this PR. That being said:

1. The projectroot thing is problematic as it seems to be only there to solve the node6 thing being under a different path. It's solvable in several ways. I just propose one in this PR, but there's other possibilities. It definitely needs a refactor if we want to support browsers.
2. Yep, passing a transport makes sense. I could also make it work by adapting the way ws is consumed and simply swapping it out for the browser WebSocket. ws supports both EventTarget and EventEmitter interface.

[ChristosChristofidis]

why would you want to run in from the browser?

[Janpot]

For instance (but not limited to): https://chrome.browserless.io/

[wKich]

Hello. For some reason I want to do fair actions (clicks, typing, etc) in my functional tests. So let me share my experience to run pptr in browser without any changes of original source code.

For websocket.js I took @Janpot's code.
dummy.js is a simple module that exports empty object.

// webpack.config.js
module.exports = {
  /* ... */
  resolve: {
    alias: {
      ws: path.join(__dirname, 'helpers/websocket.js'),
      fs: path.join(__dirname, 'helpers/dummy.js'),
    }
  }
}

// chrome-devtools.js
import { Connection } from 'puppeteer/lib/Connection'
import Browser from 'puppeteer/lib/Browser'
import uuidv4 from 'uuid/v4'

let attachPromise = null
const id = uuidv4()

export default function attachDevTools() {
  if (attachPromise) return attachPromise

  attachPromise = fetch(`/attach?id=${id}`)
    .then(res => res.json())
    .then(async ({ targetInfo, browserDebuggerUrl }) => {
      const { targetId } = targetInfo

      window.addEventListener('beforeunload', () => fetch(`/detach?targetId=${targetId}`))

      const connection = await Connection.createForWebSocket(browserDebuggerUrl)
      const browser = await Browser.create(connection, { appMode: true })
      const pages = await browser.pages()

      // NOTE We don't want to crash browser under events flood
      // Disables network tracking, prevents network events from being sent to the client
      pages.forEach(p => p._client.send('Network.disable', {}))

      return pages.find(p => p.target()._targetId == targetId)
    })

  return attachPromise
}

That's issues I faced:

1. I can't send http request to http://localhost:9222/json endpoint directly from a browser, so I use simple express server as workaround.
2. I don't know how to find out targetId for the page from which I want to connect. But in my scenario this is not such big problem, because I always have 1 active tab.

If you agree with that usage of pptr, maybe I can do PR to make this in proper way

[wKich]

Ah, about 1st issue, I didn’t know that chrome have command line option to disable cors security checks, so proxy server is not needed.

And another issue, I think could solve through sending guid to the console, for example, and check every page to find that guid.

[wKich]

I rewrite attach function without express server and without using targetId

import { Connection } from 'puppeteer/lib/Connection'
import Browser from 'puppeteer/lib/Browser'
import uuidv4 from 'uuid/v4'

export default async function attachDevTools() {
  const response = await fetch('http://localhost:9222/json/version')
  const data = await response.json()

  const connection = await Connection.createForWebSocket(data.webSocketDebuggerUrl)
  const browser = await Browser.create(connection, { appMode: true })
  const pages = await browser.pages()

  // Disables network tracking, prevents network events from being sent to the client
  // NOTE Because we don't want crash browser under events flood
  pages.forEach(p => p._client.send('Network.disable', {}))

  return new Promise(resolve => {
    const expectedGuid = uuid()
    const findCurrentPage = index => async msg => {
      if (msg.type() != 'debug') return

      const [firstArg] = msg.args()
      const receivedGuid = await firstArg.jsonValue()

      if (receivedGuid == expectedGuid) {
        resolve(pages[index])
      }
    }

    pages.forEach((p, index) => p.once('console', findCurrentPage(index)))
    console.debug(expectedGuid)
  })
}

[aslushnikov]

Closing in favor of #3239