Partilhar 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 de seus testes de Playwright facilmente usando relatórios e artefatos publicados no Microsoft Playwright Testing Preview. Além disso, este guia demonstra como utilizar o recurso de relatório, independentemente de você estar executando testes nos navegadores hospedados na nuvem fornecidos pelo serviço.

Depois de concluir este início rápido, você terá um espaço de trabalho Microsoft Playwright Testing para exibir resultados de teste e artefatos no portal de serviço.

Importante

O Microsoft Playwright Testing está atualmente em pré-visualização. Para obter os termos legais que se aplicam aos recursos do Azure que estão em versão beta, em visualização ou ainda não lançados em disponibilidade geral, consulte os Termos de Uso Suplementares para Visualizações do Microsoft Azure.

Fundo

O serviço Microsoft Playwright Testing permite:

  • Acelere os pipelines de compilação 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 de forma independente ou em conjunto, e cada um tem seu próprio plano de preços. Tem flexibilidade para:

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

Nota

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

Pré-requisitos

  • Uma conta do Azure com uma subscrição 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 de dramaturgia. Se você não tiver um projeto, crie um usando a documentação de introdução ao Playwright ou use nosso projeto de exemplo Microsoft Playwright Testing.
  • CLI do Azure. Se você não tiver a CLI do Azure, consulte Instalar a CLI do Azure.

Criar uma área de trabalho

Para começar a publicar resultados de teste no serviço Teste de Dramaturgia, primeiro crie um espaço de trabalho de Teste de Dramaturgia da Microsoft no portal de Dramaturgia.

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

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

    Gorjeta

    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, em seguida, 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 da área de trabalho 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.
    Subscrição do Azure Selecione a assinatura do Azure que você deseja usar para este espaço de trabalho Microsoft Playwright Testing.
    Região Selecione uma localização geográfica 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 ecrã que mostra a página 'Criar espaço de trabalho' no portal 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.

Instalar o pacote Microsoft Playwright Testing

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

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

Nota

Certifique-se de que o seu projeto utiliza @playwright/test a versão 1.47 ou superior.

Este comando gera playwright.service.config.ts um ficheiro que serve para:

  • Direcione e autentique seu cliente Playwright para o serviço Microsoft Playwright Testing.
  • Adiciona um repórter para publicar resultados de teste e artefatos.

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

Para usar apenas o recurso de relatório para a execução de teste, desative os navegadores hospedados na nuvem definindo useCloudHostedBrowsers como false.

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

Definir o valor como false garante que os navegadores hospedados na nuvem não sejam usados para executar os testes. Os testes são executados em sua máquina local, mas os resultados e artefatos são publicados no serviço.

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

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

Nota

Certifique-se de que o seu projeto utiliza Microsoft.Playwright.NUnit a versão 1.47 ou superior.

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

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

Gorjeta

Se você deseja acelerar sua execução de teste usando o navegador hospedado na nuvem, você pode definir useCloudHostedBrowsers como true. Isso executará seus testes nos navegadores gerenciados pelo serviço.

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

Na sua configuração, você precisa fornecer o ponto de extremidade de serviço específico da 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 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. Certifique-se de que este URL está disponível na PLAYWRIGHT_SERVICE_URL variável de ambiente.

    Captura de tela que mostra como copiar o ponto de extremidade da região do espaço de trabalho no portal de Teste de Playwright.

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.

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

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

    npm i --save-dev dotenv

  2. 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 configuração do serviço

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

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

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

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

Nota

Certifique-se de que o seu projeto utiliza Microsoft.Playwright.NUnit a versão 1.47 ou superior.

Configurar a autenticação

Para publicar resultados de teste e artefatos em seu espaço de trabalho Microsoft Playwright Testing, você precisa autenticar o cliente Playwright onde você está executando os testes com o serviço. O cliente pode ser sua máquina de desenvolvimento local ou máquina de CI.

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

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

Configurar a autenticação usando o Microsoft Entra ID

Microsoft Entra ID é a autenticação padrão e recomendada para o serviço. Na sua máquina de desenvolvimento local, você pode usar a CLI do Azure para entrar

az login

Nota

Se fizer parte de vários inquilinos do Microsoft Entra, certifique-se de que inicia sessão no inquilino a que pertence a sua área de trabalho. 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 o ID, inicie sessão utilizando o comando az login --tenant <TenantID>

Configurar a autenticação usando tokens de acesso

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

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

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

Atenção

É 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

Ativar artefatos na configuração do Playwright

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

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

Permita que artefatos como capturas de tela, vídeos e vestígios sejam capturados pelo Playwright.

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

Execute seus testes e publique os resultados no Microsoft Playwright Testing

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

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

Nota

Para o recurso Relatório do Microsoft Playwright Testing, você será cobrado com base no número de resultados de teste publicados. Se você é um usuário iniciante ou está começando com uma avaliação gratuita, você pode começar com a publicação de um único resultado de teste em vez do seu conjunto de testes completo para evitar esgotar seus limites de avaliação gratuita.

Após a conclusão do teste, você pode visualizar 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 resultados de teste e artefatos com o Microsoft Playwright Testing. Execute testes usando o .runsettings arquivo e publique resultados de teste e artefatos no serviço.

dotnet test --settings:.runsettings

As configurações para sua execução de teste são definidas em .runsettings arquivo. Para obter mais informações, consulte como usar as opções do pacote de serviço

Nota

Para o recurso Relatório do Microsoft Playwright Testing, você será cobrado com base no número de resultados de teste publicados. Se você é um usuário iniciante ou está começando com uma avaliação gratuita, você pode começar com a publicação de um único resultado de teste em vez do seu conjunto de testes completo para evitar esgotar seus limites de avaliação gratuita.

Após a conclusão da execução do teste, você pode visualizar 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.

Atenção

Dependendo do tamanho do seu conjunto de testes, você pode incorrer em custos adicionais pelos resultados do teste além dos resultados do teste gratuito atribuídos.

Veja as execuções de teste e os resultados no portal Playwright

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

  1. Após a conclusão da execução do teste, um link para o Portal do Playwright é gerado. Abra este link para visualizar os resultados detalhados do teste e os artefatos associados. O portal apresenta informações essenciais, incluindo:

    • Detalhes da construção CI
    • Status geral da execução do teste
    • O ID de confirmação vinculado à execução do teste

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

  2. O portal Playwright fornece todas as informações necessárias para a resolução de problemas. Pode:

    • Alternar entre tentativas.
    • 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 uma análise mais profunda.

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

  3. O Visualizador de rastreamento permite que você percorra visualmente a execução do teste. Pode:

    • 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 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ê receberá um link para o portal Playwright no seu terminal. Abra este link para visualizar os resultados detalhados do teste e os artefatos associados. O portal apresenta informações essenciais, incluindo:

    • Detalhes da construção CI
    • Status geral da execução do teste
    • O ID de confirmação vinculado à execução do teste

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

  2. O portal Playwright fornece todas as informações necessárias para a resolução de problemas. Pode:

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

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

Nota

Alguns metadados, como o proprietário, a descrição e a categoria, 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 visualmente a execução do teste. Pode:

    • 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 DOM, atividade de rede, erros e saída do console para cada etapa.

    Captura de tela que mostra o visualizador de rastreamento.

Gorjeta

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

Nota

Os resultados do teste e os artefatos que você publica são retidos no serviço por 90 dias. Depois disso, eles são excluídos automaticamente.

Próximo passo

Você criou com êxito um espaço de trabalho Microsoft Playwright Testing no portal Playwright e executa 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 de Playwright em seu fluxo de trabalho de CI/CD.

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