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

Question

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

问题如下：

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

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

我在 Ubuntu 20.04 通过 WSL2。剧作家 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

虽然在这两种情况下，浏览器都是运行无头的，即使无头在配置文件中为 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, the browser, context, and page instances are already created for you. There is a context for each test to ensure that the tests are working isolated, see here供参考。 context/launch 选项然后在 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。

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

How to get Playwright to use the value for headless in my config file?

testing

typescript

playwright