Playwright Screen Flickering During Automation [Solved]

Immediate Fix

The most common cause of screen flickering in Playwright is hardware acceleration conflicts between the browser engine and your system’s GPU. To stop the flickering immediately, you should disable hardware acceleration in your launch configuration.

Update your browser launch options in your Node.js script. Adding the --disable-gpu flag tells the browser to use software rendering, which stabilizes the visual output during headed execution.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    headless: false, // Flickering usually happens in headed mode
    args: [
      '--disable-gpu',
      '--disable-software-rasterizer',
      '--disable-dev-shm-usage'
    ]
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com');
})();

If you are using Playwright Test runner, apply these settings in your playwright.config.ts or .js file under the use or projects section.

Technical Explanation

Screen flickering during Node.js automation typically occurs when the browser’s internal rendering pipeline gets out of sync with the Operating System’s window manager. This is prevalent in environments with high-resolution displays or specialized graphics drivers.

When Playwright commands the browser via the Chrome DevTools Protocol (CDP), it forces rapid UI updates. If hardware acceleration is enabled, the GPU attempts to optimize these frames. This often results in “tearing” or white flashes as the buffer fails to keep up with the automated commands.

Another factor is the “Headed” mode overhead. Unlike “Headless” mode, where the UI is rendered purely in memory, Headed mode must draw to the physical screen. Any delay in the Node.js event loop or high CPU usage can cause the frame buffer to stutter, manifesting as a flicker.

[]

Alternative Methods

If disabling the GPU does not solve the issue, the problem might stem from viewport resizing or CSS animations. Frequent calls to setViewportSize can trigger layout shifts that appear as flickering.

Try setting a consistent viewport size in your context options rather than resizing the page dynamically. Additionally, you can inject CSS to disable animations, which reduces the rendering load on the browser during testing.

Disabling Animations via Code

Use the following snippet to ensure that CSS transitions don’t interfere with your element snapshots or cause visual noise during execution:

await page.addStyleTag({
  content: `
    *, *::before, *::after {
      transition: none !important;
      animation: none !important;
    }
  `
});