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 Anteprima per verificare che l'app web venga eseguita correttamente in browser e sistemi operativi diversi con ogni commit del codice. 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 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

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.

Configurare un token di accesso al servizio

Microsoft Playwright Testing usa i token di accesso per autorizzare gli utenti a eseguire test Playwright utilizzando il servizio. È possibile generare un token di accesso al servizio nel portale Playwright e quindi specificare il token di accesso nel file di configurazione del servizio.

Per generare un token di accesso e archiviarlo come segreto del flusso di lavoro CI, seguire questa procedura:

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

2. Selezionare l'icona delle impostazioni dell'area di lavoro, quindi passare alla pagina Token di accesso.

   

3. Selezionare Genera nuovo token per creare un nuovo token di accesso per il flusso di lavoro CI.

4. Immettere i dettagli del token di accesso, quindi selezionare Genera token.

   

   

5. Archiviare il token di accesso in un segreto del flusso di lavoro CI per evitare di specificare il token in testo non crittografato nella definizione del flusso di lavoro:

   GitHub Actions

   1. Passare al proprio repository GitHub e selezionare Impostazioni>Segreti e variabili>Azioni.

   2. Selezionare Nuovo segreto repository.

   3. Immettere i dettagli del segreto, quindi selezionare Aggiungi segreto per creare il segreto CI/CD.

      Parametro	valore
      Nome	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      valore	Incollare il token di accesso all'area di lavoro copiato in precedenza.

   4. Selezionare OK per creare il segreto del flusso di lavoro.

   Azure Pipelines

   1. Passare al progetto Azure DevOps.

   2. Passare alla pagina Pipeline, selezionare la pipeline appropriata e quindi selezionare Modifica.

   3. Individuare le Variabili per la pipeline.

   4. Aggiungere una nuova variabile.

   5. Immettere i dettagli della variabile, quindi selezionare Aggiungi segreto per creare il segreto CI/CD.

      Parametro	valore
      Nome	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      valore	Incollare il token di accesso all'area di lavoro copiato in precedenza.
      Mantieni segreto questo valore	Controllare questo valore

   6. Selezionare OK, quindi Salva per creare il segreto del flusso di lavoro.

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

   - 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. Salvare ed eseguire il commit delle modifiche.

   Quando viene attivato il flusso di lavoro CI, i test Playwright verranno 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. 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 di 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

Abilitare la creazione di report sui risultati dei test

Microsoft Playwright Testing supporta ora la visualizzazione dei risultati dei test nel portale Playwright. Durante l'accesso in anteprima è disponibile solo su invito.

Importante

La funzionalità di creazione di report del servizio Microsoft Playwright Testing è gratuita durante l'anteprima su solo invito. Tuttavia, le funzionalità esistenti dei browser ospitati nel cloud continuano a essere fatturate in base al piano tariffario di Azure.

Dopo aver ottenuto l'accesso allo strumento di creazione report, seguire questa procedura per configurare i test.

1. Dalla home page dell'area di lavoro passare a Impostazioni.

   

2. In Impostazioni, selezionare Generale e assicurarsi che la creazione di report sia Abilitata.

   

3. Creare un token di accesso personale GitHub seguendo questa procedura.

   È necessario fornire read:packages autorizzazioni per il token. Questo token viene definito come PAT_TOKEN_PACKAGE per il resto di questo articolo.

4. Archiviare il token GitHub in un segreto del flusso di lavoro CI per evitare di specificare il token in testo non crittografato nella definizione del flusso di lavoro:

   GitHub Actions

   1. Passare al proprio repository GitHub e selezionare Impostazioni>Segreti e variabili>Azioni.

   2. Selezionare Nuovo segreto repository.

   3. Immettere i dettagli del segreto, quindi selezionare Aggiungi segreto per creare il segreto CI/CD.

      Parametro	valore
      Nome	PAT_TOKEN_PACKAGE
      valore	Incollare il token di accesso all'area di lavoro copiato in precedenza.

   4. Selezionare OK per creare il segreto del flusso di lavoro.

   Azure Pipelines

   1. Passare al progetto Azure DevOps.

   2. Passare alla pagina Pipeline, selezionare la pipeline appropriata e quindi selezionare Modifica.

   3. Individuare le Variabili per la pipeline.

   4. Aggiungere una nuova variabile.

   5. Immettere i dettagli della variabile, quindi selezionare Aggiungi segreto per creare il segreto CI/CD.

      Parametro	valore
      Nome	PAT_TOKEN_PACKAGE
      valore	Incollare il token di accesso all'area di lavoro copiato in precedenza.
      Mantieni segreto questo valore	Controllare questo valore

   6. Selezionare OK, quindi Salva per creare il segreto del flusso di lavoro.

5. Aggiornare package.json file con il pacchetto.

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

6. Aggiornare il file di configurazione Playwright.

   Aggiungere il reporter Playwright Testing a Playwright.config.ts nello stesso modo in cui si usano gli altri reporter.

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

   Assicurarsi che gli artefatti siano abilitati nella configurazione per una migliore risoluzione dei problemi.

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

7. Aggiornare la definizione del flusso di lavoro CI per installare il pacchetto di report prima di eseguire i test per pubblicare il report dei test Playwright 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 ${{secrets 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
   

   Suggerimento

   È possibile usare il servizio Microsoft Playwright Testing per pubblicare i risultati dei test nel portale indipendentemente dalla funzionalità dei browser ospitati nel cloud.

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