快速開始：使用 劇作家工作區 的報告功能進行進階診斷

在這個快速入門中，你將學習如何透過 劇作家工作區 的報告功能來除錯 Playwright 測試。 透過將測試報告儲存到 Azure 儲存體，並在 Azure 入口網站使用 劇作家工作區 報告器檢視以執行進階診斷。

先決條件

• 具有有效訂閱的 Azure 帳戶。 如尚未擁有 Azure 訂用帳戶，請在開始之前先建立免費帳戶。
• 您的 Azure 帳戶需要擁有者 (部分機器翻譯)、參與者 (部分機器翻譯) 或其中一個傳統管理員角色 (部分機器翻譯)。
• 一個使用 Playwright 運行工具和 JavaScript SDK 的 Playwright 專案（目前不支援 NUnit 和其他運行工具）。 如果你還沒有專案，可以用 Playwright 入門文件 或 劇作家工作區 範例專案來建立。
• Playwright 專案必須使用 Playwright 套件（@plawright/測試）版本 1.57 或更新版本。
• Azure CLI。 如果您沒有 Azure CLI，請參閱安裝 Azure CLI。
• Playwright Workspace 必須使用 Microsoft Entra ID 認證。 報告不支援使用存取權杖來進行驗證。

啟用報告並將儲存帳號連結到工作區

要開始使用 劇作家工作區 的報告，第一步是在你的工作區啟用報告功能，並連結一個儲存帳號來儲存你的報告產物。 你可以先用新工作區，或是使用現有的工作區。

為連結的儲存帳號新增基於角色的存取控制（RBAC）角色

1. 在 Azure 入口網站開啟連結的儲存帳號。

2. 前往 [存取控制 (IAM)] 索引標籤。

   

3. 點擊新增角色指派。

   

4. 在 工作函式角色中，搜尋並選擇 儲存區資料貢獻 者角色，然後點擊 下一步。

   

5. 選取並新增所有執行測試的成員。

   

6. 點擊 檢視 + 指派。

安裝 劇作家工作區 套件

要使用 劇作家工作區，請安裝 劇作家工作區 套件。

npm init @azure/playwright@latest

此指令會產生一個 playwright.service.config.ts 檔案，將 Playwright 導向並認證至 Playwright 工作區。

如果您已經有此檔案，套件會要求您覆寫它。

啟用 HTML 與 劇作家工作區 報告器

要使用 劇作家工作區 報告功能，請在 playwright.service.config.ts 檔案中新增以下設定，啟用 HTML 和 劇作家工作區 報告器 –

reporter: [
    ["html", { open: "never" }], // HTML reporter must come first
    ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
]

在 Playwright 設定中啟用成品

在你的專案 playwright.config.ts 檔案中，確保你收集了所有所需的文物。

use: 
{
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
}

設定瀏覽器端點

在您的設定中，您必須提供特定於區域的瀏覽器端點。 此端點取決於您在建立工作區時選取的 Azure 區域。

若要取得瀏覽器端點 URL，請執行下列步驟：

1. 使用您的 Azure 帳戶登入 Azure 入口網站，並瀏覽至您的工作區。

2. 選取 [開始使用] 頁面。

   

3. 在將 瀏覽器端點新增至您的設定中，複製端點 URL。

   確保這個網址在 PLAYWRIGHT_SERVICE_URL 環境變數中可用。

   

設定您的環境

若要設定您的環境，必須使用您在先前步驟中取得的值來設定 PLAYWRIGHT_SERVICE_URL 環境變數。

利用這個 dotenv 模組來管理你的環境。 利用 dotenv，你可以在檔案中 .env 定義環境變數。

1. 將 dotenv 模組新增至您的專案：

   npm i --save-dev dotenv
   

2. 請在 playwright.service.config.ts 中加入以下程式碼片段：

   require('dotenv').config();
   

3. 在 Playwright 專案中，連同 .env 檔案一起建立 playwright.config.ts 檔案：

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   請務必將 {MY-REGION-ENDPOINT} 文字預留位置取代為您稍早複製的值。

設定驗證

若要在 Playwright 工作區中執行 Playwright 測試，您需要將執行測試的 Playwright 用戶端與服務進行驗證。 從你本地的開發機或 CI 機進行驗證。

使用 Microsoft Entra ID 設定驗證

Microsoft Entra ID 是 Playwright Workspace 中唯一支援的報告功能認證。 從你的本機開發機，你可以用 Azure CLI 登入

az login

請使用 劇作家工作區 進行測試

你已經完成了用 劇作家工作區 在雲端執行 Playwright 測試的設定。 您可以使用 Playwright CLI 來執行測試，或使用 Playwright Test Visual Studio Code 擴充功能。

在 Azure 入口網站中對測試執行與結果進行除錯

為連結儲存帳號新增基於角色的存取控制（RBAC）角色

1. 在 Azure 入口網站開啟連結的儲存帳號。

2. 前往 [存取控制 (IAM)] 索引標籤。

   

3. 點擊新增角色指派。

   

4. 在 特殊權限管理員角色 下，搜尋並選取 Contributor 角色，然後按一下 下一步。

   

5. 選取並新增所有能查看測試報告的成員。

   

6. 點擊 檢視 + 指派。

（僅在啟用追蹤時）允許在連結的儲存帳號中列出公開追蹤檢視器

1. 在 Azure 入口網站開啟連結的儲存帳號。

2. 前往設定 -> 資源共享（CORS）。

   

3. 在 Blob 服務下，新增一條紀錄：

   • 允許的原始來源：https://trace.playwright.dev
   • 允許的方法： GET， OPTIONS
   • 最大年齡：輸入介於0到2147483647之間的數值。

   

4. 選取 [儲存]。

在 Azure 入口網站查看已儲存的測試報告

你現在可以在 Azure 入口網站中排解失敗的測試案例。

1. 測試執行結束後，報告器會在 Azure 入口網站產生一個測試執行頁面的連結。 開啟此連結以檢視詳細的測試結果和相關聯的成品。

   

2. 測試執行頁面提供所有故障排除所需的資訊。 您可以：

   • 查看 詳細的錯誤日誌、 測試步驟，以及附帶的影像，如 截圖 或 影片。
   • 直接瀏覽至追蹤檢視器以進行更深入的分析。

   

3. Trace Viewer 讓你能以視覺方式逐步檢視測試執行過程。 您可以：

   • 使用時間軸將滑鼠停留在個別步驟上，並顯示每個動作前後的頁面狀態。
   • 檢查 詳細日誌、 DOM 快照、 網路活動、 錯誤及每個步驟的 主控台輸出 。