Início Rápido: Execute diagnósticos avançados com os relatórios do Playwright Workspaces

Neste guia de Início Rápido, você aprenderá como depurar seus testes do Playwright usando o recurso de relatório nos Espaços de Trabalho do Playwright. Execute diagnósticos avançados em seus testes do Dramaturgo salvando seus relatórios de teste no armazenamento do Azure e exibindo-os no portal do Azure usando o repórter de Workspaces do Dramaturgo.

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Se você não tiver uma assinatura do Azure, crie uma conta gratuita antes de começar.
• Sua conta do Azure precisa do Proprietário, Colaborador ou de uma das funções clássicas de administrador.
• Um projeto Playwright que usa o Playwright runner e o JavaScript SDK (NUnit e outros runners não têm suporte no momento). Se você não tiver um projeto, crie um usando a documentação de introdução do Dramaturgo ou use o projeto de exemplo de Workspaces do Dramaturgo.
• O projeto Playwright precisa usar o pacote Playwright (@playwright/test) versão 1.57 ou mais recente.
• CLI do Azure. Se você não tiver a CLI do Azure, consulte Instalar a CLI do Azure.
• O Playwright Workspace deve usar a autenticação do Microsoft Entra ID. Não há suporte para autenticação usando um token de acesso para relatórios.

Habilitar relatórios e vincular uma conta de armazenamento a um workspace

Para começar a usar os relatórios do Playwright Workspaces, a primeira etapa é habilitar a geração de relatórios em seu workspace e vincular uma conta de armazenamento para guardar os artefatos dos relatórios. Você pode começar com um novo workspace ou usar seu workspace existente.

Adicionar funções de Controle de Acesso Baseado em Função (RBAC) para a conta de armazenamento vinculada

1. Abra a conta de armazenamento vinculada no portal do Azure.

2. Abra 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 Colaborador de Dados do Blob de Armazenamento e clique em Avançar.

   

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

   

6. Clique em Examinar + atribuir.

Instalar o pacote Workspaces do Playwright

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

npm init @azure/playwright@latest

Esse comando gera o arquivo playwright.service.config.ts, que direciona e autentica o Playwright para Playwright Workspaces.

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

Habilitar o HTML e o repórter de Workspaces do Playwright

Para usar o recurso de relatório do Playwright Workspaces, habilite o HTML e o repórter do Playwright Workspaces adicionando a seguinte configuração no arquivo playwright.service.config.ts –

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

Habilitar artefatos na configuração do Playwright

No arquivo playwright.config.ts do projeto, verifique se você está coletando todos os artefatos necessários.

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

Configurar o ponto de extremidade do navegador

Na configuração, você precisa fornecer o ponto de extremidade do navegador específico da região. O ponto de extremidade depende da região do Azure que você selecionou 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é o workspace.

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

   

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

   Verifique se essa URL está disponível na variável de PLAYWRIGHT_SERVICE_URL ambiente.

   

Configure seu ambiente

Para configurar seu ambiente, é necessário configurar a variável de ambiente PLAYWRIGHT_SERVICE_URL com o valor obtido nas etapas anteriores.

Use o dotenv módulo para gerenciar seu ambiente. Usando o dotenv, você pode definir suas variáveis de ambiente no arquivo .env.

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

   npm i --save-dev dotenv
   

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

   require('dotenv').config();
   

3. Crie um arquivo .env acompanhado do arquivo playwright.config.ts no projeto do Playwright:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

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

Configurar a autenticação

Para executar seus testes de Playwright em seu workspace de Playwright, você precisa autenticar o cliente dramaturgo onde você está executando os testes com o serviço. Faça a autenticação na sua máquina de desenvolvimento local ou na máquina de CI.

Configurar a autenticação usando o Microsoft Entra ID

O ID do Microsoft Entra é a única autenticação suportada para o uso do recurso de relatório no Playwright Workspace. No computador de desenvolvimento local, você pode usar a CLI do Azure para entrar

az login

Execute seus testes com os Workspaces do Playwright

Você concluiu a configuração para executar seus testes do Playwright na nuvem com Playwright Workspaces. Você pode usar a CLI do Playwright para executar seus testes ou usar a extensão Teste Playwright no Visual Studio Code.

Execuções de testes de depuração e resultados no portal do Azure

Adicionar funções RBAC (Controle de Acesso Baseado em Função) para a conta de armazenamento vinculada

1. Abra a conta de armazenamento vinculada no portal do Azure.

2. Abra a guia Controle de Acesso (IAM).

   

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

   

4. Em funções de administrador com privilégios, pesquise e selecione a função Colaborador* e clique em Avançar.

   

5. Selecione e adicione todos os membros que podem exibir os relatórios de teste.

   

6. Clique em Examinar + atribuir.

(Somente se o rastreamento estiver habilitado) Permitir visualizador de rastreamento público de lista na conta de armazenamento vinculada

1. Abra a conta de armazenamento vinculada no portal do Azure.

2. Vá para Configurações –> CORS (Compartilhamento de recursos).

   

3. No serviço Blob, adicione um novo registro:

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

   

4. Clique em Salvar.

Exibir relatórios de teste salvos no portal do Azure

Agora você pode solucionar problemas de casos de teste com falha no portal do Azure.

1. Após a conclusão da execução do teste, o repórter gerará um link para a página de execuções de teste no portal do Azure. Abra este link para exibir resultados de teste detalhados e artefatos associados.

   

2. A página de execuções de teste fornece todas as informações necessárias para solução de problemas. É possível:

   • Visualize logs de erros detalhados, etapas de teste e artefatos anexados, como capturas de tela ou vídeos.
   • Navegue diretamente até o Visualizador de Rastreamento para obter uma análise mais profunda.

   

3. O Visualizador de Rastreamento permite que você percorra a execução do teste visualmente. É possível:

   • Use a linha do tempo para focalizar as 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 do console para cada etapa