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

Question

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

问题如下:

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

我猜所有这些问题都与我的配置文件没有被正确获取这一事实有关(因为即使 headless 设置为 false，浏览器也是 headless 运行的。)

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

运行测试的命令:

npx playwright test test.ts

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

在/myapp/tests/playwright/playwright.config.ts 使用配置

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

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

虽然在这两种情况下，浏览器都是 headless 运行的，即使 headless 在配置文件中为 false。

playwright.config.ts:

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

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

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

test.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

使用 new Playwright test-runner 时，已经为您创建了浏览器、上下文和页面实例。每个测试都有一个上下文以确保测试独立工作，请参阅 here以供引用。然后在您的 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;

参见 here有关配置的更多信息。