Início rápido: execute testes de ponta a ponta em escala com o Microsoft Playwright Testing Preview

Neste início rápido, você aprenderá a executar seus testes do Playwright com navegadores de nuvem altamente paralelos e a solucionar problemas dos testes com falha facilmente usando o Microsoft Playwright Testing Preview. Use a infraestrutura de nuvem para validar seu aplicativo em vários navegadores, dispositivos e sistemas operacionais. Publique os resultados e os artefatos gerados pelo Playwright no serviço e visualize-os no portal do serviço.

Depois de concluir este início rápido, você terá um workspace do Microsoft Playwright Testing para executar seus testes do Playwright em escala e exibir os resultados de teste e artefatos no portal de serviço.

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.

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 do Playwright. Caso você não tenha um projeto, crie um usando a documentação de introdução do Playwright ou nosso projeto de exemplo do Microsoft Playwright Testing.
• CLI do Azure. Se você não tiver a CLI do Azure, consulte Instalar a CLI do Azure.

Criar um workspace

Para começar a executar seus testes Playwright em escala em navegadores de nuvem, primeiro crie um espaço de trabalho 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.

   

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

Isso gera um arquivo playwright.service.config.ts que serve para:

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

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

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

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

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.

   

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 em seu projeto 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 executar os testes do Playwright no workspace do Microsoft Playwright Testing, é necessário autenticar o cliente do Playwright onde você está executando os testes com o serviço. 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. Consulte Encontre 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.

• Para capturas de tela, confira capturas de tela
• Para vídeos, confira gravar vídeos para seus testes
• Para rastreamentos, confira gravação de um rastreamento

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 seus testes em escala e solucione problemas facilmente com o Microsoft Playwright Testing

Agora você preparou a configuração para executar seus testes de Playwright na nuvem com o Microsoft Playwright Testing. Você pode usar a CLI do Playwright para executar seus testes ou usar a extensão Teste Playwright no Visual Studio Code.

Executar um único teste com o serviço

Com o Microsoft Playwright Testing, você é cobrado com base no número total de minutos de teste e 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 executando um único teste em grande escala, em vez de todo o conjunto de testes, para evitar esgotar os limites da avaliação gratuita.

Observação

O recurso de relatórios está habilitado por padrão nos espaços de trabalho existentes. Isso está sendo distribuído em fases e levará alguns dias. Para evitar falhas, confirme se a Rich diagnostics using reportingconfiguração está ATIVADA para seu espaço de trabalho antes de continuar. Confira, Habilitar relatórios para o espaço de trabalho.

Depois de validar que o teste é executado com êxito, você pode aumentar gradualmente a carga de teste executando mais testes com o serviço.

Execute as seguintes etapas para executar um único teste do Playwright com o Microsoft Playwright Testing:

Playwright CLI

Para usar a CLI do Playwright para executar seus testes com o Microsoft Playwright Testing, passe o arquivo de configuração de serviço como um parâmetro de linha de comando.

1. Abra uma janela do terminal.

2. Insira o seguinte comando para executar o teste do Playwright em navegadores remotos em seu workspace:

   Substitua o espaço reservado de texto {name-of-file.spec.ts} pelo nome do arquivo de especificação de teste.

   npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
   

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

   Running 1 test using 1 worker
       1 passed (2.2s)
   
   To open last HTML report run:
   
   npx playwright show-report
   

Visual Studio Code

Para executar um único teste do Playwright no Visual Studio Code com o Microsoft Playwright Testing, selecione o arquivo de configuração de serviço no modo de exibição do Gerenciador de Testes. Em seguida, selecione e execute o teste na lista de testes.

1. Instale a extensão Teste Playwright no Visual Studio Code.

2. Abra o modo de exibição do Gerenciador de Testes na barra de atividades.

   O gerenciador de testes detecta automaticamente os testes do Playwright e a configuração do serviço em seu projeto.

   

3. Selecione Selecionar perfil padrão e selecione seus projetos padrão no arquivo de configuração de serviço.

   Observe que os perfis de execução do serviço são provenientes do arquivo de playwright.service.config.ts que você adicionou anteriormente.

   Ao definir um perfil padrão, você pode executar automaticamente seus testes com o serviço ou executar vários projetos do Playwright simultaneamente.

   

4. Na lista de testes, selecione o botão Executar teste ao lado de um teste para executá-lo.

   O teste é executado nos projetos selecionados no perfil padrão. Se você selecionou um ou mais projetos na configuração de serviço, o teste será executado em navegadores remotos em seu workspace.

   

   Dica

   Você ainda pode depurar seu código de teste ao executar seus testes em navegadores remotos usando o botão Depurar teste.

5. Você pode exibir os resultados do teste diretamente no Visual Studio Code.

   

Agora você pode executar vários testes com o serviço ou executar todo o conjunto de testes em navegadores remotos.

Cuidado

Dependendo do tamanho do seu conjunto de testes, você pode incorrer em cobranças adicionais pelos minutos de teste e resultados de teste que excederem os minutos e resultados gratuitos disponíveis.

Executar um conjunto de testes completo com o serviço

Agora que você validou que pode executar um único teste com o Microsoft Playwright Testing, você pode executar um conjunto de testes completo do Playwright em escala.

Execute as seguintes etapas para executar um conjunto de testes completo do Playwright com o Microsoft Playwright Testing:

Playwright CLI

Ao executar vários testes do Playwright ou um conjunto de testes completo com o Microsoft Playwright Testing, você pode, opcionalmente, especificar o número de trabalhos paralelos como um parâmetro de linha de comando.

1. Abra uma janela do terminal.

2. Insira o seguinte comando para executar o conjunto de testes do Playwright em navegadores remotos em seu workspace:

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

   Dependendo do tamanho do conjunto de testes, esse comando executa os testes em até 20 trabalhadores paralelos.

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

   Running 6 tests using 6 workers
       6 passed (18.2s)
   
   Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
   

Visual Studio Code

Para executar seu conjunto de testes do Playwright no Visual Studio Code com o Microsoft Playwright Testing:

1. Abra o modo de exibição do Gerenciador de Testes na barra de atividades.

2. Selecione o botão Executar testes para executar todos os testes com o Microsoft Playwright Testing.

   Quando você executa todos os testes, o perfil padrão é usado. Na etapa anterior, você configurou o perfil padrão para usar projetos da configuração de serviço.

   

   Dica

   Você ainda pode depurar seu código de teste ao executar seus testes em navegadores remotos usando o botão Depurar testes.

3. Como alternativa, você pode selecionar uma configuração de serviço específica na lista para executar apenas os testes para uma configuração específica do navegador.

   

4. Você pode exibir todos os resultados do teste na guia Resultados do teste.

Execute testes do Playwright em navegadores gerenciados pelo serviço e confira os resultados no portal unificado usando a configuração criada acima.

dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20

As configurações da execução de teste são definidas no arquivo .runsettings. Confira como usar opções de pacote de serviço

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: 59 s - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

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

   

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.

   

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.

   

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

   

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.

   

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.

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

   

Dica

Você pode usar os recursos do serviço Microsoft Playwright Testing de forma independente. Você pode publicar os resultados dos testes no portal sem usar o recurso de navegadores hospedados na nuvem e você também pode usar apenas os navegadores hospedados na nuvem para agilizar seu conjunto de testes sem publicar os resultados dos testes.

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.

Otimizar a configuração do trabalho paralelo

Depois que os testes estiverem funcionando sem problemas com o serviço, experimente variar o número de trabalhadores paralelos para determinar a configuração ideal que minimiza o tempo de conclusão do teste.

Com o Microsoft Playwright Testing, você pode executar com até 50 trabalhadores paralelos. Vários fatores influenciam a melhor configuração para seu projeto, como a CPU, a memória e os recursos de rede do computador cliente, a capacidade de manipulação de carga do aplicativo de destino e o tipo de ações executadas nos testes.

Você pode especificar o número de trabalhos paralelos na linha de comando da CLI do Playwright ou configurar a propriedade workers no arquivo de configuração do serviço Playwright.

Você poderá especificar o número de trabalhos paralelos na linha de comando da CLI do Playwright ou configurar a propriedade NumberOfTestWorkers no arquivo .runsettings.

Saiba mais sobre como determinar a configuração ideal para otimizar a conclusão do conjunto de testes.

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