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 e risolvere i problemi dei test non riusciti usando Microsoft Playwright Testing Preview. Usare l'infrastruttura cloud per convalidare l'applicazione in più browser, dispositivi e sistemi operativi. Pubblicare i risultati e gli artefatti generati da Playwright nel servizio e visualizzarli nel portale del servizio.

Dopo aver completato questo avvio rapido, è disponibile un'area di lavoro Microsoft Playwright Testing per eseguire i test Playwright su larga scala e visualizzare i risultati test e gli artefatti nel portale del servizio.

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.
• Interfaccia della riga di comando di Azure. Se non è disponibile l'interfaccia della riga di comando di Azure, vedere Installare l'interfaccia della riga di comando di Azure.

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.

Installare il pacchetto Microsoft Playwright Testing

Per usare il servizio, installare il pacchetto Microsoft Playwright Testing.

npm init @azure/microsoft-playwright-testing

Viene generato un file playwright.service.config.ts che serve a:

• Indirizzare ed autenticare Playwright nel servizio Microsoft Playwright Testing.
• Aggiunge un reporter per pubblicare i risultati e gli artefatti dei test.

Se si dispone già di questo file, il pacchetto chiede di eseguirne l'override.

Configurare l'endpoint dell'area del servizio

Nella configurazione è 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 la variabile 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_URL={MY-REGION-ENDPOINT}
   

   Assicurarsi di sostituire il segnaposto di testo {MY-REGION-ENDPOINT} con il valore copiato in precedenza.

Configurare l'autenticazione

Per eseguire i test Playwright nell'area di lavoro Microsoft Playwright Testing, è necessario autenticare il client Playwright in cui si eseguono i test con il servizio. Potrebbe trattarsi del computer di sviluppo locale o del computer CI.

Il servizio offre due metodi di autenticazione: Microsoft Entra ID e token di accesso.

Microsoft Entra ID usa le credenziali di Azure, richiedendo il log-in all'account Azure per l'accesso sicuro. In alternativa, è possibile generare un token di accesso dall'area di lavoro Playwright e usarlo nella configurazione.

Configurare l'autenticazione con Microsoft Entra ID

Microsoft Entra ID è l'autenticazione predefinita e consigliata per il servizio. Dal computer di sviluppo locale è possibile usare l'interfaccia della riga di comando di Azure per accedere

az login

Nota

Se si fa parte di più tenant di Microsoft Entra, assicurarsi di accedere al tenant a cui appartiene l'area di lavoro. È possibile ottenere l'ID tenant dal portale di Azure. Vedere Trovare il tenant di Microsoft Entra. Dopo aver visualizzato l'ID, accedere usando il comando az login --tenant <TenantID>

Configurare l'autenticazione tramite token di accesso

È possibile generare un token di accesso dall'area di lavoro Playwright Testing e usarlo nella configurazione. Tuttavia, è consigliabile usare Microsoft Entra ID per l'autenticazione per la sua sicurezza avanzata. I token di accesso, sebbene siano pratici, funzionano come password di lunga durata e sono più soggetti a essere compromessi.

1. L'autenticazione tramite token di accesso è disabilitata per impostazione predefinita. Per usarla, Abilitare l'autenticazione tramite token di accesso

2. Configurare l'autenticazione tramite token di accesso

Attenzione

È consigliabile usare Microsoft Entra ID per l'autenticazione al servizio. Se si usano token di accesso, vedere Come gestire i token di accesso

Abilitare gli artefatti nella configurazione di Playwright

playwright.config.ts Nel file del progetto assicurarsi di raccogliere tutti gli artefatti necessari.

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

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, vengono addebitati i costi in base al numero di minuti di test totali e al numero di risultati dei test pubblicati. Se si utilizza il servizio per la prima volta o si inizia a usare una versione di valutazione gratuita, è possibile cominciare con l'esecuzione di un singolo test su larga scala anziché con il gruppo di test completo per evitare di esaurire i limiti previsti.

Nota

La funzionalità di creazione di report è abilitata per impostazione predefinita per le aree di lavoro esistenti. L'implementazione viene eseguita in più fasi e richiederà alcuni giorni. Per evitare errori, verificare che l'impostazione Rich diagnostics using reporting sia ATTIVA per l'area di lavoro prima di procedere. Vedere l'abilitazione della creazione di report per l'area di lavoro.

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 e i risultati dei test oltre i minuti di test gratuiti assegnati e i risultati dei test gratuiti.

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)
   
   Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
   

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 e i risultati dei test nel portale Playwright

È ora possibile risolvere i problemi relativi ai test case non riusciti nel portale playwright.

1. Al termine dell'esecuzione del test, viene generato un collegamento al portale Playwright. Aprire questo collegamento per visualizzare i risultati dettagliati dei test e gli artefatti associati. Il portale visualizza informazioni essenziali, tra cui:

   • Dettagli della compilazione CI
   • Stato complessivo dell'esecuzione dei test
   • ID commit collegato all'esecuzione del test

   

2. Il portale Playwright fornisce tutte le informazioni necessarie per la risoluzione dei problemi. È possibile:

   • Passare da un tentativo all'altro.
   • Visualizzare log degli errori dettagliati, passaggi di test e artefatti allegati, ad esempio screenshot o video.
   • Passare direttamente al Visualizzatore di traccia per un'analisi più approfondita.

   

3. Il Visualizzatore tracce consente di eseguire visivamente l'esecuzione del test. È possibile:

   • Usare la sequenza temporale per passare il puntatore del mouse sui singoli passaggi, rivelando lo stato della pagina prima e dopo ogni azione.
   • Esaminare i log dettagliati, gli snapshot DOM, l'attività di rete, gli errori e l'output della console per ogni passaggio.

   

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.

Nota

I risultati e gli artefatti dei test pubblicati vengono conservati nel servizio per 90 giorni. Dopo questo periodo, vengono eliminati automaticamente.

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