Enable GPU to speed up slow Playwright tests in headless mode

When I wrote end-to-end tests for Sudocle the other day, I noticed that they ran much faster when I started my browser in non-headless mode. After some debugging, I was able to figure out that the browser I was using to run my tests (Chrome/Chromium), automatically employed a software renderer for WebGL when started headless. Since Sudocle heavily relies on WebGL, the tests could benefit a great deal from hardware acceleration.

tl;dr

To force-enable GPU hardware acceleration for headless Chrome/Chromium, you have to run it with --use-gl=desktop or --use-gl=egl. You can add this parameter in your playwright.config.js file:

const config = {
  use: {
    channel: "chrome",
    launchOptions: {
      // force GPU hardware acceleration
      // (even in headless mode)
      args: ["--use-gl=egl"]
    }
  }
}
 
module.exports = config

Whether you need to use desktop or egl seems to depend on the environment or operating system you’re on. For me, on macOS, egl worked well. To check if hardware acceleration is enabled or not, you can use the code below.

Benchmark

With hardware acceleration enabled, I was able to reduce the average runtime of my tests from 1.9s to 1.3s on my MacBook. Depending on how many tests you run and how complex they are, your test suite can take several minutes less than without hardware acceleration.

In my case, at the time of writing, I’m running 823 tests with 6 workers. Without hardware acceleration, the test suite took 4m 19s. Now, it only takes 2m 59s.

You can find the source code of my tests here:

https://github.com/michel-kraemer/sudocle/blob/main/tests/Grid.spec.js

My playwright.config.js can be found here:

https://github.com/michel-kraemer/sudocle/blob/main/playwright.config.js

Please note that the test fixtures are not checked in to the source code repository of Sudocle.

Checking if hardware acceleration is enabled

If you want to check if your headless browser has GPU hardware acceleration enabled or not, you can use the following test:

test("GPU hardware acceleration", async ({ page }) => {
  await page.goto("chrome://gpu")
  let featureStatusList = page.locator(".feature-status-list")
  await expect(featureStatusList).toContainText("Hardware accelerated")
})

Happy testing!

Posted by Michel Krämer
on 2 January 2022