Guia Rápido: Realizar diagnósticos avançados com relatórios do Playwright Workspaces

Neste quickstart, aprende a depurar os seus testes de Playwrights usando a funcionalidade de reporte nos Playwright Workspaces. Realize diagnósticos avançados nos seus testes Playwright guardando os seus relatórios de teste no Azure Storage e visualizando-os no portal Azure usando o repórter Playwright Workspaces.

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Se não tiver uma subscrição do Azure, crie uma conta gratuita antes de começar.
• Sua conta do Azure precisa do Proprietário, Colaborador ou uma das funções clássicas de administrador.
• Um projeto Playwright que usa o Playwright Runner e o JavaScript SDK (o NUnit e outros runners não são atualmente suportados). Se não tiver um projeto, crie um usando a Documentação de Introdução do Playwright ou use o projeto exemplo de Workspaces do Playwright.
• O projeto Playwright deve usar o pacote Playwright (@plawright/test) versão 1.57 ou posterior.
• CLI do Azure. Se você não tiver a CLI do Azure, consulte Instalar a CLI do Azure.
• O Playwright Workspace deve utilizar autenticação Microsoft Entra ID. A autenticação usando um token de acesso não é suportada para relatórios.

Ative o relatório e associe uma conta de armazenamento a um espaço de trabalho

Para começar a relatar com o Playwright Workspaces, o primeiro passo é ativar a função de relatórios no seu espaço de trabalho e ligar uma conta de armazenamento para armazenar os artefatos de relatórios. Pode começar com um novo espaço de trabalho ou usar o seu espaço de trabalho atual.

Adicionar funções de Controlo de Acesso Baseado em Posições (RBAC) para a conta de armazenamento ligada

1. Abra a conta de armazenamento ligada no portal Azure.

2. Vá para a guia Controle de acesso (IAM).

   

3. Selecione Adicionar atribuição de função.

   

4. Em funções de trabalho, pesquise e selecione a função Contribuidor de Dados de Armazenamento Blob e clique em Seguinte.

   

5. Selecione e adicione todos os membros que realizam testes.

   

6. Clica em Rever + atribuir.

Instalar o pacote Playwright Workspaces

Para usar o Playwright Workspaces, instale o pacote Playwright Workspaces.

npm init @azure/playwright@latest

Este comando gera um playwright.service.config.ts ficheiro, que direciona e autentica o Playwright para os Workspaces do Playwright.

Se você já tiver esse arquivo, o pacote pedirá que você o substitua.

Ativar o HTML e o repórter do Playwright Workspaces

Para usar a funcionalidade de reporte Playwright Workspaces, ative o repórter html e Playwright Workspaces adicionando a seguinte definição no ficheiro playwright.service.config.ts –

reporter: [
    ["html", { open: "never" }], // HTML reporter must come first
    ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
]

Ativar artefatos na configuração do Playwright

No ficheiro playwright.config.ts do seu projeto, certifique-se de que está a recolher todos os artefactos necessários.

use: 
{
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
}

Configurar o endpoint do navegador

Na sua configuração, é necessário fornecer o ponto de extremidade do navegador específico para a região. O ponto de extremidade depende da região do Azure selecionada ao criar o espaço de trabalho.

Para obter a URL do ponto de extremidade do navegador, execute as seguintes etapas:

1. Entre no portal do Azure com sua conta do Azure e navegue até seu espaço de trabalho.

2. Selecione a página Introdução .

   

3. Em Adicionar o ponto de extremidade do navegador à sua configuração, copie o URL do ponto de extremidade.

   Certifique-se de que este URL está disponível na PLAYWRIGHT_SERVICE_URL variável de ambiente.

   

Configurar o ambiente

Para configurar seu ambiente, você precisa configurar a variável de PLAYWRIGHT_SERVICE_URL ambiente com o valor obtido nas etapas anteriores.

Usa o dotenv módulo para gerir o teu ambiente. Usando o dotenv, podes definir as variáveis de ambiente no .env ficheiro.

1. Adicione o dotenv módulo ao seu projeto:

   npm i --save-dev dotenv
   

2. Adicione o seguinte excerto de código:playwright.service.config.ts

   require('dotenv').config();
   

3. Crie um .env arquivo ao lado do playwright.config.ts arquivo em seu projeto Playwright:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Certifique-se de substituir o espaço reservado para texto {MY-REGION-ENDPOINT} pelo valor copiado anteriormente.

Configurar a autenticação

Para executar seus testes de Playwright em seu espaço de trabalho Playwright, você precisa autenticar o cliente Playwright onde você está executando os testes com o serviço. Autentica-te a partir da tua máquina de desenvolvimento local ou da máquina de CI.

Configurar a autenticação usando o Microsoft Entra ID

O Microsoft Entra ID é a única autenticação suportada para a utilização da funcionalidade de reporte no Playwright Workspace. A partir da tua máquina de desenvolvimento local, podes usar o Azure CLI para iniciar sessão

az login

Faça os seus testes com o Playwright Workspaces

Completou a configuração para executar os seus testes Playwright na cloud com o Playwright Workspaces. Você pode usar a CLI do Playwright para executar seus testes ou usar a extensão Playwright Test Visual Studio Code.

Testes de depuração executados e resultados no portal Azure

Adicionar funções de Controlo de Acesso Baseado em Funções (RBAC) para a conta de armazenamento associada

1. Abra a conta de armazenamento ligada no portal Azure.

2. Vá para a guia Controle de acesso (IAM).

   

3. Selecione Adicionar atribuição de função.

   

4. Na secção de funções de administrador privilegiado, pesquise e selecione o papel Contribuidor* e clique em Próximo.

   

5. Selecione e adicione todos os membros que possam consultar os relatórios de teste.

   

6. Clica em Rever + atribuir.

(Só se o rastreio estiver ativado) Permitir o visualizador público de rastreios na lista de permissões da conta de armazenamento associada

1. Abra a conta de armazenamento ligada no portal Azure.

2. Ir a Definições -> Partilha de Recursos (CORS).

   

3. Em serviço Blob, adicione um novo registo:

   • Origens permitidas: https://trace.playwright.dev
   • Métodos permitidos: GET, OPTIONS
   • Idade máxima: Introduza um valor entre 0 e 2147483647.

   

4. Selecione Guardar.

Ver relatórios de teste guardados no portal Azure

Agora pode resolver os casos de teste falhados no portal Azure.

1. Depois de concluir o seu teste, o repórter gera um link para a página de execuções de teste no portal Azure. Abra este link para visualizar os resultados detalhados do teste e os artefatos associados.

   

2. A Página de Execuções de Teste fornece todas as informações necessárias para a resolução de problemas. É possível:

   • Consulte registos detalhados de erros, passos de teste e artefactos anexos, como capturas de ecrã ou vídeos.
   • Navegue diretamente para o Visualizador de Rastreamento para uma análise mais profunda.

   

3. O Trace Viewer permite-lhe realizar visualmente a execução do seu teste. É possível:

   • Use a linha do tempo para passar o mouse sobre etapas individuais, revelando o estado da página antes e depois de cada ação.
   • Inspecione logs detalhados, instantâneos do DOM, atividade de rede, erros e saída da consola para cada etapa.