Compartilhar via

Guia de Início Rápido: solucionar problemas de testes com o Microsoft Playwright Testing Preview

  • Artigo

Neste guia de início rápido, você aprenderá a solucionar problemas em seus testes do Playwright com facilidade usando relatórios e artefatos publicados no Microsoft Playwright Testing Preview. Além disso, o guia demonstra como utilizar o recurso de relatórios, independentemente de você estar executando testes em navegadores hospedados na nuvem fornecidos pelo serviço.

Ao concluir este início rápido, você terá um workspace do Microsoft Playwright Testing, onde poderá visualizar diretamente os resultados dos testes e artefatos no portal.

Importante

O Microsoft Playwright Testing está atualmente em pré-visualização. Para os termos legais que se aplicam aos recursos do Azure que estão em versão beta, versão prévia ou que, de outra forma, ainda não foram lançados em disponibilidade geral, confira os Termos de Uso Complementares para Versões Prévias do Microsoft Azure.

Tela de fundo

O serviço Microsoft Playwright Testing permite que você:

  • Acelere os pipelines de build executando testes em paralelo usando navegadores hospedados na nuvem.
  • Simplifique a solução de problemas publicando resultados de teste e artefatos no serviço, tornando-os acessíveis por meio do portal de serviços.

Esses dois recursos do serviço podem ser usados independentemente ou juntos e cada um tem seu próprio plano de preços. Você tem a flexibilidade de:

  • Agilize as execuções de teste e simplifique a solução de problemas usando ambos os recursos: executar testes em navegadores hospedados na nuvem e publicar resultados no serviço.
  • Execute testes somente em navegadores hospedados na nuvem para terminar as execuções de teste mais rapidamente.
  • Publique os resultados de teste no serviço enquanto continua executando testes localmente para uma solução de problemas eficiente.

Observação

Este artigo se concentra em como você pode publicar resultados de teste no serviço sem usar navegadores hospedados na nuvem. Se você quiser aprender a acelerar também as execuções de teste, confira início rápido: executar testes do Playwright em escala

Pré-requisitos

Criar um workspace

Para começar a publicar resultados de teste no Playwright Testing, primeiro crie um workspace do Microsoft Playwright Testing no portal do Playwright.

  1. Entre no portal do Playwright com sua conta do Azure.

  2. Se você já tiver um espaço de trabalho, selecione um espaço de trabalho existente e vá para a próxima etapa.

    Dica

    Se você tiver vários espaços de trabalho, poderá alternar para outro espaço de trabalho selecionando o nome do espaço de trabalho na parte superior da página e selecionando Gerenciar todos os espaços de trabalho.

  3. Se você ainda não tiver um espaço de trabalho, selecione + Novo espaço de trabalho e forneça as seguintes informações:

    Campo Descrição
    Nome do workspace Insira um nome exclusivo para identificar seu espaço de trabalho.
    O nome só pode consistir em caracteres alfanuméricos e ter um comprimento entre 3 e 64 caracteres.
    Assinatura do Azure Selecione a assinatura do Azure que você deseja usar para este espaço de trabalho do Microsoft Playwright Testing.
    Região Selecione um local geográfico para hospedar seu espaço de trabalho.
    Este é o local onde os dados de execução de teste são armazenados para o espaço de trabalho.

    Captura de tela que mostra a página “Criar workspace” no portal do Playwright.

  4. Selecione Criar espaço de trabalho para criar o espaço de trabalho em sua assinatura.

    Durante a criação do espaço de trabalho, um novo grupo de recursos e um recurso do Microsoft Playwright Testing Azure são criados em sua assinatura do Azure.

Quando a criação do espaço de trabalho terminar, você será redirecionado para o guia de configuração.

Instale o pacote do Microsoft Playwright Testing

Para usar o serviço, instale o pacote Microsoft Playwright Testing.

npm init @azure/microsoft-playwright-testing@latest

Observação

Verifique se o projeto usa a @playwright/test versão 1.47 ou superior.

Esse comando gera um arquivo playwright.service.config.ts, que serve para:

  • Direcionar e autenticar o cliente Playwright para o serviço Microsoft Playwright Testing.
  • Adiciona um repórter para publicar resultados de testes e artefatos.

Se já tiver esse arquivo, receberá uma solicitação para substituí-lo.

Para usar apenas o recurso de relatórios na execução de testes, desabilite os navegadores hospedados na nuvem definindo useCloudHostedBrowsers como falso.

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
  }
);

Ao definir o valor como false, os navegadores hospedados na nuvem não serão usados para executar os testes. Os testes serão executados no computador local, mas os resultados e os artefatos serão publicados no serviço.

Para usar o serviço, instale o pacote Microsoft Playwright Testing.

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

Observação

Verifique se o projeto usa a Microsoft.Playwright.NUnit versão 1.47 ou superior.

Para usar apenas o recurso de relatório, atualize o seguinte no arquivo .runsettings do seu projeto:

  1. Desabilite navegadores hospedados na nuvem definindo-os useCloudHostedBrowsers como false.
  2. Adicione o agente de Microsoft Playwright Testing na seção 'Agentes'.
<?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>

Dica

Se você quiser acelerar sua execução de testes usando navegadores hospedados na nuvem, defina useCloudHostedBrowsers como verdadeiro. Isso executará seus testes nos navegadores gerenciados pelo serviço.

Configurar o ponto de extremidade da região de serviço

Em sua configuração, você deve fornecer o ponto de extremidade do serviço 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 serviço, execute as seguintes etapas:

  1. Em Adicionar ponto de extremidade de região em sua configuração, copie o ponto de extremidade de região para seu espaço de trabalho.

    A URL do ponto de extremidade corresponde à região do Azure que você selecionou ao criar o espaço de trabalho. Verifique se essa URL está disponível na variável de ambiente PLAYWRIGHT_SERVICE_URL.

    Captura de tela que mostra como copiar o ponto de extremidade da região do workspace no portal do Playwright Testing.

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.

Recomendamos que você use o módulo dotenv para gerenciar seu ambiente. Com dotenv, você define suas variáveis de ambiente no arquivo .env.

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

    npm i --save-dev dotenv

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

Definir a configuração do serviço

Crie um arquivo PlaywrightServiceSetup.cs no diretório raiz com o conteúdo a seguir.

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

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

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

Observação

Verifique se o projeto usa a Microsoft.Playwright.NUnit versão 1.47 ou superior.

Configurar a autenticação

Para publicar resultados de teste e artefatos em seu workspace do Microsoft Playwright Testing, você precisa autenticar o cliente Playwright no qual você está executando os testes com o serviço. O cliente pode ser seu computador de desenvolvimento local ou computador de CI.

O serviço oferece dois métodos de autenticação: Microsoft Entra ID e Tokens de Acesso.

O Microsoft Entra ID usa suas credenciais do Azure, exigindo uma entrada na sua conta do Azure para acesso seguro. Como alternativa, você pode gerar um token de acesso a partir do seu espaço de trabalho do Playwright e usá-lo em sua configuração.

Configurar a autenticação usando o Microsoft Entra ID

O Microsoft Entra ID é a autenticação padrão e recomendada para o serviço. Em seu computador de desenvolvimento local, você pode usar a CLI do Azure para entrar

az login

Observação

Se você fizer parte de vários locatários do Microsoft Entra, certifique-se de entrar no locatário ao qual seu workspace pertence. Você pode obter a ID do locatário no portal do Azure. Para obter mais informações, consulte Localizar seu locatário do Microsoft Entra. Depois de obter a ID, entre usando o comando az login --tenant <TenantID>

Configure a autenticação usando tokens de acesso

Você pode gerar um token de acesso a partir do seu workspace do Playwright Testing e usá-lo em sua configuração. No entanto, recomendamos fortemente o Microsoft Entra ID para autenticação devido à sua segurança aprimorada. Os tokens de acesso, embora convenientes, funcionam como senhas de longa duração  são mais suscetíveis a serem comprometidos.

  1. A autenticação com tokens de acesso está desabilitada por padrão. Para usar, Habilite a autenticação baseada em token de acesso

  2. Configure a autenticação usando tokens de acesso

Cuidado

É altamente recomendável usar o Microsoft Entra ID para autenticação no serviço. Se você estiver usando tokens de acesso, consulte Como Gerenciar Tokens de Acesso

Habilitar artefatos na configuração do Playwright

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

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

Habilite artefatos como captura de tela, vídeos e rastreamentos a serem capturados pelo Playwright.

Depois de coletar esses artefatos, anexe-os ao TestContext para garantir que eles estejam disponíveis em seus relatórios de teste. Para obter mais informações, confira nosso projeto de exemplo para o NUnit

Execute os testes e publique os resultados no Microsoft Playwright Testing

Agora você preparou a configuração para publicar os resultados de teste e artefatos usando o Microsoft Playwright Testing. Execute os testes usando o arquivo playwright.service.config.ts recém-criado e publique os resultados de teste e artefatos no serviço.

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

Observação

Para o recurso Relatórios do Microsoft Playwright Testing, você é cobrado com base no número de resultados de teste publicados. Se você for um usuário iniciante ou estiver começando com uma avaliação gratuita, poderá começar publicando um único resultado do teste, em vez de todo o conjunto de testes, para evitar esgotar os limites da avaliação gratuita.

Após a conclusão do teste, você pode exibir o status do teste no terminal.

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

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

Agora você preparou a configuração para publicar os resultados de teste e artefatos usando o Microsoft Playwright Testing. Execute os testes usando o arquivo .runsettings e publique os resultados de teste e artefatos no serviço.

dotnet test --settings:.runsettings

As configurações da execução de teste são definidas no arquivo .runsettings. Para obter mais informações, confira como usar opções de pacote de serviço

Observação

Para o recurso Relatórios do Microsoft Playwright Testing, você é cobrado com base no número de resultados de teste publicados. Se você for um usuário iniciante ou estiver começando com uma avaliação gratuita, poderá começar publicando um único resultado do teste, em vez de todo o conjunto de testes, para evitar esgotar os limites da avaliação gratuita.

Após a conclusão da execução do teste, você poderá exibir o status do teste no terminal.

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.

Cuidado

Dependendo do tamanho do conjunto de testes, podem haver cobranças adicionais para resultados de teste além dos gratuitos.

Exibir execuções de teste e resultados no portal do Playwright

Agora, você pode solucionar problemas dos casos de testes com falha no portal do Playwright.

  1. Após o término da execução dos testes, um link para o Portal Playwright é gerado. Abra este link para exibir resultados de teste detalhados e artefatos associados. O portal exibe informações essenciais, incluindo:

    • Detalhes da build de CI
    • Status geral da execução do teste
    • A ID de confirmação vinculada à execução de teste

    Captura de tela que mostra a lista de testes na execução do teste.

  2. O portal do Playwright fornece todas as informações necessárias para solução de problemas. Você poderá:

    • Alternar entre novas tentativas.
    • Exiba 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.

    Captura de tela que mostra a pré-visualização de um teste.

  3. O Visualizador de Rastreamento permite que você percorra a execução do teste visualmente. Você poderá:

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

    Captura de tela que mostra o visualizador de rastreamento.

  1. Após a conclusão da execução do teste, você obtém um link para o portal do Playwright em seu terminal. Abra este link para exibir resultados de teste detalhados e artefatos associados. O portal exibe informações essenciais, incluindo:

    • Detalhes da build de CI
    • Status geral da execução do teste
    • A ID de confirmação vinculada à execução de teste

    Captura de tela que mostra a lista de testes na execução do teste.

  2. O portal do Playwright fornece todas as informações necessárias para solução de problemas. Você poderá:

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

    Captura de tela que mostra a pré-visualização de um teste.

Observação

Alguns metadados, como o proprietário, a descrição e a categoria, atualmente não são exibidos no painel de serviço. Se houver informações adicionais que você gostaria de ver incluídas, envie um problema do GitHub em nosso repositório.

  1. O Visualizador de Rastreamento permite que você percorra a execução do teste visualmente. Você poderá:

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

    Captura de tela que mostra o visualizador de rastreamento.

Dica

Você também pode usar o serviço Microsoft Playwright Testing para executar testes em paralelo usando navegadores hospedados na nuvem. Os recursos de Relatórios e navegadores hospedados na nuvem são independentes e cobrados separadamente. Você pode usar um ou ambos. Para mais detalhes, confira Como usar os recursos de serviço

Observação

Os resultados e artefatos do teste que você publicar são mantidos no serviço por 90 dias. Após esse período, eles são automaticamente excluídos.

Próxima etapa

Você criou com sucesso um espaço de trabalho do Microsoft Playwright Testing no portal do Playwright e executou seus testes Playwright em navegadores de nuvem.

Avance para o próximo início rápido para configurar testes contínuos de ponta a ponta executando seus testes Playwright em seu fluxo de trabalho de CI/CD.

Configurar testes contínuos de ponta a ponta em CI/CD