网络服务器

介绍

¥Introduction

Playwright 在配置文件中附带了 webserver 选项，使你能够在运行测试之前启动本地开发服务器。这非常适合在开发期间编写测试以及没有要测试的暂存或生产 URL 时。

¥Playwright comes with a webserver option in the config file which gives you the ability to launch a local dev server before running your tests. This is ideal for when writing your tests during development and when you don't have a staging or production url to test against.

配置网络服务器

¥Configuring a web server

使用 Playwright 配置中的 webserver 属性在测试期间启动开发 Web 服务器。

¥Use the webserver property in your Playwright config to launch a development web server during the tests.

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',
  },
});

属性	描述
testConfig.webServer	在测试期间启动一个（或多个）开发 Web 服务器。
command	用于启动应用的本地开发服务器的 Shell 命令。
url	当服务器准备好接受连接时，预计返回 2xx、3xx、400、401、402 或 403 状态代码的 http 服务器的 URL。
reuseExistingServer	如果是 true，它将在可用时重新使用 url 上的现有服务器。如果该 url 上没有运行服务器，它将运行命令来启动新服务器。如果是 false，如果现有进程正在监听该 url，则会抛出异常。要查看标准输出，你可以设置 DEBUG=pw:webserver 环境变量。
ignoreHTTPSErrors	获取 url 时是否忽略 HTTPS 错误。默认为 false。
cwd	生成进程的当前工作目录，默认为配置文件的目录。
stdout	如果是 "pipe"，它将通过管道将命令的标准输出传输到进程标准输出。如果是 "ignore"，它将忽略命令的标准输出。默认为 "ignore"。
stderr	是否将命令的 stderr 通过管道传输到进程 stderr 或忽略它。默认为 "pipe"。
timeout	`等待进程启动并可用的时间（以毫秒为单位）。默认为 60000。

添加服务器超时

¥Adding a server timeout

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

¥Webservers can sometimes take longer to boot up. In this case, you can increase the timeout to wait for the server to start.

playwright.config.ts

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

export default defineConfig({
  // Rest of your config...

  // 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,
    timeout: 120 * 1000,
  },
});

添加 baseURL

¥Adding a baseURL

还建议在配置的 use: {} 部分中指定 baseURL，以便测试可以使用相对 url，而不必一遍又一遍地指定完整的 URL。

¥It is also recommended to specify the baseURL in the use: {} section of your config, so that tests can use relative urls and you don't have to specify the full URL over and over again.

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

¥When using page.goto(), page.route(), page.waitForURL(), page.waitForRequest(), or page.waitForResponse() it takes the base URL in consideration by using the URL() constructor for building the corresponding URL. For Example, by setting the baseURL to http://127.0.0.1:3000 and navigating to /login in your tests, Playwright will run the test using http://127.0.0.1:3000/login.

playwright.config.ts

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

export default defineConfig({
  // Rest of your config...

  // 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,
  },
  use: {
    baseURL: 'http://127.0.0.1:3000',
  },
});

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

¥Now you can use a relative path when navigating the page:

test.spec.ts

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

test('test', async ({ page }) => {
  // This will navigate to http://127.0.0.1:3000/login
  await page.goto('./login');
});

多个网络服务器

¥Multiple web servers

通过提供一系列 webServer 配置，可以同时启动多个 Web 服务器（或后台进程）。请参阅 testConfig.webServer 了解更多信息。

¥Multiple web servers (or background processes) can be launched simultaneously by providing an array of webServer configurations. See testConfig.webServer for more info.

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',
  },
});