Why does puppeteer headless testing open browser?

Question

I thought I understood what headless was in jest-puppeteer. I understood it to be a way to run tests without running through the tests in the browser. When I look at this documentation headless testing it suggests that the browser is still involved with headless testing. I also notice even with this jest-puppeteer config, the browser opens but the user flow is not visualized in the website. It is simply the opening page however it looks like the tests are running under the hood. What is headless exactly in jest-puppeteer and why does this jest-puppeteer.config.js file still open the browser? And since this is opening the browser is this suitable for testing run as part of a deployment pipeline?

module.exports = {
  launch: {
    headless: true
  },
  server: {
    command: "REACT_APP_ENV=local react-scripts start",
    port: 3000,
    launchTimeout: 20000,
    debug: false,
  }
}

score 0 · Answer 1 · answered Mar 30 '22 at 00:23

Puppeteer is used to test the website on the actual browser to make the tests as similar to the real user experience as possible.

For example, you can have a component that works fine on its own and passes all unit tests, works with React Test Renderer, React Testing Library, DOM Testing Library, etc. but on a real website because of some strange CSS styling it is not visible fully and cannot be used as intended.

End-to-end tests with real browsers using tools such as Puppeteer, TestCafe, Selenium, etc. are used for exactly that. They test the integration of all components on a real website, with a real browser, just like your user would use it.

The browsers used are usually headless for efficiency and to make them run in CI/CD pipelines (few years ago I was teaching some workshops how to do that with Travis and TestCafe which is available on GitHub) but you can often turn on the UI to see what is actually happening in real time, which can also be very enlightening to see how the website behaves especially with very fast interactions to discover some race conditions or efficiency problems.

I always recommend using end-to-end tests with tools like TestCafe or Puppeteer, because that is the ultimate tests of whether your website works or not.

If all unit tests pass but end-to-end tests fail, then the website doesn't work as intended. But having a good unit test coverage is still important to make sure that all of the individual components work well, so that's why I recommend all kind of tests to have some confidence in the overall quality of your product.

score 0 · Answer 2 · answered Mar 30 '22 at 05:33

Puppeteer's whole purpose is to automate a browser, so the idea of Puppeteer running without a browser (whether headless or headful) is like a steering wheel without a car.

Headless means the browser engine runs without rendering a window you can interact with. To use the metaphor above, the car still runs and Puppeteer still drives it, but it's hidden from view.

Opening a GUI browser window is inefficient and distracting if you aren't planning on doing anything with it. Only enable headful Puppeteer when you need to go in and inspect and interact with the page and debug.

Why does puppeteer headless testing open browser?

2 Answers2