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

Neste guia de início rápido, você aprenderá a executar seus testes de Playwright com navegadores de nuvem altamente paralelos e solucionar problemas de 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 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 espaço de trabalho Microsoft Playwright Testing para executar seus testes Playwright em escala e 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.

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 executar seus testes de Playwright em escala em navegadores de nuvem, primeiro crie um espaço de trabalho Microsoft Playwright Testing no portal Playwright.

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.

   

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

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

• Direcione e autentique o 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 pacote pedirá que você o substitua.

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.

   

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 autenticação

Para executar os testes de Playwright no espaço de trabalho Microsoft Playwright Testing, você precisa autenticar o cliente Playwright onde você está executando os testes com o serviço. Esta pode ser a 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. 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

Habilitar 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'
  }

Execute seus testes em escala 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 Playwright Test Visual Studio Code.

Execute um único teste em escala

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ê é um usuário iniciante ou está começando com uma avaliação gratuita, você pode começar com a execução de um único teste em escala em vez de seu conjunto de testes completo para evitar esgotar seus limites de avaliação gratuita.

Nota

O recurso de relatório é habilitado por padrão para espaços de trabalho existentes. Isso está sendo implementado em etapas e levará alguns dias. Para evitar falhas, confirme se Rich diagnostics using reporting a configuração está ATIVADA para seu espaço de trabalho antes de continuar. Consulte Habilitar relatórios para 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 de Playwright com o Microsoft Playwright Testing:

Dramaturgo CLI

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

1. Abra uma janela do terminal.

2. Digite o seguinte comando para executar o teste Playwright em navegadores remotos em seu espaço de trabalho:

   Substitua o espaço reservado para 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 visualizar 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 de Playwright no Visual Studio Code with Microsoft Playwright Testing, selecione o arquivo de configuração de serviço no modo de exibição Test Explorer . Em seguida, selecione e execute o teste na lista de testes.

1. Instale a extensão Playwright Test Visual Studio Code.

2. Abra a vista Explorador de Testes na barra de atividades.

   O explorador de testes deteta automaticamente os testes do Playwright e a configuração do serviço no seu projeto.

   

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

   Observe que os perfis de execução de serviço são provenientes do playwright.service.config.ts arquivo 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 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 da configuração de serviço, o teste será executado em navegadores remotos em seu espaço de trabalho.

   

   Gorjeta

   Você ainda pode depurar seu código de teste quando você executa seus testes em navegadores remotos usando o botão Debug test .

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.

Atenção

Dependendo do tamanho do seu conjunto de testes, você pode incorrer em cobranças adicionais pelos minutos e resultados do teste além dos minutos de teste gratuitos e dos resultados do teste gratuitos.

Execute um conjunto de testes completo em escala

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

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

Dramaturgo CLI

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

1. Abra uma janela do terminal.

2. Digite o seguinte comando para executar seu conjunto de testes Playwright em navegadores remotos em seu espaço de trabalho:

   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 visualizar 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 pacote de teste Playwright no Visual Studio Code com o Microsoft Playwright Testing:

1. Abra a vista Explorador 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.

   

   Gorjeta

   Você ainda pode depurar seu código de teste quando você executa 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.

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

   

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.

   

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.

   

Gorjeta

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

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.

Otimize a configuração do trabalho paralelo

Quando 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 da máquina cliente, a capacidade de manipulação de carga do aplicativo de destino e o tipo de ações realizadas em seus testes.

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

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

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