情境

瀏覽器 QA 工具套件

一款精簡的 plugin，適用於以瀏覽器為基礎的 QA，涵蓋自動化互動、視覺驗證與本機 web app 偵錯。

3 技能 1 安裝次數

browsertestingautomationscreenshotsplaywright

4 天前更新

安裝

執行此指令以安裝此技能包中的所有技能：

npx skillstore add @browser-qa-kit

CLI 會自動偵測 Codex 與 Claude Code 資料夾；如果兩者都可用，會同時安裝。

總覽

使用指南

由 AI 強化

詳細指南

## Overview
瀏覽器 QA 工具套件整合三項以瀏覽器為核心的 QA skills，用於端對端 UI 檢查：自動化 Playwright 互動、視覺截圖驗證，以及透過瀏覽器日誌進行本機 web app 偵錯。當你需要測試真實 UI 行為，而不只是檢查程式碼時使用它。

## Quick Start
1. 當你需要為 web app 或本機前端進行以瀏覽器為基礎的 QA 時，請在你的 OpenClaw workspace 中安裝此 plugin。
2. 使用 `playwright-browser-automation` (`adammanuel-dev-playwright-browser-automation`) 自動偵測 dev servers、操作頁面、填寫表單、驗證登入流程、檢查連結、擷取截圖，並在 `/tmp` 下撰寫暫時性的 Playwright scripts。
3. 當你需要視覺驗證時，使用 `browser-testing-with-screenshots` (`agentworkforce-browser-testing-with-screenshots`)：驅動 Chrome 互動、選取元素、擷取截圖，並確認關鍵 UI 狀態看起來正確。
4. 使用 `webapp-testing` (`artemisai-webapp-testing`) 透過 Playwright、瀏覽器截圖、瀏覽器日誌，以及聚焦的前端行為檢查，進行本機 web app 偵錯。

## Key Commands
- `playwright-browser-automation` — 自動化瀏覽器互動、響應式檢查、登入流程、連結檢查、截圖，以及廣泛的 Playwright-based 網站驗證。
- `browser-testing-with-screenshots` — 使用 Chrome automation、元素選取與截圖擷取來執行視覺瀏覽器測試，以確認 UI 功能。
- `webapp-testing` — 使用 Playwright 測試本機 web applications、檢查瀏覽器日誌、偵錯 UI 行為，並擷取截圖。

## Tips
- 先使用 `playwright-browser-automation` 取得完整流程覆蓋，接著使用 `browser-testing-with-screenshots` 收集迴歸問題的視覺證據。
- 對於只會在本機重現的前端 bug，將 `webapp-testing` 截圖與瀏覽器日誌搭配使用，讓修正同時具備視覺與執行階段證據。
- 將截圖保留為外部 QA 證據，而不是提交到 application repositories 中。