Quickstart: End-to-end-tests op schaal uitvoeren met Microsoft Playwright Testing Preview

In deze quickstart leert u hoe u playwright-tests kunt uitvoeren met zeer parallelle cloudbrowsers en problemen met mislukte tests eenvoudig kunt oplossen met behulp van Microsoft Playwright Testing Preview. Gebruik de cloudinfrastructuur om uw toepassing te valideren in meerdere browsers, apparaten en besturingssystemen. Publiceer de resultaten en artefacten die door Playwright zijn gegenereerd naar de service en bekijk ze in de serviceportal.

Nadat u deze quickstart hebt voltooid, hebt u een Microsoft Playwright Testing-werkruimte om uw Playwright-tests op schaal uit te voeren en testresultaten en artefacten in de serviceportal weer te geven.

Belangrijk

Microsoft Playwright Testing is momenteel beschikbaar als preview-versie. Zie de aanvullende gebruiksvoorwaarden voor Microsoft Azure Previews voor juridische voorwaarden die van toepassing zijn op Azure-functies die in de bètaversie, in preview of anderszins nog niet zijn uitgebracht in algemene beschikbaarheid.

Vereisten

• Een Azure-account met een actief abonnement. Als u geen Azure-abonnement hebt, maakt u een gratis account voordat u begint.
• Uw Azure-account heeft de rol Eigenaar, Inzender of een van de klassieke beheerdersrollen nodig.
• Een Playwright-project. Als u geen project hebt, maakt u er een met behulp van de playwright-documentatie aan de slag of gebruikt u ons Microsoft Playwright Testing-voorbeeldproject.
• Azure CLI. Zie Azure CLI installeren als u geen Azure CLI hebt.

Een werkruimte maken

Als u aan de slag wilt gaan met het uitvoeren van playwright-tests op schaal in cloudbrowsers, maakt u eerst een Microsoft Playwright Testing-werkruimte in de Playwright-portal.

1. Meld u aan bij de Playwright-portal met uw Azure-account.

2. Als u al een werkruimte hebt, selecteert u een bestaande werkruimte en gaat u naar de volgende stap.

   Tip

   Als u meerdere werkruimten hebt, kunt u overschakelen naar een andere werkruimte door de naam van de werkruimte boven aan de pagina te selecteren en vervolgens alle werkruimten beheren te selecteren.

3. Als u nog geen werkruimte hebt, selecteert u + Nieuwe werkruimte en geeft u de volgende informatie op:

   Veld	Beschrijving
   Werkruimtenaam	Voer een unieke naam in om uw werkruimte te identificeren. De naam mag alleen bestaan uit alfanumerieke tekens en heeft een lengte tussen 3 en 64 tekens.
   Azure-abonnement	Selecteer het Azure-abonnement dat u wilt gebruiken voor deze Microsoft Playwright Testing-werkruimte.
   Regio	Selecteer een geografische locatie om uw werkruimte te hosten. Dit is de locatie waar de testuitvoeringsgegevens worden opgeslagen voor de werkruimte.

   

4. Selecteer Werkruimte maken om de werkruimte in uw abonnement te maken.

   Tijdens het maken van de werkruimte worden een nieuwe resourcegroep en een Microsoft Playwright Testing Azure-resource gemaakt in uw Azure-abonnement.

Wanneer het maken van de werkruimte is voltooid, wordt u omgeleid naar de installatiehandleiding.

Microsoft Playwright Testing Package installeren

Als u de service wilt gebruiken, installeert u het Microsoft Playwright Testing-pakket.

npm init @azure/microsoft-playwright-testing@latest

Hiermee wordt een bestand gegenereerd playwright.service.config.ts dat fungeert voor:

• Direct en verifieer Playwright bij de Microsoft Playwright Testing-service.
• Hiermee voegt u een reporter toe om testresultaten en artefacten te publiceren.

Als u dit bestand al hebt, wordt u gevraagd het te overschrijven.

Als u de service wilt gebruiken, installeert u het Microsoft Playwright Testing-pakket.

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

Het eindpunt van de serviceregio configureren

In uw installatie moet u het regiospecifieke service-eindpunt opgeven. Het eindpunt is afhankelijk van de Azure-regio die u hebt geselecteerd bij het maken van de werkruimte.

Voer de volgende stappen uit om de URL van het service-eindpunt op te halen:

1. In Het eindpunt regio toevoegen in uw installatie kopieert u het regio-eindpunt voor uw werkruimte.

   De eindpunt-URL komt overeen met de Azure-regio die u hebt geselecteerd bij het maken van de werkruimte. Zorg ervoor dat deze URL beschikbaar is in PLAYWRIGHT_SERVICE_URL de omgevingsvariabele.

   

Uw omgeving instellen

Als u uw omgeving wilt instellen, moet u de PLAYWRIGHT_SERVICE_URL omgevingsvariabele configureren met de waarde die u in de vorige stappen hebt verkregen.

U wordt aangeraden de dotenv module te gebruiken om uw omgeving te beheren. Met dotenv, definieert u uw omgevingsvariabelen in het .env bestand.

1. Voeg de dotenv module toe aan uw project:

   npm i --save-dev dotenv
   

2. Maak een .env bestand naast het bestand in uw playwright.config.ts Playwright-project:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Zorg ervoor dat u de tijdelijke aanduiding voor tekst {MY-REGION-ENDPOINT} vervangt door de waarde die u eerder hebt gekopieerd.

Serviceconfiguratie instellen

Maak een bestand PlaywrightServiceSetup.cs in uw project met de volgende inhoud.

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

Notitie

Zorg ervoor dat uw project versie 1.47 of hoger gebruikt Microsoft.Playwright.NUnit .

Verificatie instellen

Als u uw Playwright-tests wilt uitvoeren in uw Microsoft Playwright Testing-werkruimte, moet u de Playwright-client verifiëren waar u de tests uitvoert met de service. Dit kan uw lokale dev-machine of CI-machine zijn.

De service biedt twee verificatiemethoden: Microsoft Entra ID en Toegangstokens.

Microsoft Entra ID maakt gebruik van uw Azure-referenties, waarvoor een aanmelding bij uw Azure-account is vereist voor beveiligde toegang. U kunt ook een toegangstoken genereren vanuit uw Playwright-werkruimte en deze gebruiken in uw installatie.

Verificatie instellen met behulp van Microsoft Entra-id

Microsoft Entra-id is de standaard- en aanbevolen verificatie voor de service. Vanaf uw lokale ontwikkelcomputer kunt u Azure CLI gebruiken om u aan te melden

az login

Notitie

Als u deel uitmaakt van meerdere Microsoft Entra-tenants, moet u zich aanmelden bij de tenant waartoe uw werkruimte behoort. U kunt de tenant-id ophalen uit de Azure-portal. Zie Uw Microsoft Entra-tenant zoeken. Zodra u de id hebt getympt, meldt u zich aan met behulp van de opdracht az login --tenant <TenantID>

Verificatie instellen met behulp van toegangstokens

U kunt een toegangstoken genereren vanuit uw Playwright Testing-werkruimte en deze gebruiken in uw installatie. We raden Microsoft Entra ID echter ten zeerste aan voor verificatie vanwege de verbeterde beveiliging. Toegangstokens, terwijl dit handig is, werken zoals wachtwoorden met een lange levensduur en zijn gevoeliger voor inbreuk.

1. Verificatie met toegangstokens is standaard uitgeschakeld. Als u wilt gebruiken, schakelt u verificatie op basis van toegangstokens in

2. Verificatie instellen met behulp van toegangstokens

Let op

We raden u ten zeerste aan Microsoft Entra ID te gebruiken voor verificatie bij de service. Als u toegangstokens gebruikt, raadpleegt u Toegangstokens beheren

Artefacten inschakelen in uw Playwright-installatie

Zorg ervoor dat u alle vereiste artefacten verzamelt in het playwright.config.ts bestand van uw project.

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

Hiermee kunt u artefacten zoals schermopname, video's en traceringen vastleggen door Playwright.

• Zie Schermopnamen vastleggen voor schermopnamen
• Zie video's opnemen voor uw tests voor video's
• Zie Een tracering opnemen voor traceringen

Zodra u deze artefacten hebt verzameld, voegt u deze toe aan de TestContext artefacten om ervoor te zorgen dat ze beschikbaar zijn in uw testrapporten. Zie ons voorbeeldproject voor NUnit voor meer informatie

Voer uw tests op schaal uit en los problemen eenvoudig op met Microsoft Playwright Testing

U hebt nu de configuratie voorbereid voor het uitvoeren van playwright-tests in de cloud met Microsoft Playwright Testing. U kunt de Playwright CLI gebruiken om uw tests uit te voeren of de Playwright Test Visual Studio Code-extensie gebruiken.

Eén test uitvoeren met de service

Met Microsoft Playwright Testing worden kosten in rekening gebracht op basis van het aantal totale testminuten en het aantal gepubliceerde testresultaten. Als u een eerste gebruiker bent of aan de slag gaat met een gratis proefversie, kunt u beginnen met het uitvoeren van één test op schaal in plaats van uw volledige testpakket om te voorkomen dat uw gratis proeflimieten worden uitgeput.

Notitie

De rapportagefunctie is standaard ingeschakeld voor bestaande werkruimten. Dit wordt in fasen geïmplementeerd en duurt enkele dagen. Als u fouten wilt voorkomen, controleert u of Rich diagnostics using reporting de instelling AAN is voor uw werkruimte voordat u doorgaat. Zie Rapportage inschakelen voor werkruimte.

Nadat u hebt gevalideerd dat de test is uitgevoerd, kunt u de belasting van de test geleidelijk verhogen door meer tests met de service uit te voeren.

Voer de volgende stappen uit om één Playwright-test uit te voeren met Microsoft Playwright Testing:

Playwright CLI

Als u de Playwright CLI wilt gebruiken om uw tests uit te voeren met Microsoft Playwright Testing, geeft u het serviceconfiguratiebestand door als een opdrachtregelparameter.

1. Een terminalvenster openen.

2. Voer de volgende opdracht in om uw Playwright-test uit te voeren op externe browsers in uw werkruimte:

   Vervang de tijdelijke aanduiding voor tekst {name-of-file.spec.ts} door de naam van het testspecificatiebestand.

   npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
   

   Nadat de test is voltooid, kunt u de teststatus in de terminal bekijken.

   Running 1 test using 1 worker
       1 passed (2.2s)
   
   To open last HTML report run:
   
   npx playwright show-report
   

Visual Studio Code

Als u één Playwright-test wilt uitvoeren in Visual Studio Code met Microsoft Playwright Testing, selecteert u het serviceconfiguratiebestand in de weergave Test Explorer . Selecteer en voer vervolgens de test uit in de lijst met tests.

1. Installeer de Playwright Test Visual Studio Code-extensie.

2. Open de weergave Test Explorer in de activiteitenbalk.

   De testverkenner detecteert automatisch uw Playwright-tests en de serviceconfiguratie in uw project.

   

3. Selecteer Standaardprofiel selecteren en selecteer vervolgens uw standaardprojecten in het serviceconfiguratiebestand.

   U ziet dat de serviceuitvoeringsprofielen afkomstig zijn van het playwright.service.config.ts bestand dat u eerder hebt toegevoegd.

   Door een standaardprofiel in te stellen, kunt u automatisch uw tests uitvoeren met de service of meerdere Playwright-projecten tegelijk uitvoeren.

   

4. Selecteer in de lijst met tests de knop Test uitvoeren naast een test om deze uit te voeren.

   De test wordt uitgevoerd op de projecten die u in het standaardprofiel hebt geselecteerd. Als u een of meer projecten uit de serviceconfiguratie hebt geselecteerd, wordt de test uitgevoerd op externe browsers in uw werkruimte.

   

   Tip

   U kunt nog steeds fouten opsporen in uw testcode wanneer u uw tests uitvoert op externe browsers met behulp van de knop Foutopsporingstest .

5. U kunt de testresultaten rechtstreeks in Visual Studio Code bekijken.

   

U kunt nu meerdere tests uitvoeren met de service of uw hele testpakket uitvoeren op externe browsers.

Let op

Afhankelijk van de grootte van uw testpakket, worden er mogelijk extra kosten in rekening gebracht voor de testminuten en testresultaten buiten uw toegewezen gratis testminuten en gratis testresultaten.

Een volledige testsuite uitvoeren met de service

Nu u hebt gevalideerd dat u één test kunt uitvoeren met Microsoft Playwright Testing, kunt u een volledig Playwright-testpakket op schaal uitvoeren.

Voer de volgende stappen uit om een volledig Playwright-testpakket uit te voeren met Microsoft Playwright Testing:

Playwright CLI

Wanneer u meerdere Playwright-tests of een volledige testsuite uitvoert met Microsoft Playwright Testing, kunt u desgewenst het aantal parallelle werkrollen opgeven als opdrachtregelparameter.

1. Een terminalvenster openen.

2. Voer de volgende opdracht in om uw Playwright-testpakket uit te voeren op externe browsers in uw werkruimte:

   npx playwright test --config=playwright.service.config.ts --workers=20
   

   Afhankelijk van de grootte van uw testpakket voert deze opdracht uw tests uit op maximaal 20 parallelle werkrollen.

   Nadat de test is voltooid, kunt u de teststatus in de terminal bekijken.

   Running 6 tests using 6 workers
       6 passed (18.2s)
   
   Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
   

Visual Studio Code

Uw Playwright-testpakket uitvoeren in Visual Studio Code met Microsoft Playwright Testing:

1. Open de weergave Test Explorer in de activiteitenbalk.

2. Selecteer de knop Tests uitvoeren om alle tests uit te voeren met Microsoft Playwright Testing.

   Wanneer u alle tests uitvoert, wordt het standaardprofiel gebruikt. In de vorige stap hebt u het standaardprofiel geconfigureerd voor het gebruik van projecten uit de serviceconfiguratie.

   

   Tip

   U kunt nog steeds fouten opsporen in uw testcode wanneer u uw tests uitvoert op externe browsers met behulp van de knop Foutopsporingstests .

3. U kunt ook een specifieke serviceconfiguratie selecteren in de lijst om alleen de tests voor een specifieke browserconfiguratie uit te voeren.

   

4. U kunt alle testresultaten bekijken op het tabblad Testresultaten .

Voer Playwright-tests uit op browsers die worden beheerd door de service en bekijk de resultaten in de geïntegreerde portal met behulp van de configuratie die u hierboven hebt gemaakt.

dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20

De instellingen voor de testuitvoering worden gedefinieerd in .runsettings het bestand. Meer informatie over het gebruik van servicepakketopties

Nadat de testuitvoering is voltooid, kunt u de teststatus in de terminal bekijken.

Starting test execution, please wait...

Initializing reporting for this test run. You can view the results at: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

A total of 100 test files matched the specified pattern.

Test Report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 59 s - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

Testuitvoeringen en resultaten weergeven in de Playwright-portal

U kunt nu problemen met de mislukte testcases oplossen in de Playwright-portal.

1. Nadat de testuitvoering is voltooid, wordt er een koppeling naar de Playwright-portal gegenereerd. Open deze koppeling om gedetailleerde testresultaten en bijbehorende artefacten weer te geven. In de portal worden essentiële informatie weergegeven, waaronder:

   • Details van CI-build
   • Algemene testuitvoeringsstatus
   • De doorvoer-id die is gekoppeld aan de testuitvoering

   

2. De Playwright-portal biedt alle benodigde informatie voor het oplossen van problemen. U kunt:

   • Schakelen tussen nieuwe pogingen.
   • Bekijk gedetailleerde foutenlogboeken, teststappen en bijgevoegde artefacten, zoals schermopnamen of video's.
   • Navigeer rechtstreeks naar traceerviewer voor een diepere analyse.

   

3. Met Trace Viewer kunt u uw testuitvoering visueel doorlopen. U kunt:

   • Gebruik de tijdlijn om de muisaanwijzer over afzonderlijke stappen te bewegen, waarbij de paginastatus voor en na elke actie wordt weergegeven.
   • Inspecteer gedetailleerde logboeken, DOM-momentopnamen, netwerkactiviteit, fouten en console-uitvoer voor elke stap.

   

1. Nadat de testuitvoering is voltooid, krijgt u een koppeling naar de Playwright-portal in uw terminal. Open deze koppeling om gedetailleerde testresultaten en bijbehorende artefacten weer te geven. In de portal worden essentiële informatie weergegeven, waaronder:

   • Details van CI-build
   • Algemene testuitvoeringsstatus
   • De doorvoer-id die is gekoppeld aan de testuitvoering

   

2. De Playwright-portal biedt alle benodigde informatie voor het oplossen van problemen. U kunt:

   • Bekijk gedetailleerde foutenlogboeken en bijgevoegde artefacten, zoals schermopnamen of video's.
   • Navigeer rechtstreeks naar traceerviewer voor een diepere analyse.

   

Notitie

Sommige metagegevens, zoals de eigenaar, beschrijving en categorie, worden momenteel niet weergegeven op het servicedashboard. Als er aanvullende informatie is die u wilt zien, dient u een GitHub-probleem in onze opslagplaats in.

4. Met Trace Viewer kunt u uw testuitvoering visueel doorlopen. U kunt:

   • Gebruik de tijdlijn om de muisaanwijzer over afzonderlijke stappen te bewegen, waarbij de paginastatus voor en na elke actie wordt weergegeven.
   • Inspecteer gedetailleerde logboeken, DOM-momentopnamen, netwerkactiviteit, fouten en console-uitvoer voor elke stap.

   

Tip

U kunt de microsoft Playwright Testing-servicefuncties onafhankelijk gebruiken. U kunt testresultaten publiceren naar de portal zonder de functie voor browsers in de cloud te gebruiken en u kunt ook alleen in de cloud gehoste browsers gebruiken om uw testpakket te versnellen zonder testresultaten te publiceren.

Notitie

De testresultaten en artefacten die u publiceert, worden gedurende 90 dagen bewaard in de service. Daarna worden ze automatisch verwijderd.

Parallelle werkrolconfiguratie optimaliseren

Zodra uw tests soepel worden uitgevoerd met de service, experimenteert u met verschillende parallelle werkrollen om de optimale configuratie te bepalen waarmee de voltooiingstijd van de test wordt geminimaliseerd.

Met Microsoft Playwright Testing kunt u maximaal 50 parallelle werkrollen uitvoeren. Verschillende factoren zijn van invloed op de beste configuratie voor uw project, zoals de CPU, het geheugen en de netwerkbronnen van uw clientcomputer, de belastingafhandelingscapaciteit van de doeltoepassing en het type acties dat in uw tests wordt uitgevoerd.

U kunt het aantal parallelle werkrollen opgeven op de opdrachtregel van playwright CLI of de workers eigenschap configureren in het playwright-serviceconfiguratiebestand.

U kunt het aantal parallelle werkrollen opgeven op de opdrachtregel van playwright CLI of de NumberOfTestWorkers eigenschap in het .runsettings bestand configureren.

Meer informatie over het bepalen van de optimale configuratie voor het optimaliseren van de voltooiing van het testpakket.

Volgende stap

U hebt een Microsoft Playwright Testing-werkruimte gemaakt in de Playwright-portal en uw Playwright-tests uitvoeren op cloudbrowsers.

Ga naar de volgende quickstart om doorlopend end-to-end testen in te stellen door playwright-tests uit te voeren in uw CI/CD-werkstroom.

Doorlopend end-to-end testen instellen in CI/CD