Enabling Hardware Acceleration for Headless Chromium with Playwright

Question

I'm currently working on some E2E tests using a combination of Github Actions, Playwright, and headless Chromium. Now, currently my tests take quite a while (tens of seconds for simple tests) which is not ideal, especially seeing as my use-case requires lots of these tests to be run pretty often. After some research, I discovered this link that many people seem to refer to: https://michelkraemer.com/enable-gpu-for-slow-playwright-tests-in-headless-mode/

It provides instructions for how to enable GPU hardware acceleration for slow Playwright tests in headless mode. However, no matter what I do hardware acceleration refuses to be enabled in headless mode. In headed mode, it is actually enabled by default and everything runs smoother. Here's my code:

(async () => {
    let browser = await chromium.launch({
        args: ['--use-gl=desktop', '--use-angle=default'],
    });
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('chrome://gpu');
    await page.pdf({
        path: 'page.pdf',
    });
})();

I've tried --use-gl=egl as well to no avail. Every time, the pdf shows Software only, hardware acceleration unavailable. At this point I suspect it may be some issue with my laptop's hardware but I don't know exactly how to find this out. I've also confirmed that my command-line args are actually being passed through by Playwright since using --window-size did actually change the window size, and --disable-software-rasterization does seem to disable some things.

Updates: '--use-gl=swiftshader' did not make a difference for me. Additionally, I believe that my issue lies somewhere with '--ignore-gpu-blocklist', since this flag is remaining disabled even when I include it, which leads me to believe that something is forcing my GPU to not provide hardware acceleration. My laptop's GPU is an Nvidia 2060 if that helps, although my code doesn't work when run remotely through a GitHub Action either.

Here's a pastebin with the results from chrome://gpu as-is: https://pastebin.com/U6m0pcjY
Here's one with the results after adding --disable-software-rasterization: https://pastebin.com/uDfQuqQq
Any help is greatly appreciated!

user_1115090 · Answer

Can you try below code-

    // @ts-check
const playwright = require('playwright');
(async () => {
  // Try to add 'playwright.firefox' to the list ↓
  for (const browserType of [playwright.chromium]) {
    const browser = await browserType.launch({
      args: ['--use-gl=swiftshader'],
     } );
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('chrome://gpu');
    await page.screenshot({ path: `example-${browserType.name()}.png` });
    await browser.close();
  }
})();

I checked and this is working for me, here is the screenshot. https://i.stack.imgur.com/1kUrG.png

Enabling Hardware Acceleration for Headless Chromium with Playwright

1 Answers