Quickstart: Doorlopend end-to-end testen instellen met Microsoft Playwright Testing Preview

In deze quickstart stelt u doorlopend end-to-end testen in met Microsoft Playwright Testing Preview om te controleren of uw web-app correct wordt uitgevoerd in verschillende browsers en besturingssystemen met elke codedoorvoering. Meer informatie over het toevoegen van playwright-tests aan een CI-werkstroom (continue integratie), zoals GitHub Actions, Azure Pipelines of andere CI-platforms.

Nadat u deze quickstart hebt voltooid, hebt u een CI-werkstroom waarmee uw Playwright-testpakket op schaal wordt uitgevoerd met Microsoft Playwright Testing.

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.

• Een Microsoft Playwright Testing-werkruimte. Voltooi de quickstart: Voer Playwright-tests op schaal uit om een werkruimte te maken.

GitHub Actions

• Een GitHub-account. Als u geen GitHub-account hebt, kunt u er gratis een maken.
• Een GitHub-opslagplaats die uw Playwright-testspecificaties en GitHub Actions-werkstroom bevat. Zie Een nieuwe opslagplaats maken om een opslagplaats te maken.
• Een GitHub Actions-werkstroom. Als u hulp nodig hebt bij het aan de slag gaan met GitHub Actions, raadpleegt u uw eerste werkstroom maken

Azure Pipelines

• Een Azure DevOps-organisatie en -project. Als u geen Azure DevOps-organisatie hebt, kunt u er gratis een maken.
• Een pijplijndefinitie. Als u hulp nodig hebt bij het aan de slag gaan met Azure Pipelines, raadpleegt u uw eerste pijplijn maken.

Een servicetoegangstoken configureren

Microsoft Playwright Testing gebruikt toegangstokens om gebruikers te autoriseren playwright-tests uit te voeren met de service. U kunt een servicetoegangstoken genereren in de Playwright-portal en vervolgens het toegangstoken opgeven in het serviceconfiguratiebestand.

Voer de volgende stappen uit om een toegangstoken te genereren en op te slaan als ci-werkstroomgeheim:

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

2. Selecteer het pictogram werkruimte-instellingen en ga vervolgens naar de pagina Toegangstokens .

   

3. Selecteer Nieuw token genereren om een nieuw toegangstoken te maken voor uw CI-werkstroom.

4. Voer de details van het toegangstoken in en selecteer vervolgens Het token genereren.

   

   

5. Sla het toegangstoken op in een CI-werkstroomgeheim om te voorkomen dat het token wordt opgegeven in duidelijke tekst in de werkstroomdefinitie:

   GitHub Actions

   1. Ga naar uw GitHub-opslagplaats en selecteer Instellingengeheimen>>en variabelenacties.

   2. Selecteer Nieuw opslagplaatsgeheim.

   3. Voer de geheime gegevens in en selecteer Geheim toevoegen om het CI/CD-geheim te maken.

      Parameter	Weergegeven als
      Naam	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Value	Plak het toegangstoken voor de werkruimte dat u eerder hebt gekopieerd.

   4. Selecteer OK om het werkstroomgeheim te maken.

   Azure Pipelines

   1. Ga naar uw Azure DevOps-project.

   2. Ga naar de pagina Pijplijnen , selecteer de juiste pijplijn en selecteer Vervolgens Bewerken.

   3. Zoek de variabelen voor deze pijplijn.

   4. Voeg een nieuwe variabele toe.

   5. Voer de details van de variabele in en selecteer Geheim toevoegen om het CI/CD-geheim te maken.

      Parameter	Weergegeven als
      Naam	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Value	Plak het toegangstoken voor de werkruimte dat u eerder hebt gekopieerd.
      Deze waarde geheim houden	Deze waarde controleren

   6. Selecteer OK en sla het op om het werkstroomgeheim te maken.

De EINDPUNT-URL van de serviceregio ophalen

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 en op te slaan als een CI-werkstroomgeheim:

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

2. Selecteer op de startpagina van de werkruimte de optie Installatiehandleiding weergeven.

   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. In Het eindpunt regio toevoegen in uw installatie kopieert u de URL van het service-eindpunt.

   De eindpunt-URL komt overeen met de Azure-regio die u hebt geselecteerd bij het maken van de werkruimte.

4. Sla de URL van het service-eindpunt op in een CI-werkstroomgeheim:

   Geheime naam	Weergegeven als
   PLAYWRIGHT_SERVICE_URL	Plak de eindpunt-URL die u eerder hebt gekopieerd.

Serviceconfiguratiebestand toevoegen

Als u uw Playwright-tests nog niet hebt geconfigureerd voor het uitvoeren ervan in browsers die in de cloud worden gehost, voegt u een serviceconfiguratiebestand toe aan uw opslagplaats. In de volgende stap geeft u dit serviceconfiguratiebestand op in de Playwright CLI.

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 en voer het door in de opslagplaats voor broncode.

De werkstroomdefinitie bijwerken

Werk de CI-werkstroomdefinitie bij om playwright-tests uit te voeren met de Playwright CLI. Geef het serviceconfiguratiebestand door als invoerparameter voor de Playwright CLI. U configureert uw omgeving door omgevingsvariabelen op te geven.

1. De CI-werkstroomdefinitie openen

2. Voeg de volgende stappen toe om playwright-tests uit te voeren in Microsoft Playwright Testing.

   In de volgende stappen worden de wijzigingen in de werkstroom beschreven voor GitHub Actions of Azure Pipelines. Op dezelfde manier kunt u uw Playwright-tests uitvoeren met behulp van de Playwright CLI in andere CI-platforms.

   GitHub Actions

   - name: Install dependencies
     working-directory: path/to/playwright/folder # update accordingly
     run: npm ci
   
   - name: Run Playwright tests
     working-directory: path/to/playwright/folder # update accordingly
     env:
       # Access token and regional endpoint for Microsoft Playwright Testing
       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 }}
     run: npx playwright test -c playwright.service.config.ts --workers=20
   
   - name: Upload Playwright report
     uses: actions/upload-artifact@v3
     if: always()
     with:
       name: playwright-report
       path: path/to/playwright/folder/playwright-report/ # update accordingly
       retention-days: 10
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

3. Sla uw wijzigingen op en voer deze door.

   Wanneer de CI-werkstroom wordt geactiveerd, worden uw Playwright-tests uitgevoerd in uw Microsoft Playwright Testing-werkruimte op in de cloud gehoste browsers, in 20 parallelle werkrollen.

Let op

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.

U kunt één test met de service uitvoeren met behulp van de volgende opdrachtregel:

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

Testresultatenrapportage inschakelen

Microsoft Playwright Testing ondersteunt nu het weergeven van testresultaten in de Playwright-portal. Tijdens de preview-toegang is alleen beschikbaar per uitnodiging.

Belangrijk

De rapportagefunctie van de Microsoft Playwright Testing-service is gratis tijdens de preview-versie voor alleen-uitnodigen. Bestaande functionaliteit van in de cloud gehoste browsers 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. Ga op de startpagina van de werkruimte naar Instellingen.

   

2. Selecteer In Instellingen de optie Algemeen en zorg ervoor dat rapportage is ingeschakeld.

   

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.

4. Sla het GitHub-token op in een CI-werkstroomgeheim om te voorkomen dat het token wordt opgegeven in duidelijke tekst in de werkstroomdefinitie:

   GitHub Actions

   1. Ga naar uw GitHub-opslagplaats en selecteer Instellingengeheimen>>en variabelenacties.

   2. Selecteer Nieuw opslagplaatsgeheim.

   3. Voer de geheime gegevens in en selecteer Geheim toevoegen om het CI/CD-geheim te maken.

      Parameter	Weergegeven als
      Naam	PAT_TOKEN_PACKAGE
      Value	Plak het persoonlijke GitHub-toegangstoken dat u eerder hebt gekopieerd.

   4. Selecteer OK om het werkstroomgeheim te maken.

   Azure Pipelines

   1. Ga naar uw Azure DevOps-project.

   2. Ga naar de pagina Pijplijnen , selecteer de juiste pijplijn en selecteer Vervolgens Bewerken.

   3. Zoek de variabelen voor deze pijplijn.

   4. Voeg een nieuwe variabele toe.

   5. Voer de details van de variabele in en selecteer Geheim toevoegen om het CI/CD-geheim te maken.

      Parameter	Weergegeven als
      Naam	PAT_TOKEN_PACKAGE
      Value	Plak het persoonlijke GitHub-toegangstoken dat u eerder hebt gekopieerd.
      Deze waarde geheim houden	Deze waarde controleren

   6. Selecteer OK en sla het op om het werkstroomgeheim te maken.

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

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

6. Werk het playwright-configuratiebestand bij.

   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',
       }
   

7. Werk de CI-werkstroomdefinitie bij om het rapportagepakket te installeren voordat u de tests uitvoert om het rapport van uw Playwright-tests te publiceren in Microsoft Playwright Testing.

   GitHub Actions

   - name: Install reporting package
     working-directory: path/to/playwright/folder # update accordingly
     run: |
       npm config set @microsoft:registry=https://npm.pkg.github.com
       npm set //npm.pkg.github.com/:_authToken ${{secrets.PAT_TOKEN_PACKAGE}} 
       npm install
   
   - name: Run Playwright tests
     working-directory: path/to/playwright/folder # update accordingly
     env:
       # Access token and regional endpoint for Microsoft Playwright Testing
       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 }}
     run: npx playwright test
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install reporting package"
     inputs:
       targetType: 'inline'
       script: |
           'npm config set @microsoft:registry=https://npm.pkg.github.com'
           'npm set //npm.pkg.github.com/:_authToken ${PAT_TOKEN_PACKAGE}'
           'npm install'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: $(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       workingDirectory: path/to/playwright/folder # update accordingly
   

   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.

Gerelateerde inhoud

U hebt een continue end-to-end-testwerkstroom ingesteld om uw Playwright-tests op schaal uit te voeren in browsers die in de cloud worden gehost.

• Gebruikers toegang verlenen tot de werkruimte

• Uw werkruimten beheren