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.

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

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

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.

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:

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

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:

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.

   

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.