Web服务器

介绍

Playwright 在配置文件中提供了一个 webserver 选项，让你在运行测试之前启动一个本地开发服务器。这对于在开发期间编写测试时，以及没有预先设定的 staging 或生产环境 URL 进行测试时非常理想。

配置 Web 服务器

使用 webServer 属性在 Playwright 配置中启动一个开发 Web 服务器，以便在测试期间运行。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // Run your local dev server before starting the tests
  webServer: {
    command: 'npm run start',
    url: 'http://127.0.0.1:3000',
    reuseExistingServer: !process.env.CI,
    stdout: 'ignore',
    stderr: 'pipe',
  },
});
属性 说明

webServer

在测试期间启动一个或多个开发 Web 服务器。

command

启动本地开发服务器的 shell 命令。

url

预期返回 2xx、3xx、400、401、402 或 403 状态码的 HTTP 服务器 URL。

reuseExistingServer

如果为 true，在可用时会重用现有服务器；如果 false，则在已存在的进程监听该 URL 时会抛出错误。设置 DEBUG=pw:webserver 环境变量可以查看标准输出。

ignoreHTTPSErrors

是否忽略 HTTPS 错误（默认为 false）。

cwd

启动进程的当前工作目录，默认为配置文件所在目录。

stdout

如果设置为 "pipe"，则将命令的标准输出重定向到进程的标准输出；如果设置为 "ignore"，则忽略命令的标准输出。默认为 "ignore"。

stderr

是否将命令的标准错误重定向到进程的标准错误或忽略它。默认为 "pipe"。

timeout

等待进程启动并在毫秒内变得可用的时间，默认为 60000 毫秒。

增加服务器启动超时

有时 Web 服务器可能需要更长时间才能启动。在这种情况下，你可以增加超时时间，以便等待服务器启动。

playwright.config.ts
// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // 配置其他内容...

  // 在测试开始之前运行本地开发服务器
  webServer: {
    command: 'npm run start',  // 启动本地服务器的命令
    url: 'http://127.0.0.1:3000',  // 服务器的 URL
    reuseExistingServer: !process.env.CI,
    timeout: 120 * 1000,  // 设置更长的超时时间
  },
});

添加 baseURL

还建议在 use 配置部分指定 baseURL，这样测试可以使用相对 URL，从而避免每次都必须指定完整的 URL。

当使用 page.goto()、page.route()、page.waitForURL()、page.waitForRequest() 或 page.waitForResponse() 时，Playwright 会考虑 baseURL，通过 URL() 构造函数来构建相应的 URL。例如，通过将 baseURL 设置为 http://127.0.0.1:3000，并在测试中导航到 /login，Playwright 会使用 http://127.0.0.1:3000/login 来运行测试。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // 配置其他内容...

  // 在测试开始之前运行本地开发服务器
  webServer: {
    command: 'npm run start',
    url: 'http://127.0.0.1:3000',
    reuseExistingServer: !process.env.CI,
  },
  use: {
    baseURL: 'http://127.0.0.1:3000',  // 设置 baseURL
  },
});

现在你可以在页面导航时使用相对路径：

test.spec.ts
// test.spec.ts
import { test } from '@playwright/test';

test('测试', async ({ page }) => {
  // 这将导航到 http://127.0.0.1:3000/login
  await page.goto('./login');
});

多个 Web 服务器

可以通过提供 webServer 配置数组，同时启动多个 Web 服务器（或后台进程）。更多信息，请参见 testConfig.webServer。

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: [
    {
      command: 'npm run start',
      url: 'http://127.0.0.1:3000',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run backend',
      url: 'http://127.0.0.1:3333',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    }
  ],
  use: {
    baseURL: 'http://127.0.0.1:3000',  // 设置 baseURL
  },
});