feat(chromium): switch to headless=new by default

This PR switches to headless=new by default to assess the impact.
`PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD` environment variable reverses
to the old behavior.

.github/workflows/tests_secondary.yml

@@ -268,8 +268,8 @@ jobs:
     - run: npx playwright install-deps
     - run: utils/build/build-playwright-driver.sh
 
-  test_linux_chromium_headless_new:
+  test_linux_chromium_headless_old:
-    name: Linux Chromium Headless New
+    name: Linux Chromium Headless Old
     environment: ${{ github.event_name == 'push' && 'allow-uploading-flakiness-results' || null }}
     runs-on: ubuntu-latest
     steps:
@@ -278,12 +278,12 @@ jobs:
       with:
         browsers-to-install: chromium
         command: npm run ctest
-        bot-name: "headless-new"
+        bot-name: "headless-old"
         flakiness-client-id: ${{ secrets.AZURE_FLAKINESS_DASHBOARD_CLIENT_ID }}
         flakiness-tenant-id: ${{ secrets.AZURE_FLAKINESS_DASHBOARD_TENANT_ID }}
         flakiness-subscription-id: ${{ secrets.AZURE_FLAKINESS_DASHBOARD_SUBSCRIPTION_ID }}
       env:
-        PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW: 1
+        PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD: 1
 
   test_linux_chromium_headless_shell:
     name: Chromium Headless Shell

packages/playwright-core/src/server/bidi/bidiChromium.ts

@@ -112,10 +112,10 @@ export class BidiChromium extends BrowserType {
     if (options.devtools)
       chromeArguments.push('--auto-open-devtools-for-tabs');
     if (options.headless) {
-      if (process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW)
+      if (process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD)
-        chromeArguments.push('--headless=new');
-      else
         chromeArguments.push('--headless=old');
+      else
+        chromeArguments.push('--headless=new');
 
       chromeArguments.push(
           '--hide-scrollbars',

packages/playwright-core/src/server/chromium/chromium.ts

@@ -309,10 +309,10 @@ export class Chromium extends BrowserType {
     if (options.devtools)
       chromeArguments.push('--auto-open-devtools-for-tabs');
     if (options.headless) {
-      if (process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW)
+      if (process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD)
-        chromeArguments.push('--headless=new');
-      else
         chromeArguments.push('--headless=old');
+      else
+        chromeArguments.push('--headless=new');
 
       chromeArguments.push(
           '--hide-scrollbars',

tests/library/browsercontext-credentials.spec.ts

@@ -19,7 +19,7 @@ import { browserTest as base, expect } from '../config/browserTest';
 
 const it = base.extend<{ isChromiumHeadedLike: boolean }>({
   isChromiumHeadedLike: async ({ browserName, headless }, use) => {
-    const isChromiumHeadedLike = browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW);
+    const isChromiumHeadedLike = browserName === 'chromium' && (!headless || !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD);
     await use(isChromiumHeadedLike);
   },
 });

tests/library/download.spec.ts

@@ -637,7 +637,7 @@ it('should be able to download a inline PDF file via response interception', asy
 });
 
 it('should be able to download a inline PDF file via navigation', async ({ browser, server, asset, browserName, headless }) => {
-  it.fixme(((!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW) && browserName === 'chromium'));
+  it.fixme(((!headless || !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD) && browserName === 'chromium'));
   const page = await browser.newPage();
   await page.goto(server.EMPTY_PAGE);
   await page.setContent(`

tests/library/permissions.spec.ts

@@ -150,7 +150,7 @@ it('should support clipboard read', async ({ page, context, server, browserName,
   it.fail(browserName === 'firefox', 'No such permissions (requires flag) in Firefox');
   it.fixme(browserName === 'webkit' && isWindows, 'WebPasteboardProxy::allPasteboardItemInfo not implemented for Windows.');
   it.fixme(browserName === 'webkit' && isLinux && headless, 'WebPasteboardProxy::allPasteboardItemInfo not implemented for WPE.');
-  const isChromiumHeadedLike = browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW);
+  const isChromiumHeadedLike = browserName === 'chromium' && (!headless || !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD);
 
   await page.goto(server.EMPTY_PAGE);
   // There is no 'clipboard-read' permission in WebKit Web API.

tests/library/playwright.config.ts

@@ -127,8 +127,8 @@ for (const browserName of browserNames) {
       platform: process.platform,
       docker: !!process.env.INSIDE_DOCKER,
       headless: (() => {
-        if (process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW)
+        if (process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD)
-          return 'headless-new';
+          return 'headless-old';
         if (headed)
           return 'headed';
         return 'headless';

tests/library/tracing.spec.ts

@@ -409,7 +409,7 @@ for (const params of [
 ]) {
   browserTest(`should produce screencast frames ${params.id}`, async ({ video, contextFactory, browserName, platform, headless }, testInfo) => {
     browserTest.skip(browserName === 'chromium' && video === 'on', 'Same screencast resolution conflicts');
-    browserTest.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW), 'Chromium screencast on headed has a min width issue');
+    browserTest.fixme(browserName === 'chromium' && (!headless || !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD), 'Chromium screencast on headed has a min width issue');
     browserTest.fixme(params.id === 'fit' && browserName === 'chromium' && platform === 'darwin', 'High DPI maxes image at 600x600');
     browserTest.fixme(params.id === 'fit' && browserName === 'webkit' && platform === 'linux', 'Image size is flaky');
     browserTest.fixme(browserName === 'firefox' && !headless, 'Image size is different');

tests/library/video.spec.ts

@@ -474,7 +474,7 @@ it.describe('screencast', () => {
   });
 
   it('should scale frames down to the requested size ', async ({ browser, browserName, server, headless, trace }, testInfo) => {
-    const isChromiumHeadlessNew = browserName === 'chromium' && !!headless && !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW;
+    const isChromiumHeadlessNew = browserName === 'chromium' && !!headless && !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD;
     it.fixme(!headless || isChromiumHeadlessNew, 'Fails on headed');
 
     const context = await browser.newContext({
@@ -724,7 +724,7 @@ it.describe('screencast', () => {
 
   it('should capture full viewport', async ({ browserType, browserName, headless, isWindows }, testInfo) => {
     it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/22411' });
-    it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW), 'The square is not on the video');
+    it.fixme(browserName === 'chromium' && (!headless || !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD), 'The square is not on the video');
     it.fixme(browserName === 'firefox' && isWindows, 'https://github.com/microsoft/playwright/issues/14405');
     const size = { width: 600, height: 400 };
     const browser = await browserType.launch();
@@ -759,7 +759,7 @@ it.describe('screencast', () => {
 
   it('should capture full viewport on hidpi', async ({ browserType, browserName, headless, isWindows, isLinux }, testInfo) => {
     it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/22411' });
-    it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW), 'The square is not on the video');
+    it.fixme(browserName === 'chromium' && (!headless || !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD), 'The square is not on the video');
     it.fixme(browserName === 'firefox' && isWindows, 'https://github.com/microsoft/playwright/issues/14405');
     it.fixme(browserName === 'webkit' && isLinux && !headless, 'https://github.com/microsoft/playwright/issues/22617');
     const size = { width: 600, height: 400 };
@@ -796,7 +796,7 @@ it.describe('screencast', () => {
 
   it('should work with video+trace', async ({ browser, trace, headless }, testInfo) => {
     it.skip(trace === 'on');
-    it.fixme(!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW, 'different trace screencast image size on all browsers');
+    it.fixme(!headless || !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD, 'different trace screencast image size on all browsers');
 
     const size = { width: 500, height: 400 };
     const traceFile = testInfo.outputPath('trace.zip');

tests/page/page-focus.spec.ts

@@ -120,7 +120,7 @@ it('clicking checkbox should activate it', async ({ page, browserName, headless,
 it('tab should cycle between single input and browser', {
   annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32339' }
 }, async ({ page, browserName, headless }) => {
-  it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW),
+  it.fixme(browserName === 'chromium' && (!headless || !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD),
       'Chromium in headful mode keeps input focused.');
   it.fixme(browserName !== 'chromium');
   await page.setContent(`<label for="input1">input1</label>
@@ -148,7 +148,7 @@ it('tab should cycle between single input and browser', {
 it('tab should cycle between document elements and browser', {
   annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32339' }
 }, async ({ page, browserName, headless }) => {
-  it.fixme(browserName === 'chromium' && (!headless || !!process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_NEW),
+  it.fixme(browserName === 'chromium' && (!headless || !process.env.PLAYWRIGHT_CHROMIUM_USE_HEADLESS_OLD),
       'Chromium in headful mode keeps last input focused.');
   it.fixme(browserName !== 'chromium');
   await page.setContent(`