前言

因為自己習慣使用 Windows 作業系統，加上如果想入手頂規 Mac，價格實在不親民，所以目前對購買 Mac 還沒有太大的衝動。不過在開發上，還是會有需要模擬 Safari 環境的需求。

於是我在網路上找了一些跨瀏覽器與裝置測試服務，試用過像是 BrowserStack、LambdaTest、Browserling 等平台。這些服務雖然都不錯，但大多需要付費，就算有提供免費方案，功能限制也很多。身為一位在預算上比較節省客家的人，當然希望能省則省。

就在這樣的情況下，我認識了今天的主角 Playwright。雖然 Playwright 無法 100% 完全還原 Safari（特別是 iOS Safari 的行為），但對我來說，只要能測試「網站在 Safari 上的顯示是否正常」就已經足夠，這也剛好符合我目前的需求。

教學內容

這篇文章會提供兩種使用方式來安裝與啟用 Playwright：

1. 透過命令列終端機
2. 透過 VS Code 擴充功能

其中 VS Code 是我和大部分開發者都常用的 IDE，所以也會特別推薦這個方式。

安裝說明

安裝前準備

• 必要條件：請先安裝 Node.js（建議使用版本 20、22 或 24）。
• 版本檢查：在終端機輸入以下指令確認版本： node -v

安裝方式

方法一：透過命令列終端機

mkdir Playwright
cd Playwright
npm init playwright@latest

• 預設會選擇 TypeScript，但我個人偏好使用 JavaScript，所以這邊會切換成 JavaScript。
• 如果沒有特別要更改設定，其實一路按 Enter 到結束即可。

方法二：透過 VS Code 擴充安裝

1. 開啟 VS Code
2. 安裝擴充功能：Playwright Test for VS Code
3. 使用快捷鍵 Ctrl + Shift + P，輸入 Install Playwright
4. 勾選你要安裝的瀏覽器（例如： Chromium、Firefox、WebKit）

使用範例

模擬瀏覽器環境：

• 模擬桌面版 Safari： npx playwright codegen --browser=webkit http://localhost:3000
• 模擬 iPhone 13 Safari（手機版）： npx playwright codegen --device="iPhone 13" http://localhost:3000

這兩個指令可以幫你快速開啟指定頁面，並模擬在對應裝置與瀏覽器上的呈現效果。

卸載 Playwright

如果未來不再需要，也可以簡單卸載 Playwright 安裝的瀏覽器：

npx playwright uninstall --all

總結

目前我用 Playwright 執行一些基本指令就已經很夠用了。雖然它也支援撰寫更完整的自動化測試腳本，但以我目前單純的需求來說，只要能模擬 Safari 的瀏覽環境、檢查頁面在桌面和手機上的顯示是否正常、排版是否正確，還有快速查看 CSS 屬性就足夠了。其他像是開發與除錯的工作，我習慣在 Firefox 或 Brave 上進行，這兩個瀏覽器對我來說已經能滿足大多數日常的開發需求。

如果你也有 Safari 模擬的需求，又不想額外花錢，Playwright 絕對是個值得一試的好選擇。不妨親自試看看！