Snabbstart: Att utföra avancerad diagnostik med rapportering i Arbetsutrymmen för dramatiker

I den här snabbstarten får du lära dig hur du felsöker dina Playwright-tester med hjälp av rapporteringsfunktionen i Arbetsutrymmen för dramatiker. Utför avancerad diagnostik på dina Playwright-tester genom att spara dina testrapporter i Azure Storage och visa dem i Azure-portalen med hjälp av Arbetsutrymmen för dramatiker-reportern.

Förutsättningar

• Ett Azure-konto med en aktiv prenumeration. Om du inte har en Azure-prenumeration, skapa ett gratis konto innan du börjar.
• Ditt Azure-konto behöver rollen Ägare, Deltagare eller någon av de klassiska administratörsrollerna.
• Ett Playwright-projekt som använder Playwright runner och JavaScript SDK (NUnit och andra löpare stöds inte för närvarande). Om du inte har ett projekt skapar du ett med hjälp av dokumentationen om att komma igång med Dramatiker eller använder exempelprojektet Arbetsutrymmen för dramatiker.
• Playwright-projektet måste använda Playwright-paketet (@plawright/test) version 1.57 eller senare.
• Azure CLI. Om du inte har Azure CLI kan du läsa Installera Azure CLI.
• Playwright Workspace måste använda Microsoft Entra ID-autentisering. Autentisering med hjälp av en åtkomsttoken stöds inte för rapportering.

Aktivera rapportering och länka ett lagringskonto till en arbetsyta

För att komma igång med rapportering av Arbetsutrymmen för dramatiker är det första steget att aktivera rapportering på din arbetsyta och länka ett lagringskonto för att lagra dina rapporteringsartefakter. Du kan komma igång med en ny arbetsyta eller använda din befintliga arbetsyta.

Lägga till rollbaserad åtkomstkontroll (RBAC)-roller för det länkade lagringskontot

1. Öppna det länkade lagringskontot i Azure-portalen.

2. Gå till fliken Åtkomstkontroll (IAM).

   

3. Välj Lägg till rolltilldelning.

   

4. Under Jobbfunktionsroller söker du efter och väljer rollen Storage Blob Data Contributor och klickar på Nästa.

   

5. Välj och lägg till alla medlemmar som kör tester.

   

6. Klicka på Granska + tilldela.

Installera Arbetsutrymmen för dramatiker-paketet

Om du vill använda Arbetsutrymmen för dramatiker installerar du paketet Arbetsutrymmen för dramatiker.

npm init @azure/playwright@latest

Det här kommandot genererar en playwright.service.config.ts fil som dirigerar och autentiserar Playwright till Arbetsutrymmen för dramatiker.

Om du redan har den här filen ber paketet dig att skriva över den.

Aktivera HTML- och Arbetsutrymmen för dramatiker-reporter

Om du vill använda Reporting-funktionen för Arbetsutrymmen för dramatiker aktiverar du html- och Arbetsutrymmen för dramatiker-reportern genom att lägga till följande inställning i filen playwright.service.config.ts –

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

Aktivera artefakter i din playwright-konfiguration

I den playwright.config.ts filen i projektet kontrollerar du att du samlar in alla artefakter som krävs.

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

Konfigurera webbläsarslutpunkten

I konfigurationen måste du ange den regionspecifika webbläsarslutpunkten. Slutpunkten beror på vilken Azure-region du valde när du skapade arbetsytan.

Utför följande steg för att hämta webbläsarens slutpunkts-URL:

1. Logga in på Azure-portalen med ditt Azure-konto och gå till din arbetsyta.

2. Välj sidan Kom igång .

   

3. I Lägg till webbläsarslutpunkten i konfigurationen kopierar du slutpunkts-URL:en.

   Kontrollera att den här URL:en är tillgänglig i PLAYWRIGHT_SERVICE_URL miljövariabeln.

   

Konfigurera din miljö

För att konfigurera din miljö måste du konfigurera PLAYWRIGHT_SERVICE_URL miljövariabeln med det värde som du fick i föregående steg.

Använd modulen dotenv för att hantera din miljö. Med hjälp av dotenvkan du definiera miljövariablerna i .env filen.

1. Lägg till modulen i dotenv projektet:

   npm i --save-dev dotenv
   

2. Lägg till följande kodfragment i playwright.service.config.ts:

   require('dotenv').config();
   

3. Skapa en .env fil tillsammans med playwright.config.ts filen i ditt Playwright-projekt:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Ersätt {MY-REGION-ENDPOINT} textplatshållaren med det värde som du kopierade tidigare.

Konfigurera autentisering

Om du vill köra dina Playwright-tester på din Playwright-arbetsyta måste du autentisera Playwright-klienten där du kör testerna med tjänsten. Autentisera från din lokala utvecklingsdator eller CI-dator.

Konfigurera autentisering med Microsoft Entra-ID

Microsoft Entra-ID är den enda autentisering som stöds för användning av rapporteringsfunktionen i Playwright Workspace. Från din lokala utvecklingsdator kan du använda Azure CLI för att logga in

az login

Kör dina tester med Arbetsutrymmen för dramatiker

Du har slutfört konfigurationen för att köra dina Playwright-tester i molnet med Arbetsutrymmen för dramatiker. Du kan antingen använda Playwright CLI för att köra dina tester eller använda tillägget Playwright Test Visual Studio Code.

Felsöka testkörningar och resultat i Azure-portalen

Lägg till rollbaserade åtkomstkontroller (RBAC)-roller för det länkade lagringskontot

1. Öppna det länkade lagringskontot i Azure-portalen.

2. Gå till fliken Åtkomstkontroll (IAM).

   

3. Välj Lägg till rolltilldelning.

   

4. Under Privilegierade administratörsroller, sök efter och välj Bidragsgivarroll och klicka på Nästa.

   

5. Välj och lägg till alla medlemmar som kan visa testrapporterna.

   

6. Klicka på Granska + tilldela.

(Endast om spårning är aktiverat) Tillåt listning av offentliga visningsprogram för spårning i det länkade lagringskontot

1. Öppna det länkade lagringskontot i Azure-portalen.

2. Gå till Inställningar –> Resursdelning (CORS).

   

3. Under Blob Service lägger du till en ny post:

   • Tillåtet ursprung: https://trace.playwright.dev
   • Tillåtna metoder: GET, OPTIONS
   • Max ålder: Ange ett värde mellan 0 och 2147483647.

   

4. Välj Spara.

Visa sparade testrapporter i Azure-portalen

Nu kan du felsöka misslyckade testfall i Azure-portalen.

1. När testkörningen är klar genererar reportern en länk till sidan Testkörningar i Azure-portalen. Öppna den här länken om du vill visa detaljerade testresultat och associerade artefakter.

   

2. Sidan Testkörningar innehåller all nödvändig information för felsökning. Du kan:

   • Visa detaljerade felloggar, teststeg och bifogade artefakter, till exempel skärmbilder eller videor.
   • Gå direkt till Spårningsläsaren för djupare analys.

   

3. Med Spårningsvisaren kan du gå igenom testkörningen visuellt. Du kan:

   • Använd tidslinjen för att hovra över enskilda steg och visa sidtillståndet före och efter varje åtgärd.
   • Granska detaljerade loggar, DOM-ögonblicksbilder, nätverksaktivitet, fel och konsolutdata för varje steg.