Avvio rapido: eseguire test end-to-end su larga scala con aree di lavoro Playwright

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

Dopo aver completato questa guida introduttiva, è disponibile un'area di lavoro Playwright per eseguire i test Playwright su larga scala.

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 ha un progetto, crearne uno usando la documentazione introduttiva di Playwright o usare il progetto di esempio Playwright Workspaces.
• CLI 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 nei browser cloud, è prima necessario creare un'area di lavoro Playwright.

1. Accedi al portale di Azure.

2. Selezionare il pulsante menu nell'angolo superiore sinistro del portale e quindi selezionare Crea una risorsa.

   

3. Immettere Aree di lavoro Playwright nella casella di ricerca.

4. Selezionare la scheda Aree di lavoro Playwright, quindi selezionare Crea.

   

5. Fornire le informazioni seguenti per configurare una nuova area di lavoro Playwright:

   Campo	Descrizione
   Abbonamento	Selezionare la sottoscrizione di Azure che si desidera utilizzare per questa area di lavoro di Playwright.
   Gruppo di risorse	Selezionare un gruppo di risorse esistente. In alternativa, selezionare Crea nuovo, quindi immettere un nome univoco per il nuovo gruppo di risorse.
   Nome	Immettere un nome univoco per identificare l'area di lavoro. Il nome può essere costituito solo da caratteri alfanumerici e trattini e ha una lunghezza compresa tra 3 e 24 caratteri.
   Ubicazione	Selezionare una posizione geografica per ospitare l'area di lavoro. Questa posizione determina anche la posizione in cui vengono archiviati i risultati dell'esecuzione dei test.

   Annotazioni

   Facoltativamente, è possibile configurare altri dettagli nella scheda Tag. I tag sono coppie nome-valore che consentono di classificare le risorse e visualizzare dati di fatturazione consolidati tramite l'applicazione dello stesso tag a più risorse e gruppi di risorse.

6. Dopo aver completato la configurazione della risorsa, selezionare Rivedi e crea.

7. Esaminare tutte le impostazioni di configurazione e selezionare Crea per avviare la distribuzione dell’area di lavoro Playwright.

   Al termine del processo, viene visualizzato un messaggio di esito positivo della distribuzione.

8. Per visualizzare la nuova area di lavoro, selezionare Vai alla risorsa.

   

Installare il pacchetto Playwright Workspaces

Per usare il servizio, installare il pacchetto Playwright Workspaces.

npm init @azure/playwright@latest

Viene generato un playwright.service.config.ts file che serve per indirizzare e autenticare Playwright su Playwright Workspaces.

Se si dispone già di questo file, il pacchetto chiede di sovrascriverlo.

Per usare il servizio, installare il pacchetto Playwright Workspaces.

dotnet add package Azure.Developer.Playwright.NUnit

Configurare l'endpoint del browser

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

Per ottenere l'URL dell'endpoint del browser, seguire questa procedura:

1. Accedere al portale di Azure con l'account Azure e passare all'area di lavoro.

2. Selezionare la pagina Inizia.

   

3. In Aggiungi l'endpoint del browser alla tua configurazione, copia l'URL dell'endpoint.

   Assicurarsi che questo URL sia disponibile nella variabile di ambiente PLAYWRIGHT_SERVICE_URL.

   

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. Aggiungere il frammento di codice seguente in playwright.service.config.ts:

   require('dotenv').config();
   

3. 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 la configurazione del servizio

Creare un file PlaywrightServiceSetup.cs nel progetto con il contenuto seguente.

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup  : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential()
    ) 
    {}
}

Annotazioni

Assicurarsi che il progetto usi la versione 1.50 o successiva di Microsoft.Playwright.NUnit.

Configurare l'autenticazione

Per eseguire i test Playwright nell'area di lavoro Playwright, è 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

Annotazioni

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

Esegui i test su larga scala con Playwright Workspaces

A questo punto è stata preparata la configurazione per l'esecuzione dei test Playwright nel cloud con Playwright Workspaces. È 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 con il servizio

Con le aree di lavoro Playwright, viene addebitato sulla base del numero totale di minuti di test. Se si è un utente per la prima volta o si inizia a usare una versione di valutazione gratuita, è possibile iniziare a eseguire un singolo test anziché al gruppo di test completo per evitare di esaurire i limiti della versione di valutazione gratuita.

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

Per eseguire un singolo test Playwright con Aree di lavoro Playwright, seguire questa procedura:

Interfaccia della riga di comando di Playwright

Per utilizzare il CLI di Playwright per eseguire i test con i Workspaces Playwright, 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 aree di lavoro Playwright, selezionare il file di configurazione del servizio nella visualizzazione 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 con il servizio

Ora che è stato convalidato che è possibile eseguire un singolo test con Playwright Workspaces, è possibile eseguire un gruppo di test Playwright completo su larga scala.

Per eseguire un gruppo di test Playwright completo con Aree di lavoro Playwright, seguire questa procedura:

Interfaccia della riga di comando di Playwright

Quando si eseguono più test Playwright o un gruppo di test completo con aree di lavoro Playwright, è possibile 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)
   

Visual Studio Code

Per eseguire la suite di test Playwright in Visual Studio Code con Aree di lavoro Playwright:

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

2. Selezionare il pulsante Esegui test per eseguire tutti i test con Aree di lavoro Playwright.

   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.

Eseguire test Playwright su browser gestiti dal servizio usando la configurazione creata in precedenza.

dotnet test -- NUnit.NumberOfTestWorkers=20

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

Starting test execution, please wait...

A total of 100 test files matched the specified pattern.

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 59 s - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

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 le aree di lavoro Playwright è possibile eseguire fino ad un massimo di 50 lavoratori in parallelo. 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.

È possibile specificare il numero di ruoli di lavoro paralleli nella riga di comando dell'interfaccia della riga di comando Playwright oppure configurare la proprietà NumberOfTestWorkers nel file .runsettings.

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

Passo successivo

È stata creata correttamente un'area di lavoro Playwright nel portale di Azure ed è stato eseguito i 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