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

【问题标题】：How to get Playwright to use the value for headless in my config file?如何让 Playwright 在我的配置文件中使用 headless 的值？
【发布时间】：2021-09-06 17:17:38
【问题描述】：

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

以下是问题：

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

我猜所有这些问题都与我的配置文件没有被正确提取有关（因为即使 headless 设置为 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，浏览器也会无头运行。

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();
});

【问题讨论】：

标签： typescript testing playwright

【解决方案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。

【讨论】：