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

In deze quickstart leert u hoe u playwright-tests uitvoert met uiterst parallelle cloudbrowsers met behulp van Microsoft Playwright Testing Preview. Gebruik de cloudinfrastructuur om uw toepassing te valideren in meerdere browsers, apparaten en besturingssystemen.

Nadat u deze quickstart hebt voltooid, hebt u een Microsoft Playwright Testing-werkruimte om uw Playwright-tests op schaal uit te voeren.

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.

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.

Een toegangstoken maken voor serviceverificatie

Microsoft Playwright Testing gebruikt toegangstokens om gebruikers te autoriseren playwright-tests uit te voeren met de service. U genereert eerst een servicetoegangstoken in de Playwright-portal en slaat vervolgens de waarde op in een omgevingsvariabele.

Voer de volgende stappen uit om het toegangstoken te genereren:

1. Selecteer in de installatiehandleiding van de werkruimte in Create an access token de optie Generate token.

   

2. Kopieer het toegangstoken voor de werkruimte.

   U hebt de waarde van het toegangstoken nodig voor het configureren van uw omgeving in een latere stap.

   

Het eindpunt van de serviceregio configureren

In de serviceconfiguratie 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.

   

Uw omgeving instellen

Als u uw omgeving wilt instellen, moet u de PLAYWRIGHT_SERVICE_ACCESS_TOKEN en PLAYWRIGHT_SERVICE_URL omgevingsvariabelen configureren met de waarden 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_ACCESS_TOKEN={MY-ACCESS-TOKEN}
   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Vervang de tijdelijke aanduidingen voor tekst {MY-ACCESS-TOKEN} door {MY-REGION-ENDPOINT} de waarden die u eerder hebt gekopieerd.

Let op

Zorg ervoor dat u het .env bestand niet toevoegt aan uw broncodeopslagplaats om te voorkomen dat de waarde van het toegangstoken wordt gelekt.

Een serviceconfiguratiebestand toevoegen

Als u uw Playwright-tests wilt uitvoeren in uw Microsoft Playwright Testing-werkruimte, moet u een serviceconfiguratiebestand toevoegen naast uw Playwright-configuratiebestand. Het serviceconfiguratiebestand verwijst naar de omgevingsvariabelen om het werkruimte-eindpunt en uw toegangstoken op te halen.

De serviceconfiguratie toevoegen aan uw project:

1. Maak een nieuw bestand playwright.service.config.ts naast het playwright.config.ts bestand.

   Gebruik desgewenst het playwright.service.config.ts bestand in de voorbeeldopslagplaats.

2. Voeg de volgende inhoud toe:

   /*
   * This file enables Playwright client to connect to remote browsers.
   * It should be placed in the same directory as playwright.config.ts.
   */
   
   import { defineConfig } from '@playwright/test';
   import config from './playwright.config';
   import dotenv from 'dotenv';
   
   // Define environment on the dev box in .env file:
   //  .env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
   //    PLAYWRIGHT_SERVICE_URL=XXX
   
   // Define environment in your GitHub workflow spec.
   //  env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
   //    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
   //    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
   
   dotenv.config();
   
   // Name the test run if it's not named yet.
   process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();
   
   // Can be 'linux' or 'windows'.
   const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';
   
   export default defineConfig(config, {
     // Define more generous timeout for the service operation if necessary.
     // timeout: 60000,
     // expect: {
     //   timeout: 10000,
     // },
     workers: 20,
   
     // Enable screenshot testing and configure directory with expectations.
     // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
     ignoreSnapshots: false,
     snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
     
     use: {
       // Specify the service endpoint.
       connectOptions: {
         wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
           // Can be 'linux' or 'windows'.
           os,
           runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
         })}`,
         timeout: 30000,
         headers: {
           'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
         },
         // Allow service to access the localhost.
         exposeNetwork: '<loopback>'
       }
     },
     // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
     projects: config.projects? config.projects : [{}]
   });
   

3. Sla het bestand op.

Uw tests op schaal uitvoeren 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 op schaal uitvoeren

Met Microsoft Playwright Testing worden kosten in rekening gebracht op basis van het totale aantal testminuten. 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 u uw gratis testminuten uitgeput raakt.

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 die buiten uw gratis testminuten zijn toegewezen.

Een volledige testsuite op schaal uitvoeren

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)
   
   To open last HTML report run:
   
       npx playwright show-report
   

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 .

Testuitvoeringen weergeven in de Playwright-portal

Ga naar de Playwright-portal om de metagegevens en het activiteitenlogboek van de testuitvoering voor uw werkruimte weer te geven.

Het activiteitenlogboek bevat de volgende details voor elke testuitvoering: de totale voltooiingstijd van de test, het aantal parallelle werkrollen en het aantal testminuten.

Testresultaten weergeven in de Playwright-portal

Microsoft Playwright Testing ondersteunt nu het weergeven van testresultaten in de Playwright-portal. Deze functie is alleen beschikbaar als uitnodigingsfunctie.

Belangrijk

De rapportagefunctie van de Microsoft Playwright Testing-service is gratis tijdens de preview-versie voor alleen-uitnodigen. Bestaande functionaliteit van browsers die in de cloud worden gehost, blijft echter factureren volgens het Azure-prijsplan.

Zodra u toegang hebt tot het rapportagehulpprogramma, gebruikt u de volgende stappen om uw tests in te stellen.

1. Navigeer vanaf de startpagina van de werkruimte naar Instellingen.

   

2. Selecteer in Instellingen Algemeen en zorg ervoor dat rapportage is ingeschakeld.

   

3. Zorg ervoor dat de omgeving correct is ingesteld zoals vermeld in de sectie Uw omgeving instellen.

4. Rapportagepakket installeren

   Omdat de functie momenteel niet openbaar is, moet u een paar extra stappen uitvoeren om het pakket te installeren. Deze stappen zijn niet nodig zodra de functie openbaar wordt.

   1. Maak een bestand met de naam .npmrc op dezelfde locatie als uw Playwright-configuratiebestand.

   2. Voeg de volgende inhoud toe aan het bestand en sla deze op.

      @microsoft:registry=https://npm.pkg.github.com
      

   3. Maak een Persoonlijk GitHub-toegangstoken door deze stappen uit te voeren.

   U moet machtigingen voor het token opgeven read:packages . Dit token wordt genoemd PAT_TOKEN_PACKAGE voor de rest van dit artikel.

   1. Voer de volgende opdracht uit in uw terminal op de locatie van het Playwright-configuratiebestand. Vervang PAT_TOKEN_PACKAGE door het token dat in de vorige stap is gegenereerd.

          npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
      

   2. Werk package.json bestand bij met het pakket.

       "dependencies": {
                  "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
          }
      

   3. Voer npm install uit om het pakket te installeren.

5. Playwright.config-bestand bijwerken

   Voeg Playwright Testing reporter toe aan Playwright.config.ts dezelfde manier als u andere reporters gebruikt.

   import { defineConfig } from '@playwright/test';
   
   export default defineConfig({
       reporter: [
       ['list'],
       ['json', {  outputFile: 'test-results.json' }],
       ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
       ],
   });
   

   Zorg ervoor dat de artefacten zijn ingeschakeld in de configuratie voor betere probleemoplossing.

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

6. Playwright-tests uitvoeren

   U kunt de opdracht uitvoeren npx playwright test en de resultaten en artefacten bekijken in de Playwright Testing-portal.

   

Tip

U kunt de Microsoft Playwright Testing-service gebruiken om testresultaten te publiceren naar de portal, onafhankelijk van de functie voor in de cloud gehoste browsers.

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.

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