Condividi tramite

Drammaturgo azzurro

Azure Playwright è un servizio di Azure completamente gestito che usa il cloud per consentire l'esecuzione di test di Playwright con una parallelizzazione molto più elevata tra diverse combinazioni di sistema operativo e browser contemporaneamente. Ciò significa esecuzioni di test più rapide con una copertura dello scenario più ampia, che aiuta a velocizzare la distribuzione delle funzionalità senza sacrificare la qualità. Il servizio include anche funzionalità integrate di reportistica che caricano automaticamente i risultati dei test e gli artefatti correlati sull'archivio Azure e li visualizzano nel portale del servizio, consentendo una risoluzione dei problemi più rapida e semplice. Con Playwright Workspaces, puoi rilasciare le funzionalità più velocemente e con maggiore sicurezza.

Sei pronto per iniziare? Passa alla nostra guida rapida!

Get Started

Segui questi passaggi per eseguire la tua suite di test Playwright esistente con il servizio.

Prerequisiti

Creare un'area di lavoro

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

  2. Creare l'area di lavoro.

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

      Creare una risorsa nel portale di Azure

    • Immettere Aree di lavoro Playwright nella casella di ricerca.

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

      Cercare aree di lavoro di Playwright in Azure Marketplace

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

      Campo Description
      Subscription 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 deve essere di lunghezza compresa tra 3 e 64 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.
      Redazione di rapporti L'opzione toggle è impostata su "Abilitato" di default per permettere agli utenti di salvare e visualizzare i report delle prove da Playwright Workspace. Se vuoi disattivare la segnalazione, attiva l'impostazione su "Disabilitato".
      Account di archiviazione Un nuovo account di archiviazione viene creato e selezionato di default per memorizzare gli artefatti di segnalazione di Playwright Workspaces. Per selezionare un account di archiviazione esistente, seleziona dal menu a tendina oppure clicca su "Crea nuovo" per creare un nuovo account di archiviazione a tua scelta.

      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.

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

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

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

      Distribuzione completata - Vai alla risorsa

Installare il pacchetto Azure Playwright

  1. Eseguire questo comando per installare il pacchetto del servizio

    npm init @azure/playwright@latest

L'installazione del pacchetto del servizio creerà un file di configurazione del servizio denominato playwright.service.config.ts

La configurazione del servizio serve a:

  • Indirizzare e autenticare il drammaturgo nelle aree di lavoro del drammaturgo.
  • Aggiungi i reporti di Playwright Workspaces alla tua configurazione.
  • Eseguire l'override dei timeout per le operazioni del servizio, se necessario.

Assicurati che il tuo progetto utilizzi @playwright/test la versione 1.47 o successiva.

Ottenere l'endpoint dell'area

  1. Nel portale di Azure copiare il comando in Aggiungi endpoint area nella configurazione.

    Impostare l'endpoint dell'area di lavoro

    L'URL dell'endpoint corrisponde all'area dell'area di lavoro. È possibile che venga visualizzato un URL dell'endpoint diverso nel portale di Azure, a seconda dell'area selezionata durante la creazione dell'area di lavoro.

Set up environment (Configurare l'ambiente)

Assicurarsi che l'opzione PLAYWRIGHT_SERVICE_URL ottenuta nel passaggio precedente sia disponibile nell'ambiente in uso.

Si consiglia di utilizzare dotenv il modulo per gestire l'ambiente. Con dotenv utilizzerai il .env file per definire le tue variabili d'ambiente.

Non dimenticare di aggiungere .env file al tuo .gitignore file per non far trapelare i tuoi segreti.

npm i --save-dev dotenv

File .env

PLAYWRIGHT_SERVICE_URL=wss://eastus.api.playwright.microsoft.com/playwrightworkspaces/workspace-id/browsers

Configurare l'autenticazione

Per eseguire i test di Playwright nell'area di lavoro di Azure Playwright, è necessario autenticare il client di 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 utilizzando l'ID Microsoft Entra

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 di Azure 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. Per utilizzare l'autenticazione basata su token di accesso, abilitare l'autenticazione basata su token di accesso

  2. Configurare l'autenticazione utilizzando i token di accesso

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

NOTA: Per usare Azure Playwright nelle pipeline CI, è necessario configurare l'autenticazione con il servizio dalla pipeline, vedere Configurare test end-to-end continui in diversi browser e sistemi operativi

Esegui i test

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

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

Azure Playwright Reporter

Azure Playwright include un reporter personalizzato che carica automaticamente i tuoi report di test HTML di Playwright su Azure Storage, rendendoli accessibili direttamente tramite il portale Azure per facilitare il debug e la condivisione dei risultati.

Funzionalità

  • Upload automatico dei rapporti: carica senza soluzione di continuità i report HTML di Playwright sul tuo account Azure Storage
  • Integrazione con il portale: visualizza i risultati dei test direttamente nel portale Azure Playwright
  • Debug migliorato: Accedi a artefatti di test dettagliati, tracce e screenshot

Configurazione e Configurazione

Il reporter Azure Playwright è incluso nel @azure/playwright pacchetto e lavora insieme al reporter HTML integrato di Playwright.

1. Configura i reporter nella configurazione del drammaturgo

Aggiungi sia il reporter HTML che Azure Playwright reporter al tuo playwright.service.config.ts:

import { getServiceConfig, PlaywrightReporter } from "@azure/playwright";
import { defineConfig } from "@playwright/test";
import { DefaultAzureCredential } from "@azure/identity";

// <snippet_configure_reporters>
import { getServiceConfig, PlaywrightReporter } from "@azure/playwright";
import { defineConfig } from "@playwright/test";
import { DefaultAzureCredential } from "@azure/identity";
export default defineConfig(
  getServiceConfig({
    // Your existing configuration
    credential: new DefaultAzureCredential(),
  }),
  {
    reporter: [
      ["html", { open: "never" }], // HTML reporter must come first
      ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
    ],
  },
);

2. Prerequisiti per la rendicontazione

Prima di utilizzare Azure Playwright Reporter, assicurati che il tuo spazio di lavoro sia configurato correttamente:

Configurazione dell'area di lavoro

Abilita la segnalazione e configura la memoria:

  1. Vai al tuo Playwright Workspace nel portale Azure
  2. Naviga nella scheda Configurazione Storage
  3. Attiva la segnalazione su Abilitato
  4. Crea un nuovo account di archiviazione o seleziona l'account di archiviazione esistente
  5. Fare clic su Salva

Configura RBAC per l'accesso allo storage:

  1. Apri l'account di archiviazione collegato
  2. Vai alla scheda Controllo Accesso (IAM)
  3. Clicca Aggiungi assegnazione del ruolo
  4. Cerca e seleziona il ruolo Storage Blob Data Contributor , poi clicca su Seguente
  5. Seleziona e aggiungi tutti i membri che eseguiranno i test
  6. Clicca su Revisione + assegna

Configura CORS per Trace Viewer:

  1. Apri l'account di archiviazione collegato
  2. Vai su Impostazioni → Condivisione delle risorse (CORS)
  3. Sotto servizio Blob, aggiungi un nuovo record:
    • Origini consentite: https://trace.playwright.dev
    • Metodi consentiti: GET, OPTIONS
    • Età massima: inserisci un valore compreso tra 0 e 2147483647
  4. Fare clic su Salva
Requisiti dei clienti
  • Autenticazione: È richiesta l'autenticazione Microsoft Entra ID (i token di accesso non sono supportati per la segnalazione)
  • Versione Drammaturgo: Richiede la versione 1.57 o superiore
  • Configurazione del servizio: Deve utilizzare la configurazione del servizio (playwright.service.config.ts)
  • Impostazioni dello spazio di lavoro: La segnalazione deve essere abilitata sul tuo workspace Azure Playwright

Funzionamento

  1. Esecuzione dei test: I test vengono eseguiti normalmente utilizzando i browser di servizi Azure Playwright
  2. Generazione di report HTML: Il reporter HTML di Playwright genera il report standard di test
  3. Upload automatico: Azure Reporter carica la cartella del report HTML sull'Azure Storage del tuo workspace
  4. Accesso al portale: Visualizza i risultati nel portale Azure tramite l'URL fornito

Passaggi successivi

Contributing

Questo progetto accoglie contributi e suggerimenti. La maggior parte dei contributi richiede l'accettazione di un Contratto di licenza per autori (CLA) che dichiari di avere il diritto di concederci i diritti di utilizzare il tuo contributo, e di fatto lo fa. Per informazioni dettagliate, vedere https://cla.opensource.microsoft.com.

Quando invii una richiesta pull, un bot CLA determinerà automaticamente se devi fornire un CLA e decorare la PR in modo appropriato (ad esempio, controllo dello stato, commento). Segui semplicemente le istruzioni fornite dal bot. Dovrai farlo una sola volta in tutti i repository utilizzando il nostro CLA.

Questo progetto ha adottato il Codice di condotta Microsoft Open Source. Per ulteriori informazioni, consultare le FAQ del Codice di condotta o contattare opencode@microsoft.com per ulteriori domande o commenti.

Marchi

Questo progetto può contenere marchi o loghi per progetti, prodotti o servizi. L'uso autorizzato dei marchi o dei loghi Microsoft è soggetto e deve seguire le Linee guida per i marchi e il marchio di Microsoft. L'uso di marchi o loghi Microsoft nelle versioni modificate di questo progetto non deve causare confusione o implicare la sponsorizzazione di Microsoft. Qualsiasi utilizzo di marchi o loghi di terze parti è soggetto alle politiche di tali terze parti.

  • Last updated on