Playwright 開發環境安裝指南
Playwright 開發環境說明
為了能讓大家能夠順利的建立起 Playwright 開發環境，以下是需要安裝的相關軟體與安裝步驟與說明。
【 作業系統 】
- Windows 10+, Windows Server 2016+ 或 Windows Subsystem for Linux (WSL)
- macOS 13 Ventura, 或 macOS 14 Sonoma
- Debian 11, Debian 12, Ubuntu 20.04 或 Ubuntu 22.04, Ubuntu 24.04, 支援 x86-64 和 arm64 架構。
【 安裝 VS Code 編輯器 】
微軟特別有針對 Playwright 設計了一套 Visual Studio Code 擴充套件，可以讓你在開發 Playwright 的過程中更加順暢，因此我建議你可以安裝 Visual Studio Code 編輯器，並且安裝 Playwright Test for VSCode 擴充套件。
【 安裝 Node.js 工具 】
由於 Playwright 支援多種程式語言，建議以 Node.js 為主要開發環境，因此你必須要安裝 Node.js 環境，請先下載 Node.js 安裝程式，安裝的版本建議在 v18 以上，這樣可以確保 Playwright 的功能可以正常運作。
若要安裝支援 Playwright 的 Node.js 執行環境，我個人是建議透過 nvm 安裝 LTS 最新版(v20)，至於 nvm 工具的安裝步驟，可參考我的 使用 NVM (Node Version Manager) 管理多個不同版本的 Node.js 執行環境 文章。
在你安裝好 nvm 工具之後，請執行以下指令安裝 Node.js v20 版本：
- Windows
nvm install 20
nvm use 20
請注意：在 Windows 使用 nvm-windows 安裝 Node.js 時，必須以系統管理員身分執行「命令提示字元」或 PowerShell 命令列環境。
- macOS / Linux / WSL
# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
# download and install Node.js (you may need to restart the terminal)
nvm install 20
nvm alias default 20
請注意：在 macOS / Linux / WSL 使用 nvm 安裝 Node.js 時，是不需要使用到 sudo 命令的。
最後，我們要驗證一下你的環境目前安裝的 Node.js 為哪個版本？
node -v
請確認為 v20.17.0 或以上版本！
【 初始化 Playwright 開發環境 】
- 先建立一個 playwright-demo 目錄
mkdir playwright-demo
2.進入專案目錄
cd playwright-demo
3.初始化 playwright 專案
npm init playwright@latest我們在執行 npm init playwright@latest 初始化的過程中，該命令會問你幾個問題，請依照你的需求回答即可。
- 問你要用什麼程式語言，我會建議選擇
TypeScript，直接按下 Enter 即可 - 你要將測試案例的程式碼放在哪個資料夾，預設放在
tests即可，可以直接按下 Enter 鍵 - 你是否要提供 GitHub Actions workflow 管道範例？你可以按下
y來取得範例程式碼 - 你是否要一定安裝 Playwright 所需的瀏覽器，預設為自動安裝，直接按下 Enter 即可
初始化完成後，目前所在目錄就會包含所有開發 Playwright 所需的設定檔與範例程式碼，接著可以執行以下指令來啟動一次 E2E 測試：
npx playwright test若看到 6 passed 就代表有六個測試案例已經都跑成功了！
你也可以嘗試使用 --ui 參數來啟動 Playwright 的互動式 UI 模式，有畫面可以看，會比較有感：
npx playwright test --ui
點擊 Run all 按鈕，就可以開始執行所有的測試案例！
完成測試後，將自動產生一份 HTML 測試報告，透過執行以下命令，就會自動開啟一個網頁顯示測試的完整報告：
npx playwright show-report
注意: 這個命令會在本機建立一個臨時的伺服器，網址為 http://localhost:9323/，你可以在瀏覽器中開啟這個網址，查看測試報告。
這個網頁允許你依照瀏覽器、通過的測試、失敗的測試、跳過的測試和不穩定的測試來篩選報告。你可以點擊每個測試，探索測試的錯誤以及測試的每一步。預設情況下，如果某些測試失敗，HTML 報告會自動打開。
【 使用 Docker 執行測試 】
如果你本身就熟悉 Docker 容器技術，也可以透過 Docker Desktop 或 Podman 來執行 Playwright 測試，這樣可以確保你的測試環境是一致的，未來可以避免因為環境不同而導致的測試失敗。
請注意: 若你是 Windows 作業系統，請確保你已經啟用了 Docker Desktop 的 Enable host networking 功能，這樣你才能順利的在容器中方便的使用 localhost 本地迴路介面 (loopback interface)，並在 Host 主機順利的連線到容器中的網路。
此功能必須使用 Docker Desktop v4.34 以上版本，並且在 Windows 作業系統中，必須啟用 WSL 2 功能。
引用來源：實戰 E2E 測試：使用 Playwright 測試框架｜多奇教育訓練
你可能也想看
