網頁伺服器

簡介

Playwright 附帶一個 webserver 選項在設定檔中，這讓你能夠在執行測試之前啟動本地開發伺服器。這在開發過程中撰寫測試以及沒有測試用的預備或生產 url 時非常理想。

設定一個 web 伺服器

在你的 Playwright 配置中使用 webserver 屬性來在測試期間啟動開發網頁伺服器。

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

Property	Description
testConfig.webServer	在測試期間啟動一個開發 web 伺服器（或多個）。
command	啟動應用程式本地開發伺服器的 Shell 指令。
url	當伺服器準備接受連接時，預期返回 2xx、3xx、400、401、402 或 403 狀態碼的 http 伺服器 URL。
reuseExistingServer	如果為 true，則在可用時重新使用該 url 上的現有伺服器。如果該 url 上沒有伺服器在執行，則會執行指令啟動新伺服器。如果為 false，則如果有現有程序在該 url 上監聽，則會拋出錯誤。要查看 stdout，可以設置 DEBUG=pw:webserver 環境變數。
ignoreHTTPSErrors	在獲取 url 時是否忽略 HTTPS 錯誤。預設為 false。
cwd	啟動程序的當前工作目錄，預設為配置文件的目錄。
stdout	如果為 "pipe"，則會將指令的 stdout 管道到程序 stdout。如果為 "ignore"，則會忽略指令的 stdout。預設為 "ignore"。
stderr	是否將指令的 stderr 管道到程序 stderr 或忽略它。預設為 "pipe"。
timeout	等待程序啟動並可用的時間（以毫秒為單位）。預設為 60000。

添加伺服器超時設定

Webservers 有時可能需要更長的時間來啟動。在這種情況下，你可以增加等待伺服器啟動的超時時間。

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

建議在配置的 use: {} 部分指定 baseURL, 這樣測試可以使用相對網址, 而不必一遍又一遍地指定完整的 URL。

當使用 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 執行測試。

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

現在你可以在瀏覽頁面時使用相對路徑:

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

多個網頁伺服器

多個網頁伺服器 (或背景程序) 可以通過提供 webServer 配置陣列同時啟動。查看 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',
  },
});