Delen via

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

  • Artikel

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

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']],
  }
);

    Standaard kunt u met de serviceconfiguratie het volgende doen:

    • Versnel build-pijplijnen door tests parallel uit te voeren met behulp van in de cloud gehoste browsers.
    • Vereenvoudig het oplossen van problemen met eenvoudige toegang tot testresultaten en artefacten die naar de service zijn gepubliceerd.

    U kunt er echter voor kiezen om een van deze functies of beide te gebruiken. Zie Hoe u servicefuncties gebruikt en het serviceconfiguratiebestand bijwerkt op basis van uw behoeften.

  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"
}

Artefacten inschakelen in playwright-configuratie

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

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.

    
  # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
  # Choose how to 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

  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

Testuitvoeringen en resultaten weergeven in de Playwright-portal

U kunt nu problemen met de CI-pijplijn 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

    Schermopname van een lijst met tests in 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.

    Schermopname van het voorbeeld van een test.

  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.

    Schermopname van de traceringsviewer.

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. Zie Servicefuncties gebruiken voor meer informatie.

Notitie

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

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.