Avvio rapido: Eseguire test end-to-end su larga scala con Microsoft Playwright Testing Preview

In questo avvio rapido si apprenderà come eseguire i test Playwright con browser cloud altamente paralleli usando Microsoft Playwright Testing Preview. Usare l'infrastruttura cloud per convalidare l'applicazione in più browser, dispositivi e sistemi operativi.

Dopo aver completato questo avvio rapido, è disponibile un'area di lavoro Microsoft Playwright Testing per eseguire i test Playwright su larga scala.

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.
• L'account Azure richiede il ruolo Proprietario, Collaboratore o uno dei ruoli amministratore classici.
• Un progetto Playwright. Se non si dispone di un progetto, crearne uno usando la documentazione introduttiva di Playwright o usare il progetto campione di Microsoft Playwright Testing.

Creare un'area di lavoro

Per iniziare a eseguire i test Playwright su larga scala nei browser cloud, creare prima di tutto un'area di lavoro Microsoft Playwright Testing nel portale Playwright.

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

2. Se si dispone già di un'area di lavoro, selezionare un'area di lavoro esistente e passare al passaggio successivo.

   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 e quindi selezionare Gestisci tutte le aree di lavoro.

3. Se non si dispone ancora di un'area di lavoro, selezionare + Nuova area di lavoro e quindi specificare le informazioni seguenti:

   Campo	Descrizione
   Nome area di lavoro	Immettere un nome univoco per identificare l'area di lavoro. Il nome può essere costituito solo da caratteri alfanumerici e deve essere di lunghezza compresa tra 3 e 64 caratteri.
   Sottoscrizione di Azure	Selezionare la sottoscrizione di Azure che si vuole usare per questa area di lavoro Microsoft Playwright Testing.
   Area	Selezionare una posizione geografica per ospitare l'area di lavoro. Si tratta della posizione in cui vengono archiviati i dati di esecuzione dei test per l'area di lavoro.

   

4. Selezionare Crea area di lavoro per creare l'area di lavoro nella sottoscrizione.

   Durante la creazione dell'area di lavoro, nella sottoscrizione di Azure vengono creati un nuovo gruppo di risorse e una risorsa di Microsoft Playwright Testing di Azure.

Al termine della creazione dell'area di lavoro, si verrà reindirizzati alla guida alla configurazione.

Creare un token di accesso per l'autenticazione del servizio

Microsoft Playwright Testing usa i token di accesso per autorizzare gli utenti a eseguire test Playwright con il servizio. Generare prima un token di accesso al servizio nel portale Playwright e quindi archiviare il valore in una variabile di ambiente.

Per generare il token di accesso, seguire questa procedura:

1. Nella guida alla configurazione dell'area di lavoro, in Creare un token di accesso, selezionare Genera token.

   

2. Copiare il token di accesso per l'area di lavoro.

   Il valore del token di accesso sarà necessario per configurare l'ambiente in un passaggio successivo.

   

Configurare l'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, seguire questa procedura:

1. In Aggiungere endpoint dell'area nel nella configurazione, copiare l'endpoint dell'area per l'area di lavoro.

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

   

Configurazione dell'ambiente

Per configurare l'ambiente, è necessario configurare PLAYWRIGHT_SERVICE_ACCESS_TOKEN e le variabili di ambiente PLAYWRIGHT_SERVICE_URL con i valori ottenuti nei passaggi precedenti.

È consigliabile usare il modulo per gestire l'ambiente dotenv. Con dotenv, si definiscono le variabili di ambiente nel file .env.

1. Aggiungere il modulo dotenv al progetto:

   npm i --save-dev dotenv
   

2. Creare un file .env insieme al file playwright.config.ts nel progetto Playwright:

   PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Assicurarsi di sostituire i segnaposto di testo {MY-ACCESS-TOKEN} e {MY-REGION-ENDPOINT} con i valori copiati in precedenza.

Attenzione

Assicurarsi di non aggiungere il file .env al repository del codice sorgente per evitare la perdita del valore del token di accesso.

Aggiungere un file di configurazione del servizio

Per eseguire i test Playwright nell'area di lavoro Microsoft Playwright Testing, è necessario aggiungere un file di configurazione del servizio insieme al file di configurazione Playwright. Il file di configurazione del servizio fa riferimento alle variabili di ambiente per ottenere l'endpoint dell'area di lavoro e il token di accesso.

Per aggiungere la configurazione del servizio al progetto:

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 il file.

Eseguire test su larga scala con Microsoft Playwright Testing

A questo punto, è stata preparata la configurazione per l'esecuzione dei test Playwright nel cloud con Microsoft Playwright Testing. È possibile usare l'interfaccia della riga di comando di Playwright per eseguire i test oppure usare l'estensione Playwright Test di Visual Studio Code.

Eseguire un singolo test su larga scala

Con Microsoft Playwright Testing, i costi vengono addebitati in base al numero totale di minuti di test. 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 con il servizio.

Per eseguire un singolo test Playwright con Microsoft Playwright Testing, seguire questa procedura:

Interfaccia della riga di comando di Playwright

Per usare l'interfaccia della riga di comando di Playwright per eseguire test con Microsoft Playwright Testing, passare il file di configurazione del servizio come parametro della riga di comando.

1. Aprire una finestra del terminale.

2. Immettere il comando seguente per eseguire il test Playwright in browser remoti nell'area di lavoro:

   Sostituire il segnaposto di testo {name-of-file.spec.ts} con il nome del file della specifica di test.

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

   Al termine del test, è possibile visualizzare lo stato del test nel terminale.

   Running 1 test using 1 worker
       1 passed (2.2s)
   
   To open last HTML report run:
   
   npx playwright show-report
   

Visual Studio Code

Per eseguire un singolo test Playwright in Visual Studio Code con Microsoft Playwright Testing, selezionare il file di configurazione del servizio nella vista Esplora test. Selezionare il test dall’elenco dei test ed eseguirlo.

1. Installare l'estensione Playwright Test di Visual Studio Code.

2. Aprire la vista Esplora test nella barra delle attività.

   Esplora test rileva automaticamente i test Playwright e la configurazione del servizio nel progetto.

   

3. Selezionare Seleziona profilo predefinito e quindi selezionare i progetti predefiniti dal file di configurazione del servizio.

   Notare che i profili di esecuzione del servizio provengono dal file playwright.service.config.ts aggiunto in precedenza.

   Impostando un profilo predefinito, è possibile eseguire automaticamente i test con il servizio o eseguire più progetti Playwright contemporaneamente.

   

4. Nell'elenco dei test, selezionare il pulsante Esegui test accanto a un test per eseguirlo.

   Il test viene eseguito sui progetti selezionati nel profilo predefinito. Se è stato selezionato uno o più progetti dalla configurazione del servizio, il test viene eseguito in browser remoti nell'area di lavoro.

   

   Suggerimento

   È comunque possibile eseguire il debug del codice di test quando si eseguono test in browser remoti usando il pulsante Esegui il debug test.

5. È possibile visualizzare i risultati del test direttamente in Visual Studio Code.

   

È ora possibile eseguire più test con il servizio, oppure eseguire l'intero gruppo di test in browser remoti.

Attenzione

A seconda delle dimensioni del gruppo di test, è possibile che vengano addebitati costi aggiuntivi per i minuti di test che superano quelli gratuiti assegnati.

Eseguire un gruppo di test completo su larga scala

Ora che si è confermato che è possibile eseguire un singolo test con Microsoft Playwright Testing, si può eseguire un gruppo di test Playwright completo su larga scala.

Per eseguire un gruppo di test Playwright completo con Microsoft Playwright Testing, seguire questa procedura:

Interfaccia della riga di comando di Playwright

Quando si eseguono più test Playwright o un gruppo di test completo con Microsoft Playwright Testing, si può specificare facoltativamente il numero di ruoli di lavoro paralleli come parametro della riga di comando.

1. Aprire una finestra del terminale.

2. Immettere il comando seguente per eseguire il gruppo di test Playwright in browser remoti nell'area di lavoro:

   npx playwright test --config=playwright.service.config.ts --workers=20
   

   A seconda delle dimensioni del gruppo di test, questo comando esegue i test su un massimo di 20 ruoli di lavoro paralleli.

   Al termine del test, è possibile visualizzare lo stato del test nel terminale.

   Running 6 tests using 6 workers
       6 passed (18.2s)
   
   To open last HTML report run:
   
       npx playwright show-report
   

Visual Studio Code

Per eseguire il gruppo di test Playwright in Visual Studio Code con Microsoft Playwright Testing:

1. Aprire la vista Esplora test nella barra delle attività.

2. Selezionare il pulsante Esegui test per eseguire tutti i test con Microsoft Playwright Testing.

   Quando si eseguono tutti i test, viene usato il profilo predefinito. Nel passaggio precedente, è stato configurato il profilo predefinito per l'uso di progetti dalla configurazione del servizio.

   

   Suggerimento

   È comunque possibile eseguire il debug del codice di test quando si eseguono test in browser remoti usando il pulsante Esegui il debug test.

3. In alternativa, è possibile selezionare una configurazione del servizio specifica dall'elenco per eseguire i test solo per una configurazione specifica del browser.

   

4. È possibile visualizzare tutti i risultati dei test nella scheda Risultati test.

Visualizzare le esecuzioni dei test nel portale Playwright

Passare al portale Playwright per visualizzare i metadati dell'esecuzione del test e il log attività per l'area di lavoro.

Il log attività elenca i dettagli seguenti per ogni test: il tempo totale di completamento del test, il numero di ruoli di lavoro paralleli e il numero di minuti di test.

Visualizzare i risultati dei test nel portale Playwright

Microsoft Playwright Testing supporta ora la visualizzazione dei risultati dei test nel portale Playwright. Questa funzionalità è disponibile solo come funzionalità a invito.

Importante

La funzionalità di creazione di report del servizio Microsoft Playwright Testing è gratuita durante l'anteprima esclusivamente a invito. Tuttavia, le funzionalità esistenti di qualsiasi browser ospitato nel cloud continuano a fatturare 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. Assicurarsi che l'ambiente sia configurato correttamente come indicato nella sezione Configurare l'ambiente.

4. Installare il pacchetto di report

   Poiché la funzionalità non è attualmente pubblica, sarà necessario eseguire alcuni passaggi aggiuntivi per installare il pacchetto. Una volta che la funzionalità diventerà pubblica, questi passaggi non saranno necessari.

   1. Creare un file con nome .npmrc nella stessa posizione del file di configurazione Playwright.

   2. Aggiungere il contenuto seguente al file e salvarlo.

      @microsoft:registry=https://npm.pkg.github.com
      

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

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

   1. Eseguire il comando seguente nel terminale, nel percorso del file di configurazione Playwright. Sostituire PAT_TOKEN_PACKAGE con il token generato nel passaggio precedente.

          npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
      

   2. Aggiornare package.json file con il pacchetto.

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

   3. Eseguire npm install per installare il pacchetto.

5. Aggiornare il file Playwright.config

   Aggiungere Playwright Testing reporter a Playwright.config.ts nello stesso modo in cui si usano 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',
       }
   

6. Eseguire test Playwright

   È possibile eseguire il comando npx playwright test e visualizzare i risultati e gli artefatti nel portale di test Playwright.

   

Suggerimento

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

Ottimizzare la configurazione dei ruoli di lavoro paralleli

Una volta che i test sono stati eseguiti senza problemi con il servizio, provare a variare il numero di ruoli di lavoro paralleli per determinare la configurazione ottimale che riduca al minimo il tempo di completamento del test.

Con Microsoft Playwright Testing, è possibile eseguire un massimo di 50 ruoli di lavoro paralleli. Diversi fattori determinano quale sia la miglior configurazione per il progetto, come CPU, memoria e risorse di rete del computer client, la capacità di gestione del carico dell'applicazione di destinazione e il tipo di azioni eseguite nei test.

È possibile specificare il numero di ruoli di lavoro paralleli nella riga di comando dell'interfaccia della riga di comando Playwright, oppure configurare la proprietà workers nel file di configurazione del servizio Playwright.

Ulteriori informazioni su come determinare la configurazione ottimale per ottimizzare il completamento del gruppo di test.

Passaggio successivo

È stata creata correttamente un'area di lavoro Microsoft Playwright Testing nel portale Playwright e sono stati eseguiti test Playwright nei browser cloud.

Passare all’avvio rapido successivo per configurare test end-to-end continui eseguendo i test Playwright nel flusso di lavoro CI/CD.

Configurare test end-to-end continui in CI/CD