Condividi tramite

Guida introduttiva: Risolvere i problemi relativi ai test con Microsoft Playwright Testing Preview

  • Articolo

In questa guida introduttiva si apprenderà come risolvere facilmente i problemi dei test Playwright usando report e artefatti pubblicati in Microsoft Playwright Testing Preview. Inoltre, questa guida illustra come usare la funzionalità di creazione di report, indipendentemente dal fatto che si eseguano test nei browser ospitati nel cloud forniti dal servizio.

Dopo aver completato questa guida introduttiva, si avrà un'area di lavoro Microsoft Playwright Testing per visualizzare i risultati dei 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.

Background

Il servizio Microsoft Playwright Testing consente di:

  • Accelerare le pipeline di compilazione eseguendo i test in parallelo usando browser ospitati nel cloud.
  • Semplificare la risoluzione dei problemi pubblicando i risultati dei test e gli artefatti nel servizio, rendendoli accessibili tramite il portale del servizio.

Queste due funzionalità del servizio possono essere usate in modo indipendente o insieme e ognuna ha un proprio piano tariffario. Si ha la flessibilità necessaria per:

  • Accelerare le esecuzioni dei test e semplificare la risoluzione dei problemi usando entrambe le funzionalità: l'esecuzione di test nei browser ospitati nel cloud e la pubblicazione dei risultati nel servizio.
  • Eseguire i test solo nei browser ospitati nel cloud per completare le esecuzioni dei test più velocemente.
  • Pubblicare i risultati dei test nel servizio continuando a eseguire i test in locale per una risoluzione dei problemi efficiente.

Nota

Questo articolo è incentrato su come pubblicare i risultati dei test nel servizio senza usare browser ospitati nel cloud. Per informazioni su come accelerare anche le esecuzioni dei test, vedere Avvio rapido: Eseguire test Playwright su larga scala

Prerequisiti

Creare un'area di lavoro

Per iniziare a pubblicare i risultati dei test nel servizio Playwright Testing, 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.

    Screenshot che mostra la pagina

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

Nota

Assicurarsi che il progetto usi @playwright/test la versione 1.47 o successiva.

Questo comando genera playwright.service.config.ts un file che serve a:

  • Indirizzare ed autenticare il client 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 prompt chiede di eseguirne l'override.

Per usare solo la funzionalità di creazione di report per l'esecuzione del test, disabilitare i browser ospitati nel cloud impostando useCloudHostedBrowsers su false.

export default defineConfig(
  config,
  getServiceConfig(config, {
    timeout: 30000,
    os: ServiceOS.LINUX,
	useCloudHostedBrowsers: false // Do not use cloud hosted browsers
  }),
  {
    reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']], // Reporter for Microsoft Playwright Testing service
  }
);

L'impostazione del valore false assicura che i browser ospitati nel cloud non vengano usati per eseguire i test. I test vengono eseguiti nel computer locale, ma i risultati e gli artefatti vengono pubblicati nel servizio.

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

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

Nota

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

Per usare solo la funzionalità di creazione di report, aggiornare quanto segue nel .runsettings file del progetto:

  1. Disabilitare i browser ospitati nel cloud impostando useCloudHostedBrowsers su false.
  2. Aggiungere il logger Microsoft Playwright Testing nella sezione "Loggers".
<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
    <TestRunParameters>        
        <!--Select if you want to use cloud-hosted browsers to run your Playwright tests.-->
        <Parameter name="UseCloudHostedBrowsers" value="true" />
        <!--Select the authentication method you want to use with Entra-->
    </TestRunParameters> 
 .
 .
 .
    <LoggerRunSettings>
        <Loggers>
            <!--Microsoft Playwright Testing service logger for reporting -->
            <Logger friendlyName="microsoft-playwright-testing" enabled="True" />
            <!--could enable any logger additionally -->
            <Logger friendlyName="trx" enabled="false" />
        </Loggers>
    </LoggerRunSettings>
</RunSettings>

Suggerimento

Se si vuole accelerare l'esecuzione dei test usando il browser ospitato nel cloud, è possibile impostare useCloudHostedBrowsers su true. Verranno eseguiti i test nei browser gestiti dal servizio.

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. Assicurarsi che questo URL sia disponibile nella PLAYWRIGHT_SERVICE_URL variabile di ambiente.

    Screenshot che mostra come copiare l'endpoint dell'area di lavoro nel portale di test Playwright.

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

Creare un file PlaywrightServiceSetup.cs nella directory radice con il contenuto seguente.

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

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

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

Nota

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

Configurare l'autenticazione

Per pubblicare i risultati dei test e gli artefatti nell'area di lavoro Microsoft Playwright Testing, è necessario autenticare il client Playwright in cui si eseguono i test con il servizio. Il client potrebbe essere il computer di sviluppo locale o il 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. Per altre informazioni, 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'
  }

Abilitare artefatti come screenshot, video e tracce da acquisire da Playwright.

Dopo aver raccolto questi artefatti, collegarli all'oggetto TestContext per assicurarsi che siano disponibili nei report di test. Per altre informazioni, vedere il progetto di esempio per NUnit

Eseguire i test e pubblicare i risultati in Microsoft Playwright Testing

A questo punto è stata preparata la configurazione per la pubblicazione dei risultati e degli artefatti dei test con Microsoft Playwright Testing. Eseguire test usando il file appena creato playwright.service.config.ts e pubblicare i risultati e gli artefatti del test nel servizio.

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

Nota

Per la funzionalità di creazione di report di Microsoft Playwright Testing, vengono addebitati i costi in base al numero di risultati dei test pubblicati. Se si è un utente per la prima volta o si inizia a usare una versione di valutazione gratuita, è possibile iniziare con la pubblicazione di risultati di un singolo test anziché con il gruppo di test completo per evitare di esaurire i limiti della versione di valutazione gratuita.

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

Running 6 test using 2 worker
    5 passed, 1 failed (20.2s)

Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

A questo punto è stata preparata la configurazione per la pubblicazione dei risultati e degli artefatti dei test con Microsoft Playwright Testing. Eseguire test usando il .runsettings file e pubblicare i risultati e gli artefatti del test nel servizio.

dotnet test --settings:.runsettings

Le impostazioni per l'esecuzione del test sono definite nel .runsettings file. Per altre informazioni, vedere Come usare le opzioni del pacchetto del servizio

Nota

Per la funzionalità di creazione di report di Microsoft Playwright Testing, vengono addebitati i costi in base al numero di risultati dei test pubblicati. Se si è un utente per la prima volta o si inizia a usare una versione di valutazione gratuita, è possibile iniziare con la pubblicazione di risultati di un singolo test anziché con il gruppo di test completo per evitare di esaurire i limiti della versione di valutazione gratuita.

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

Starting test execution, please wait...

Initializing reporting for this test run. You can view the results at: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

A total of 100 test files matched the specified pattern.

Test Report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

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

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

Attenzione

A seconda delle dimensioni del gruppo di test, è possibile che vengano addebitati costi aggiuntivi per i risultati dei test oltre i risultati dei test gratuiti assegnati.

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

    Screenshot che mostra l'elenco dei test nell'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.

    Screenshot che mostra l'anteprima di un test.

  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.

    Screenshot che mostra il visualizzatore di traccia.

  1. Al termine dell'esecuzione del test, si ottiene un collegamento al portale Playwright nel terminale. 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

    Screenshot che mostra l'elenco dei test nell'esecuzione del test.

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

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

    Screenshot che mostra l'anteprima di un test.

Nota

Alcuni metadati, ad esempio il proprietario, la descrizione e la categoria, non vengono attualmente visualizzati nel dashboard del servizio. Se sono presenti informazioni aggiuntive da visualizzare, inviare un problema di GitHub nel repository.

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

    Screenshot che mostra il visualizzatore di traccia.

Suggerimento

È anche possibile usare il servizio Microsoft Playwright Testing per eseguire test in parallelo usando browser ospitati nel cloud. Sia i browser ospitati nel cloud che i report sono funzionalità indipendenti e vengono fatturati separatamente. È possibile usare uno di questi o entrambi. Per informazioni dettagliate, vedere Come usare le funzionalità del servizio

Nota

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

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