Avvio rapido: configurare test end-to-end continui con Microsoft Playwright Testing Anteprima

In questa guida introduttiva si configurano test end-to-end continui con Microsoft Playwright Testing Preview per verificare che l'app Web venga eseguita correttamente in browser e sistemi operativi diversi con ogni commit del codice e risolvere i problemi nei test con facilità usando il dashboard del servizio. Informazioni su come aggiungere i test Playwright a un flusso di lavoro di integrazione continua (CI), ad esempio GitHub Actions, Azure Pipelines o altre piattaforme CI.

Al termine di questa guida introduttiva, è disponibile un flusso di lavoro CI che esegue il gruppo di test Playwright su larga scala e contribuisce alla risoluzione dei problemi dei test con facilità con Microsoft Playwright Testing.

Importante

Microsoft Playwright Testing è attualmente in anteprima. Vedere le condizioni per l'utilizzo supplementari per le anteprime di Microsoft Azure per termini legali aggiuntivi che si applicano a funzionalità di Azure in versione beta, in anteprima o in altro modo non ancora disponibili a livello generale.

Prerequisiti

• Un account Azure con una sottoscrizione attiva. Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.

• Area di lavoro Microsoft Playwright Testing. Completare la guida introduttiva: eseguire test Playwright su larga scala per creare un'area di lavoro.

GitHub Actions

• Un account GitHub. Se non si dispone di un account GitHub, è possibile crearne uno gratuitamente.
• Repository GitHub che contiene le specifiche di test Playwright e il flusso di lavoro di GitHub Actions. Per creare un repository, vedere Creazione di un nuovo repository.
• Flusso di lavoro di GitHub Actions. Per informazioni su come iniziare a usare GitHub Actions, vedere Creare il primo flusso di lavoro
• Configurare l'autenticazione da GitHub Actions ad Azure. Vedere Usare GitHub Actions per connettersi ad Azure

Azure Pipelines

• Organizzazione e progetto di Azure DevOps. Se non si dispone di un'organizzazione Azure DevOps, è possibile crearne una gratuitamente.
• Definizione della pipeline. Per informazioni su come iniziare a usare Azure Pipelines, vedere Creare la prima pipeline.
• Connessione al servizio Azure Resource Manager per l'autenticazione sicura al servizio da Azure Pipelines, vedere Connessione al servizio Azure Resource Manager

Ottenere l'URL dell'endpoint dell'area del servizio

Nella configurazione del servizio è necessario fornire l'endpoint di servizio specifico dell'area. L'endpoint dipende dall'area di Azure selezionata durante la creazione dell'area di lavoro.

Per ottenere l'URL dell'endpoint di servizio e archiviarlo come segreto del flusso di lavoro CI, seguire questa procedura:

1. Accedere al portale Playwright con l'account Azure.

2. Nella home page dell'area di lavoro, selezionare Visualizza guida alla configurazione.

   Suggerimento

   Se sono presenti più aree di lavoro, è possibile passare a un'altra area di lavoro selezionando il nome dell'area di lavoro nella parte superiore della pagina, quindi selezionare Gestisci tutte le aree di lavoro.

3. In Aggiungere l'endpoint dell'area nel programma di installazione, copiare l'URL dell'endpoint di servizio.

   L'URL dell'endpoint corrisponde all'area di Azure selezionata durante la creazione dell'area di lavoro.

4. Archiviare l'URL dell'endpoint di servizio in un segreto del flusso di lavoro CI:

   Nome segreto	Valore
   PLAYWRIGHT_SERVICE_URL	Incollare l'URL dell'endpoint copiato in precedenza.

Aggiungere file di configurazione del servizio

Se non si sono ancora configurati i test Playwright per eseguirli su browser ospitati nel cloud, aggiungere un file di configurazione del servizio al repository. Nel passaggio successivo si specifica quindi questo file di configurazione del servizio nell'interfaccia della riga di comando (CLI) Playwright.

1. Creare un nuovo file playwright.service.config.ts insieme al file playwright.config.ts.

   Facoltativamente, usare il file playwright.service.config.ts nel repository di esempio.

2. Aggiungere il contenuto seguente:

   /*
   * 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. Salvare ed eseguire il commit del file nel repository del codice sorgente.

Aggiornare il file package.json

Aggiornare il file package.json nel repository per aggiungere dettagli sul pacchetto del servizio Microsoft Playwright Testing nella sezione devDependencies.

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

Aggiornare la definizione del flusso di lavoro

Aggiornare la definizione del flusso di lavoro CI per eseguire i test Playwright con l'interfaccia della riga di comando di Playwright. Passare il file di configurazione del servizio come parametro di input per l'interfaccia della riga di comando di Playwright. Per configurare l'ambiente, specificare le variabili di ambiente.

1. Aprire la definizione del flusso di lavoro CI

2. Aggiungere i passaggi seguenti per eseguire i test Playwright in Microsoft Playwright Testing.

   I passaggi seguenti descrivono le modifiche del flusso di lavoro per GitHub Actions o Azure Pipelines. Analogamente, è possibile eseguire i test Playwright usando l'interfaccia della riga di comando di Playwright in altre piattaforme CI.

   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: OIDC Login to Azure Public Cloud 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. Salvare ed eseguire il commit delle modifiche.

   Quando viene attivato il flusso di lavoro CI, i test Playwright vengono eseguiti nell'area di lavoro Microsoft Playwright Testing nei browser ospitati nel cloud in 20 ruoli di lavoro paralleli.

Attenzione

Con Microsoft Playwright Testing, vengono addebitati i costi in base al numero di minuti di test totali e ai risultati dei test pubblicati. Se si utilizza il servizio per la prima volta o si inizia a usare una versione di valutazione gratuita, è possibile iniziare con l'esecuzione di un singolo test su larga scala anziché con il gruppo di test completo per evitare di esaurire i minuti e i risultati dei test gratuiti.

Dopo aver verificato che il test venga eseguito correttamente, è possibile aumentare gradualmente il carico di test eseguendo più test utilizzando il servizio.

È possibile eseguire un singolo test con il servizio usando la riga di comando seguente:

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

Suggerimento

È possibile usare le funzionalità del servizio Microsoft Playwright Testing in modo indipendente. È possibile pubblicare i risultati dei test nel portale senza usare la funzionalità dei browser ospitati nel cloud ed è anche possibile usare solo browser ospitati nel cloud per accelerare il gruppo di test senza pubblicare i risultati dei test.

Contenuto correlato

È stato configurato correttamente un flusso di lavoro di test end-to-end continuo per eseguire i test Playwright su larga scala nei browser ospitati nel cloud.

• Concedere agli utenti l'accesso all'area di lavoro

• Gestire le aree di lavoro