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 開發環境 】

1. 先建立一個 playwright-demo 目錄

mkdir playwright-demo

2.進入專案目錄

cd playwright-demo

3.初始化 playwright 專案

npm init playwright@latest

我們在執行 npm init playwright@latest 初始化的過程中，該命令會問你幾個問題，請依照你的需求回答即可。

1. 問你要用什麼程式語言，我會建議選擇 TypeScript，直接按下 Enter 即可
2. 你要將測試案例的程式碼放在哪個資料夾，預設放在 tests 即可，可以直接按下 Enter 鍵
3. 你是否要提供 GitHub Actions workflow 管道範例？你可以按下 y 來取得範例程式碼
4. 你是否要一定安裝 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 測試框架｜多奇教育訓練