如何让 Playwright 在我的配置文件中使用 headless 的值？

Question

我是 Playwright 的新手，由于某种原因我无法让它获取我的配置文件。

问题如下：

• 虽然我已经配置了配置文件来拍摄视频，但没有视频输出到指定目录。
• 即使配置文件将 headless 指定为 false，浏览器也会以 headless 方式运行。如果我在测试文件 ( const browserChromium = await chromium.launch({ headless: false });) 中将 headless 设置为 false，则浏览器不会无头运行。

我猜测所有这些问题都与我的配置文件没有被正确拾取有关（因为浏览器是无头运行的，即使无头设置为 false。）

我通过 WSL2 使用 Ubuntu 20.04。剧作家1.12.2

运行测试的命令：

npx playwright test test.ts

这显示我正在运行正确的配置文件：

Using config at /myapp/tests/playwright/playwright.config.ts

以防万一，我还尝试手动指定配置文件：

npx playwright test test.ts --config=playwright.config.ts

不过，在这两种情况下，即使配置文件中的 headless 为 false，浏览器也会以 headless 方式运行。

playwright.config.ts：

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  use: {
    headless: false,

    // Artifacts
    screenshot: 'on',
    video: 'on',
  },
};
export default config;

测试.ts：

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

const iPhone11 = devices['iPhone 11 Pro'];

const baseUrl = 'http://localhost:8100/';

test('Check the onboarding flow', async () => {
  const browserChromium = await chromium.launch();

  // Decide which browser to use.
  const browser = browserChromium;
  const context = await browser.newContext({
    ...iPhone11,
    locale: 'ja-JP',
    recordVideo: {
      dir: 'recordings/',
    },
  });
  const page = await browser.newPage();
  // Set default navigation timeout.
  page.setDefaultTimeout(10000);
  // Go to baseUrl
  await page.goto(baseUrl);
  // Go to baseUrl/webapp/
  await page.goto(`${baseUrl}webapp/`);
  await page.screenshot({ path: 'test-screenshot.png' });
  await context.close();
  await browser.close();
});

Answer 1

当使用新的 Playwright test-runner时，浏览器、上下文和页面实例已经为您创建。每个测试都有一个上下文，以确保测试独立工作，请参阅此处以供参考。然后上下文/启动选项将在您的playwright.config.ts.

在您的场景中，这意味着类似的事情应该有效：

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

const baseUrl = 'http://localhost:8100/';

test('Check the onboarding flow', async ({ page }) => {
  // Go to baseUrl
  await page.goto(baseUrl);
  // Go to baseUrl/webapp/
  await page.goto(`${baseUrl}webapp/`);
  await page.screenshot({ path: 'test-screenshot.png' });
});

启动和上下文选项，您可以按playwright.config.ts如下方式设置：

import { PlaywrightTestConfig, devices } from '@playwright/test';

const config: PlaywrightTestConfig = {
  use: {
    ...devices['iPhone 11 Pro'],
    headless: false,

    // Artifacts
    screenshot: 'on',
    video: 'on',
    contextOptions: {
      locale: 'ja-JP',
    }
  },
};
export default config;

有关配置的更多信息，请参阅此处。