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 en probleemoplossingstests met behulp van het servicedashboard. 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 en waarmee u eenvoudig problemen met tests kunt oplossen 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
• Verificatie van GitHub Actions instellen in Azure. Zie GitHub Actions gebruiken om verbinding te maken met Azure

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.
• Azure Resource Manager-serviceverbinding om veilig te verifiëren bij de service vanuit Azure Pipelines, zie de Azure Resource Manager-serviceverbinding

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:

   import { defineConfig } from '@playwright/test';
   import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
   import config from './playwright.config';
   
   /* Learn more about service configuration at https://aka.ms/mpt/config */
   export default defineConfig(
     config,
     getServiceConfig(config, {
       exposeNetwork: '<loopback>',
           timeout: 30000,
       os: ServiceOS.LINUX,
           useCloudHostedBrowsers: true
     }),
     {
       /* 
       Playwright Testing service reporter is added by default.
       This will override any reporter options specified in the base playwright config.
       If you are using more reporters, please update your configuration accordingly.
       */
       reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
     }
   );
   

3. Sla het bestand op en voer het door in de opslagplaats voor broncode.

Package.json-bestand bijwerken

Werk het package.json bestand in uw opslagplaats bij om details toe te voegen over het Microsoft Playwright Testing-servicepakket in devDependencies de sectie.

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.3"
}

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

   
     # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
     # You can choose how set up Authentication to Azure from GitHub Actions, this is one example. 
   - name: Login to Azure with AzPowershell (enableAzPSSession true) 
     uses: azure/login@v2 
     with: 
       client-id: ${{ secrets.AZURE_CLIENT_ID }} 
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
       enable-AzPSSession: true 
   
   - 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:
       # Regional endpoint for Microsoft Playwright Testing
       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: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         npx playwright test -c playwright.service.config.ts --workers=20
     addSpnToEnvironment: true
     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 in browsers die worden gehost in de cloud, in 20 parallelle werkrollen.

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.

Let op

Met Microsoft Playwright Testing worden kosten in rekening gebracht op basis van het totale aantal testminuten en het gepubliceerde testresultaat. 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 en testresultaten 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

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.

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