Avvio rapido: configurare test end-to-end continui con Microsoft Playwright Testing Anteprima

In questa guida introduttiva si configurano test end-to-end continui con Microsoft Playwright Testing Preview per verificare che l'app Web venga eseguita correttamente in browser e sistemi operativi diversi con ogni commit del codice e risolvere i problemi nei test con facilità usando il dashboard del servizio. Informazioni su come aggiungere i test Playwright a un flusso di lavoro di integrazione continua (CI), ad esempio GitHub Actions, Azure Pipelines o altre piattaforme CI.

Al termine di questa guida introduttiva, è disponibile un flusso di lavoro CI che esegue il gruppo di test Playwright su larga scala e contribuisce alla risoluzione dei problemi dei test con facilità con Microsoft Playwright Testing.

Prerequisiti

• Un account Azure con una sottoscrizione attiva. Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.

• Area di lavoro Microsoft Playwright Testing. Completare la guida introduttiva: eseguire test Playwright su larga scala per creare un'area di lavoro.

Ottenere l'URL dell'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 e archiviarlo come segreto del flusso di lavoro CI, seguire questa procedura:

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

2. Nella home page dell'area di lavoro, selezionare Visualizza guida alla configurazione.

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

3. In Aggiungere l'endpoint dell'area nel programma di installazione, copiare l'URL dell'endpoint di servizio.

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

4. Archiviare l'URL dell'endpoint di servizio in un segreto del flusso di lavoro CI:

   Nome segreto	Valore
   PLAYWRIGHT_SERVICE_URL	Incollare l'URL dell'endpoint copiato in precedenza.

Aggiungere file di configurazione del servizio

Se non si sono ancora configurati i test Playwright per eseguirli su browser ospitati nel cloud, aggiungere un file di configurazione del servizio al repository. Nel passaggio successivo si specifica quindi questo file di configurazione del servizio nell'interfaccia della riga di comando (CLI) Playwright.

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:

   import { defineConfig } from '@playwright/test';
   import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
   import config from './playwright.config';
   
   /* Learn more about service configuration at https://aka.ms/mpt/config */
   export default defineConfig(
     config,
     getServiceConfig(config, {
       exposeNetwork: '<loopback>',
           timeout: 30000,
       os: ServiceOS.LINUX,
           useCloudHostedBrowsers: true
     }),
     {
       /* 
       Playwright Testing service reporter is added by default.
       This will override any reporter options specified in the base playwright config.
       If you are using more reporters, please update your configuration accordingly.
       */
       reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
     }
   );
   

   Per impostazione predefinita, la configurazione del servizio consente di:

   • Accelerare le pipeline di compilazione eseguendo i test in parallelo usando browser ospitati nel cloud.
   • Semplificare la risoluzione dei problemi con facile accesso ai risultati dei test e agli artefatti pubblicati nel servizio.

   Tuttavia, è possibile scegliere di usare una di queste funzionalità o entrambe. Vedere Come usare le funzionalità del servizio e aggiornare il file di configurazione del servizio in base alle esigenze.

3. Salvare ed eseguire il commit del file nel repository del codice sorgente.

Aggiornare il file package.json

Aggiornare il file package.json nel repository per aggiungere dettagli sul pacchetto del servizio Microsoft Playwright Testing nella sezione devDependencies.

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.3"
}

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'
  },

Aggiornare la definizione del flusso di lavoro

Aggiornare la definizione del flusso di lavoro CI per eseguire i test Playwright con l'interfaccia della riga di comando di Playwright. Passare il file di configurazione del servizio come parametro di input per l'interfaccia della riga di comando di Playwright. Per configurare l'ambiente, specificare le variabili di ambiente.

1. Aprire la definizione del flusso di lavoro CI

2. Aggiungere i passaggi seguenti per eseguire i test Playwright in Microsoft Playwright Testing.

   I passaggi seguenti descrivono le modifiche del flusso di lavoro per GitHub Actions o Azure Pipelines. Analogamente, è possibile eseguire i test Playwright usando l'interfaccia della riga di comando di Playwright in altre piattaforme CI.

   • GitHub Actions
   • Azure Pipelines

   
     # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
     # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 
   - name: Login to Azure with AzPowershell (enableAzPSSession true) 
     uses: azure/login@v2 
     with: 
       client-id: ${{ secrets.AZURE_CLIENT_ID }} 
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
       enable-AzPSSession: true 
   
   - name: Install dependencies
       working-directory: path/to/playwright/folder # update accordingly
     run: npm ci
   
   - name: Run Playwright tests
       working-directory: path/to/playwright/folder # update accordingly
     env:
       # Regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     run: npx playwright test -c playwright.service.config.ts --workers=20
   
   - name: Upload Playwright report
     uses: actions/upload-artifact@v3
     if: always()
     with:
       name: playwright-report
       path: path/to/playwright/folder/playwright-report/ # update accordingly
       retention-days: 10
   

3. Salvare ed eseguire il commit delle modifiche.

   Quando viene attivato il flusso di lavoro CI, i test Playwright vengono eseguiti nell'area di lavoro Microsoft Playwright Testing nei browser ospitati nel cloud in 20 ruoli di lavoro paralleli.

Visualizzare le esecuzioni e i risultati dei test nel portale Playwright

È ora possibile risolvere i problemi relativi alla pipeline CI 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.

   

Contenuto correlato

È stato configurato correttamente un flusso di lavoro di test end-to-end continuo per eseguire i test Playwright su larga scala nei browser ospitati nel cloud.

• Concedere agli utenti l'accesso all'area di lavoro

• Gestire le aree di lavoro