Skip to main content

網頁伺服器

簡介​

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

設定網頁伺服器​

在您的 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://localhost:3000',
    reuseExistingServer: !process.env.CI,
    stdout: 'ignore',
    stderr: 'pipe',
  },
});
屬性說明
testConfig.webServer在測試期間啟動開發網頁伺服器（或多個）。
command啟動您應用程式本地開發伺服器的 Shell 指令。
cwd所產生程序的目前工作目錄，預設為組態檔的目錄。
env為指令設定的環境變數，預設為 process.env。
gracefulShutdown如何關閉程序。如果未指定，程序群組會強制以 SIGKILL 終止。如果設定為 { signal: 'SIGTERM', timeout: 500 }，程序群組會被發送 SIGTERM 信號，如果在 500ms 內沒有退出，則接著發送 SIGKILL。您也可以使用 SIGINT 作為信號。超時設定為 0 表示不會發送 SIGKILL。Windows 不支援 SIGTERM 和 SIGINT 信號，因此此選項在 Windows 上會被忽略。請注意關閉 Docker 容器需要 SIGTERM。
ignoreHTTPSErrors擷取 url 時是否忽略 HTTPS 錯誤。預設為 false。
name為網頁伺服器指定自訂名稱。此名稱會作為日誌訊息的前綴。預設為 [WebServer]。
reuseExistingServer如果為 true，當 url 上有可用的現有伺服器時會重複使用。如果該 url 上沒有伺服器在執行，則會執行指令來啟動新伺服器。如果為 false，在該 url 上已有現有程序監聽時會拋出錯誤。要查看 stdout，您可以設定 DEBUG=pw:webserver 環境變數。
stderr是否將指令的 stderr 導向到程序 stderr 或忽略它。預設為 "pipe"。
stdout如果為 "pipe"，會將指令的 stdout 導向到程序 stdout。如果為 "ignore"，會忽略指令的 stdout。預設為 "ignore"。
timeout等待程序啟動並可用的時間，以毫秒為單位。預設為 60000。
url您的 http 伺服器的 URL，預期在伺服器準備好接受連線時回傳 2xx、3xx、400、401、402 或 403 狀態碼。

添加伺服器逾時設定​

網頁伺服器有時可能需要更長的時間才能啟動。在這種情況下，您可以增加逾時時間來等待伺服器啟動。

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://localhost:3000',
    reuseExistingServer: !process.env.CI,
    timeout: 120 * 1000,
  },
});

添加 baseURL​

建議同時在組態的 use: {} 區段中指定 baseURL，這樣測試就可以使用相對 url，而您不必重複指定完整的 URL。

當使用 page.goto()、page.route()、page.waitForURL()、page.waitForRequest() 或 page.waitForResponse() 時，它會使用 URL() 建構函式將基礎 URL 納入考量來建構相對應的 URL。例如，透過將 baseURL 設定為 http://localhost:3000 並在測試中導覽到 /login，Playwright 會使用 http://localhost: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://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
  use: {
    baseURL: 'http://localhost:3000',
  },
});

現在您可以在導覽頁面時使用相對路徑：

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

test('test', async ({ page }) => {
  // This will navigate to http://localhost: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://localhost:3000',
      name: 'Frontend',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    },
    {
      command: 'npm run backend',
      url: 'http://localhost:3333',
      name: 'Backend',
      timeout: 120 * 1000,
      reuseExistingServer: !process.env.CI,
    }
  ],
  use: {
    baseURL: 'http://localhost:3000',
  },
});