Skip to main content

TypeScript

簡介​

Playwright 支援 TypeScript。你只需使用 TypeScript 撰寫測試，Playwright 會讀取它們，轉換為 JavaScript 並執行。

請注意，Playwright 不會檢查類型，即使有非關鍵的 TypeScript 編譯錯誤也會執行測試。我們建議您在 Playwright 旁邊執行 TypeScript 編譯器。例如在 GitHub Actions 上:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    ...
    - name: Run type checks
      run: npx tsc -p tsconfig.json --noEmit
    - name: Run Playwright tests
      run: npx playwright test

本地開發時，你可以像這樣在 watch 模式下執行 tsc:

npx tsc -p tsconfig.json --noEmit -w

tsconfig.json​

Playwright 會載入每個來源檔案的 tsconfig.json。請注意，Playwright 僅支援 以下 tsconfig 選項: allowJs、baseUrl、paths 和 references。

我們建議在測試目錄中設定一個單獨的 tsconfig.json，以便您可以專門為測試更改一些偏好設定。這是一個範例目錄結構。

src/
    source.ts

tests/
    tsconfig.json  # test-specific tsconfig
    example.spec.ts

tsconfig.json  # generic tsconfig for all typescript sources

playwright.config.ts

tsconfig 路徑對應​

Playwright 支援 path mapping 宣告在 tsconfig.json。確保 baseUrl 也已設定。

這是一個適用於 Playwright 的 tsconfig.json 範例:

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@myhelper/*": ["packages/myhelper/*"] // This mapping is relative to "baseUrl".
    }
  }
}

你現在可以使用對應的路徑來匯入:

example.spec.ts
import { test, expect } from '@playwright/test';
import { username, password } from '@myhelper/credentials';

test('example', async ({ page }) => {
  await page.getByLabel('User Name').fill(username);
  await page.getByLabel('Password').fill(password);
});

tsconfig 解決方案​

預設情況下，Playwright 將通過向上查找目錄結構並查找 tsconfig.json 或 jsconfig.json 來查找每個導入文件的最近 tsconfig。這樣，您可以建立一個 tests/tsconfig.json 文件，該文件將僅用於您的測試，Playwright 將自動選取它。

# Playwright will choose tsconfig automatically
npx playwright test

或者，你可以在命令列中指定單個 tsconfig 檔案，Playwright 將使用它來處理所有匯入的檔案，而不僅僅是測試檔案。

# Pass a specific tsconfig
npx playwright test --tsconfig=tsconfig.test.json

手動編譯測試與 TypeScript​

有時候，Playwright Test 無法正確轉換你的 TypeScript 程式碼，例如當你使用 TypeScript 的實驗性或最新功能時，通常在 tsconfig.json 中配置。

在這種情況下，你可以在將測試發送到 Playwright 之前執行你自己的 TypeScript 編譯。

首先在 tests 目錄中新增一個 tsconfig.json 文件:

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "commonjs",
        "moduleResolution": "Node",
        "sourceMap": true,
        "outDir": "../tests-out",
    }
}

在 package.json 中，新增兩個腳本:

{
  "scripts": {
    "pretest": "tsc --incremental -p tests/tsconfig.json",
    "test": "playwright test -c tests-out"
  }
}

pretest 腳本在測試上執行 typescript。test 將執行已生成到 tests-out 目錄中的測試。-c 參數配置測試執行器在 tests-out 目錄中查找測試。

然後 npm run test 會建構測試並執行它們。