跳轉到

1.2 安裝與建立專案#

建立專案（三步驟）#

第一步：初始化 Playwright

在一個新的資料夾（或現有專案）中：

npm init playwright@latest

互動問答會問你幾個問題，建議回答：

✔ Do you want to use TypeScript or JavaScript? → TypeScript
✔ Where to put your end-to-end tests? → tests（預設）
✔ Add a GitHub Actions workflow? → false（可之後再加，見 5.3）
✔ Install Playwright browsers? → true

第二步：確認安裝

安裝完成後專案會有：

my-e2e/
├── playwright.config.ts   # 設定檔
├── tests/                 # 測試檔目錄
│   └── example.spec.ts    # 範例測試
└── package.json

瀏覽器沒裝好可手動補：

npx playwright install    # 安裝三大瀏覽器
npx playwright install chromium   # 只裝 Chromium

第三步：跑一下範例測試驗證

npx playwright test

看到測試通過的輸出，環境就完成了。

系統需求檢查#

npx playwright --version

Linux 的 CI 環境可能缺系統依賴，用 npx playwright install-deps 安裝。

Playwright 會幫你裝什麼？#

組件 用途
@playwright/test 測試框架本體（npm 套件）
瀏覽器二進位檔 Chromium、Firefox、WebKit 的獨立版本
playwright.config.ts 專案設定（瀏覽器、超時、報告等）

注意：Playwright 用的是它自己下載的瀏覽器版本，不是你電腦上裝的 Chrome。這樣才能保證測試環境一致。