Pupeeteer to headless Chrome in a container

Question

I was trying to figure out how to run headless Chrome in a docker container. Then I have found this. But now I can't figure out how to run my tests in that container.

Can someone give me some a general direction where should I dig, I tried looking through Pupeeteer's docs, yet couldn't find anything. Maybe there's a minimal example in the wild, where I can maybe use Karma or whatever to run tests in a container and log results.

Note though that I would like to compile/bundle javascript outside of the container, and use it just to execute compiled/bundled tests in it.

Maybe later I would like to use the same approach to also run my acceptance tests, but this time by running a web-server outside, possibly in a separate container.

My end goal is to be able to run bunch of test written in Clojurescript, I don't think though anybody has done something like that yet. Maybe somebody has.

Answer 1

I think I have sketched out a game plan:

• first, need to run the container:

  docker run -it --rm -p=0.0.0.0:9222:9222 --name=chrome-headless \
  -v /tmp/chromedata/:/data alpeware/chrome-headless-trunk
  

• now when Chrome is running, you can check by opening http://localhost:9222. You should see there a single tab. We need to find the websocketUrl for that tab, running:

  curl http://localhost:9222/json
  
  # should get you something like this:
  
  [{"description": "",
    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/2f428ea1-7229-484c-b7c7-57ef2f098ffe",
    "id": "2f428ea1-7229-484c-b7c7-57ef2f098ffe",
    "title": "Google",
    "type": "page",
    "url": "https://www.google.com/",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/2f428ea1-7229-484c-b7c7-57ef2f098ffe"}]
  

• now you can use Puppeteer to connect and do some crazy things:

  const puppeteer = require('puppeteer');
  
  puppeteer.connect({
    browserWSEndpoint: "ws://localhost:9222/devtools/page/2f428ea1-7229-484c-b7c7-57ef2f098ffe"
  }).then (async browser => {
    const page = await browser.newPage();
    await page.goto('https://www.google.com');
    ;; you just opened another tab
  });
  

This is all nice, now out of all these bricks I'm gonna "build a house"