剧作家测试基于数组运行太多次

Question

对剧作家来说绝对是新手，具有最少的异步经验。预先感谢您提供任何指导或类似问题的链接。

运行以下代码最终会创建多个屏幕截图（通常在 8-9 个之间。）

我知道这是由于测试并行运行造成的。让它串行运行的尝试没有成功。我见过的唯一解决方案是使用

--workers=1

标志运行此测试。

如何编写此代码，以便仅对

browserTypes

数组中的每个项目运行一次，而不强制使用工人标志或调整

playwright.config

文件？

import { test, chromium, firefox, webkit } from '@playwright/test';

test("Browser support test", async () => {
    const browserTypes = [chromium, firefox, webkit];
    const now = new Date();
    const timestamp = now.toISOString().replace(/[:.]/g, "-");

    for (const browserType of browserTypes) {
        console.log(`Running: ${browserType.name()}`);

        const browser = await browserType.launch();
        const page = await browser.newPage();

        await page.goto("https://www.whatsmybrowser.org/");
        await page.screenshot({
            path: `tests-screenshots/pw-${browserType.name()}-${timestamp}.png`,
        });

        await browser.close();
    }
});

Answer 1

继续调整配置——不要在测试中管理浏览器。使用

page

固定装置，让 Playwright 为您处理浏览器设置和拆卸。

同样，浏览器类型是在您的配置或命令行中定义的。无需明确地

const browserTypes = [chromium, firefox, webkit];

，只需编写测试并使用适当的配置运行它们即可。

来自文档中的在不同浏览器上运行测试（截至 1.49.1）：

Playwright 可以通过在配置中设置 projects 在多个浏览器和配置中运行测试。您还可以为每个项目添加不同的选项。

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

export default defineConfig({
  projects: [
    /* Test against desktop browsers */
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    /* Test against mobile viewports. */
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },
    /* Test against branded browsers. */
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
    },
    {
      name: 'Microsoft Edge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' }, // or 'msedge-dev'
    },
  ],
});

Playwright 将默认运行所有项目。

$ npx playwright test

Running 7 tests using 5 workers

  ✓ [chromium] › example.spec.ts:3:1 › basic test (2s)
  ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)
  ✓ [webkit] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Mobile Chrome] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Mobile Safari] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Google Chrome] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Microsoft Edge] › example.spec.ts:3:1 › basic test (2s)

使用

--project

命令行选项运行单个项目。

$ npx playwright test --project=firefox

Running 1 test using 1 worker

  ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)

通过此设置，您的测试将很简单：

import {test} from "@playwright/test";

test("Browser support test", async ({page}) => {
  const now = new Date();
  const timestamp = now.toISOString().replace(/[:.]/g, "-");
  await page.goto("https://www.whatsmybrowser.org/");
  await page.screenshot({path: `tests-screenshots/pw-${timestamp}.png`});
  // Note: there should be an assertion in a test--consider .toHaveScreenshot()
});

通过示例运行（我没有费心安装edge），所以失败是预料之中的：

$ npx playwright test a.test.js

Running 7 tests using 4 workers

  ✓  1 [Mobile Chrome] › a.test.js:3:1 › Browser support test (2.2s)
  ✓  2 [chromium] › a.test.js:3:1 › Browser support test (2.1s)
  ✓  3 [webkit] › a.test.js:3:1 › Browser support test (2.6s)
  ✓  4 [firefox] › a.test.js:3:1 › Browser support test (1.9s)
  ✓  5 [Mobile Safari] › a.test.js:3:1 › Browser support test (1.7s)
  ✓  6 [Google Chrome] › a.test.js:3:1 › Browser support test (1.4s)
  ✘  7 [Microsoft Edge] › a.test.js:3:1 › Browser support test (5ms)


  1) [Microsoft Edge] › a.test.js:3:1 › Browser support test ───────────────────

    Error: browserType.launch: Chromium distribution 'msedge' is not found at /opt/microsoft/msedge/msedge
    Run "npx playwright install msedge"

  1 failed
    [Microsoft Edge] › a.test.js:3:1 › Browser support test ────────────────────
  6 passed (5.0s)