如何让Playwright正确读取配置文件中设置的headless等参数

核心根因 #

Playwright Test 配置文件中 use 字段下的所有参数，仅对框架自动注入的 browser、context、page 实例生效。你在测试代码中手动调用 chromium.launch()、browser.newContext() 创建的实例，不会自动继承配置文件的参数，因此会出现配置不生效的问题。
另外你的视频录制不生效还有一个单独的错误：你创建了开启录屏的context，但后续调用的是 browser.newPage() 创建页面，这个页面不属于你配置了录屏的context，自然不会生成视频文件。

方案1（推荐）：使用Playwright Test自动注入的实例 #

不需要手动初始化浏览器、上下文、页面，直接在测试用例回调中接收框架注入的实例即可，全局配置会自动生效。
修改后的test.ts参考代码：

// @ts-check
import {
  devices, expect, test,
} from '@playwright/test';

const iPhone11 = devices['iPhone 11 Pro'];
const baseUrl = 'http://localhost:8100/';

// 针对当前测试文件单独配置，会和全局配置合并
test.use({
  ...iPhone11,
  locale: 'ja-JP',
});

test('Check the onboarding flow', async ({ page }) => {
  // 注入的page已继承所有全局和单文件配置
  page.setDefaultTimeout(10000);
  await page.goto(baseUrl);
  await page.goto(`${baseUrl}webapp/`);
  await page.screenshot({ path: 'test-screenshot.png' });
  // 无需手动关闭上下文和浏览器，框架会自动处理
});

方案2：手动创建实例时显式传参 #

如果你确实需要手动控制浏览器初始化逻辑，需要把配置参数显式传入对应方法，同时修正页面创建逻辑：

1. 调用chromium.launch()时传入headless: false参数
2. 页面必须从配置了录屏的context中创建，不能直接从browser创建
   修改后的核心代码片段：

test('Check the onboarding flow', async () => {
  // 手动传入headless参数
  const browserChromium = await chromium.launch({ headless: false });
  const browser = browserChromium;
  const context = await browser.newContext({
    ...iPhone11,
    locale: 'ja-JP',
    recordVideo: {
      dir: 'recordings/',
    },
  });
  // 从context创建页面，而不是browser.newPage()
  const page = await context.newPage();

  // 后续业务逻辑不变
  page.setDefaultTimeout(10000);
  await page.goto(baseUrl);
  await page.goto(`${baseUrl}webapp/`);
  await page.screenshot({ path: 'test-screenshot.png' });
  await context.close();
  await browser.close();
});

内容的提问来源于stack exchange，提问作者Patrick Kenny