Playwright Test for VSCode

• 基本 playwright 範本

Playwright Test for VSCode 是微软官方推出的 VSCode 扩展，旨在让 Playwright 端到端自动化测试的开发、运行与调试更加高效和直观。它为 Web 自动化测试提供了可视化工具、录 制器、断点调试、定位器选择等功能，极大提升了测试开发体验。

• 1 .安装扩展：

在 VSCode 扩展市场搜索并安装 Playwright Test for VSCode。

• 2 .初始化 Playwright：

命令面板执行 npx playwright install，选择所需浏览器。

確保該資料夾已經是 Node.js 專案（有 package.json），然後在該資料夾環境下執行 Install Playwright

• 3 .编写或录制测试：

可手动编写测试，或使用录制器生成测试脚本。

• 4 .运行与调试：

在侧边栏或测试代码旁一键运行、调试测试用例。

利用断点和 Trace Viewer 进行问题定位。

或下指令

npx playwright test --headed # E2E 測試

• 指定檔案

 npx playwright test tests/e2e/mindmap-100users.spec.js

 npx playwright test tests/e2e/mindmap-100users.spec.js --headed

---

實際測試

開啟測試檔案: 在 VS Code 中開啟 Playwright 測試檔案，例如 Sharing/ClientApp/tests/e2e/mindmap-concurrency.spec.js。

執行測試:

• 1 .方法一：使用測試總管: 在 VS Code 側邊欄中，點擊 "測試" 圖示 (燒杯圖示) 開啟測試總管。

測試總管會列出所有測試檔案和測試案例。您可以點擊測試案例旁邊的 "執行" 按鈕來執行單個測試案例，或者點擊測試檔案旁邊的 "執行" 按鈕來執行整個測試檔案。

• 2 .方法二：使用編輯器上下文選單: 在編輯器中，右鍵點擊測試檔案的程式碼，然後選擇 "Playwright: Run Test" 或 "Playwright: Debug Test" 來執行或除錯測試。 查看測試結果: 測試結果會顯示在 VS Code 的 "輸出" 面板中。如果測試失敗，您可以點擊錯誤訊息來查看詳細的錯誤資訊。