無頭瀏覽器 Mac 自動化測試 | 遠端 UI 測試方案

👋 在現代軟體開發流程中，UI 自動化測試已經成為 CI/CD 流水線的核心環節。無論是 Web 應用還是跨平台桌面程式，無頭瀏覽器（Headless Browser）都是測試工程師的必備工具。🚀 但當你需要在 macOS 環境下進行測試——尤其是涉及 Safari 或 WebKit 引擎的場景時，本地 Mac 硬體的成本與管理開銷往往令人卻步。💸 今天 VNCMac 技術團隊就帶大家深入探討如何在雲端遠端 Mac 上高效運行無頭瀏覽器與 UI 自動化腳本！🧪

🤔 為什麼選擇遠端 Mac 進行自動化測試？

在深入技術細節前，我們先來看看為什麼越來越多的團隊選擇將自動化測試遷移到雲端 Mac 環境：

✅ 成本效益極高：無需購買昂貴的 Mac 硬體，按需租用即可（測試時開機，閒置時釋放）
✅ 原生 Safari/WebKit 支援：macOS 是唯一能原生運行 Safari 的平台，Web 應用必須在真實環境測試
✅ 24/7 持續運行：雲端 Mac 可以全天候執行測試任務，不受辦公室斷電或本地機器關機影響
✅ CI/CD 無縫整合：遠端 Mac 可直接對接 Jenkins、GitLab Runner、GitHub Actions 等流水線工具
✅ 並行測試能力：同時租用多台 Mac 執行平行測試，大幅縮短測試週期（例如將 2 小時的測試壓縮至 15 分鐘）

🛠️ 三大主流無頭瀏覽器方案對比

在 macOS 環境下，最常用的無頭瀏覽器框架有三個：Puppeteer、Selenium 與 Playwright。讓我們來看看它們的核心差異：👇

特性	Puppeteer 🎭	Selenium 🔧	Playwright 🎬
支援瀏覽器	Chrome / Chromium / Edge	Chrome / Firefox / Safari / Edge	Chrome / Firefox / Safari / Edge
安裝難度	極簡 (npm install)	需配置 WebDriver	簡單 (自動下載瀏覽器)
Safari 支援	❌ 不支援	✅ 通過 SafariDriver	✅ 通過 WebKit 引擎
執行速度	極快 (Chrome DevTools Protocol)	中等 (WebDriver 協議開銷)	極快 (原生協議)
API 易用性	⭐⭐⭐⭐⭐ 現代化 Promise	⭐⭐⭐ 傳統同步風格	⭐⭐⭐⭐⭐ 最強大
適用場景	Chrome 單一瀏覽器測試	需跨多瀏覽器的老項目	現代化跨瀏覽器測試

"對於需要測試 Safari 的 Web 應用，Playwright 是 2026 年的最佳選擇——它對 macOS WebKit 的支援比 Selenium 更穩定，且 API 設計更友好。" —— VNCMac 測試架構師

⚡️ 實戰：在遠端 Mac 上配置 Playwright 自動化測試

接下來我們以 Playwright 為例，演示如何在 VNCMac 雲端 Mac 上從零搭建 UI 自動化測試環境。🎯

步驟 1：連接到遠端 Mac

首先通過 SSH 連接到你的 VNCMac 雲端主機（假設 IP 為 192.168.1.100）：

# 使用 SSH 連接到遠端 Mac ssh [email protected] # 或使用 VNC 遠端桌面（適合需要圖形介面的場景） open vnc://192.168.1.100

步驟 2：安裝 Node.js 與 Playwright

Playwright 依賴 Node.js 環境。在遠端 Mac 上執行以下命令：

# 安裝 Homebrew (如果尚未安裝)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 安裝 Node.js
brew install node

# 驗證安裝
node --version  # 應輸出 v20.x.x
npm --version

# 創建測試專案目錄
mkdir ui-automation-test && cd ui-automation-test
npm init -y

# 安裝 Playwright（會自動下載 Chrome、Firefox、WebKit 瀏覽器）
npm install -D @playwright/test
npx playwright install
                

步驟 3：撰寫第一個測試腳本

建立測試文件 example.spec.js，測試一個簡單的網頁標題檢查：

// example.spec.js
const { test, expect } = require('@playwright/test');

test('檢查 VNCMac 官網標題', async ({ page }) => {
  // 前往目標網頁
  await page.goto('https://vncmac.com');
  
  // 驗證頁面標題
  await expect(page).toHaveTitle(/VNCMac/);
  
  // 截圖保存（用於 CI/CD 報告）
  await page.screenshot({ path: 'homepage.png', fullPage: true });
});
                

步驟 4：執行無頭測試

在遠端 Mac 的終端執行以下命令啟動測試（預設為無頭模式）：

# 運行所有測試（預設無頭模式）
npx playwright test

# 指定瀏覽器引擎（測試 Safari/WebKit）
npx playwright test --project=webkit

# 啟用 UI 模式（可視化調試，需要 VNC 遠端桌面）
npx playwright test --ui

# 生成 HTML 測試報告
npx playwright show-report
                

✅ 此時測試會在背景執行，無需圖形介面！所有截圖與報告都會保存到本地，可透過 SCP 或 Git 同步到你的開發機器。

🔄 整合到 CI/CD 流水線

最強大的應用場景是將遠端 Mac 自動化測試整合到 CI/CD 流程。以 GitLab Runner 為例：

在遠端 Mac 上安裝 GitLab Runner

# 安裝 GitLab Runner
brew install gitlab-runner

# 註冊 Runner 並連接到 GitLab 項目
gitlab-runner register

# 啟動 Runner 服務
brew services start gitlab-runner
                

配置 .gitlab-ci.yml

# .gitlab-ci.yml
stages:
  - test

ui-test-mac:
  stage: test
  tags:
    - macos  # 指定使用 macOS Runner
  script:
    - npm install
    - npx playwright install
    - npx playwright test --project=webkit
  artifacts:
    when: always
    paths:
      - playwright-report/
      - test-results/
  only:
    - main
    - merge_requests
                

🎉 現在每次程式碼提交或合併請求時，GitLab 都會自動觸發遠端 Mac 上的 UI 測試，並生成報告！

📊 性能對比：本地 Mac vs 雲端 VNCMac

為了驗證雲端方案的實際優勢,我們做了一組對比測試：執行 100 個 UI 測試用例（涵蓋登入、表單提交、頁面跳轉等場景）📈

方案	硬體配置	總執行時間	單月成本
本地 Mac mini (M2)	M2 16GB	18 分鐘	NT$30,000 (設備攤提)
VNCMac M4 單機	M4 24GB	12 分鐘 ⚡️	NT$4,500 (按量付費)
VNCMac M4 × 3 並行	M4 24GB × 3	4 分鐘 🚀	NT$6,000 (彈性擴展)

💡 關鍵洞察：使用 VNCMac 的並行方案，不僅速度提升 4.5 倍，成本還遠低於購買 3 台本地設備（省下超過 NT$80,000 初期投入）！

🎯 最佳實踐與注意事項

1. 善用螢幕截圖與影片錄製

無頭模式下無法直接觀察測試過程，因此務必啟用 Playwright 的截圖與影片錄製功能：

// playwright.config.js
module.exports = {
  use: {
    screenshot: 'only-on-failure',  // 失敗時自動截圖
    video: 'retain-on-failure',      // 失敗時保留影片
  },
};
                

2. 處理 macOS 權限問題

首次運行時，macOS 可能會彈出「系統偏好設定 → 安全性與隱私」的權限請求。在 VNCMac 遠端桌面中手動允許即可：

🔓 輔助功能權限：系統偏好設定 → 安全性與隱私 → 輔助功能 → 勾選終端機/Node
🔓 螢幕錄製權限：安全性與隱私 → 螢幕錄製 → 勾選對應應用程式

3. 優化測試執行速度

⚡️ 啟用並行測試：Playwright 支援多 Worker 並行（例如 --workers=4）
⚡️ 重用瀏覽器上下文：避免每個測試都重新啟動瀏覽器（節省 50% 時間）
⚡️ 使用 M4 晶片機型：VNCMac 的 M4 Mac 在 Playwright 測試中比 M2 快 35%

4. 遠端除錯技巧

當測試失敗需要除錯時，可透過 VNC 遠端桌面啟用 Playwright 的 UI 模式：

# 啟動互動式除錯介面（需在 VNC 桌面中執行）
npx playwright test --debug

# 使用 Playwright Inspector 逐步執行測試
PWDEBUG=1 npx playwright test
                

💰 成本計算：自建 vs 雲端方案

讓我們做個實際的成本分析（假設團隊需要 24/7 運行測試環境）：

項目	自建 Mac 機房	VNCMac 雲端方案
初期硬體成本	NT$90,000 (3 台 Mac mini M2)	NT$0 (按需租用)
電費 + 網路 (年)	NT$12,000	已含 (機房託管)
維護人力成本 (年)	NT$60,000 (系統更新、硬體維修)	NT$0 (全託管)
月度總成本	NT$13,500	NT$6,000 💰

🎉 結論：雲端方案每月節省超過 NT$7,500，一年累計省下近 NT$90,000！而且無需擔心硬體折舊與升級問題。

🏆 總結

在 2026 年，將 UI 自動化測試遷移到雲端 Mac 已經不再是「未來趨勢」，而是「當下最佳實踐」。無論你選擇 Puppeteer、Selenium 還是 Playwright，VNCMac 都能提供：

🚀 原生 macOS/Safari 測試環境：告別 Hackintosh 或虛擬機的相容性問題
⚡️ M4 晶片極速性能：比本地 M2 設備快 35%，測試執行時間大幅縮短
💰 按需付費零浪費：測試時開機，閒置時釋放，成本降低 50% 以上
🔧 CI/CD 無縫整合：直接對接 GitLab、Jenkins、GitHub Actions，全自動化流程
🌍 24/7 全球可用：不受辦公室斷電、假期影響，測試永不停機

如果你的團隊正在尋找一個穩定、高效且性價比極高的 macOS 自動化測試方案，現在就來試試 VNCMac 吧！🎯 前 100 名註冊用戶可免費體驗 M4 雲端 Mac 24 小時！

自動化測試專用：如何在遠端 Mac 上運行無頭瀏覽器與 UI 自動化腳本 (2026)