Início Rápido: Executar testes de ponta a ponta em escala com workspaces do Playwright

Neste início rápido, você aprenderá a executar seus testes de Playwright com navegadores de nuvem altamente paralelos usando workspaces do Playwright. Use a infraestrutura de nuvem para validar seu aplicativo em vários navegadores, dispositivos e sistemas operacionais.

Depois de concluir este início rápido, você terá um workspace do Playwright para executar seus testes do Playwright em escala.

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

Criar um espaço de trabalho

Para começar a executar seus testes do Playwright em navegadores de nuvem, primeiro você precisa criar um workspace do Playwright.

1. Entre no portal do Azure.

2. Selecione o botão de menu no canto superior esquerdo do portal e selecione o recurso Criar um recurso.

   

3. Insira Workspaces do Playwright na caixa de pesquisa.

4. Selecione o cartão Workspaces do Playwright e, em seguida, selecione Criar.

   

5. Forneça as seguintes informações para configurar um novo espaço de trabalho do Playwright:

   Campo	Descrição
   Subscrição	Selecione a assinatura do Azure que você deseja usar para este espaço de trabalho do Playwright.
   Grupo de recursos	Selecione um grupo de recursos existente. Ou selecione Criar e insira um nome exclusivo para o novo grupo de recursos.
   Nome	Insira um nome exclusivo para identificar seu espaço de trabalho. O nome só pode consistir em caracteres alfanuméricos e hifens e ter um comprimento entre 3 e 24 caracteres.
   Localidade	Selecione um local geográfico para hospedar seu espaço de trabalho. Esse local também determina onde os resultados da execução do teste são armazenados.

   Observação

   Você também pode configurar mais detalhes na guia Marcas. As marcas são pares nome/valor que permitem categorizar recursos e exibir a cobrança consolidada por meio da aplicação da mesma marca a vários recursos e grupos de recursos.

6. Depois de concluir a configuração do recurso, clique em Examinar + Criar.

7. Revise todas as definições de configuração e selecione Criar para iniciar a implantação do espaço de trabalho do Playwright.

   Quando o processo for finalizado, será exibida uma mensagem de êxito da implantação.

8. Para ver o novo ambiente de trabalho, selecione Ir para o recurso.

   

Instalar o pacote Workspaces do Playwright

Para usar o serviço, instale o pacote Workspaces do Playwright.

npm init @azure/playwright@latest

Isso gera um arquivo playwright.service.config.ts que serve para direcionar e autenticar o Playwright nos Workspaces do Playwright.

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

Para usar o serviço, instale o pacote Workspaces do Playwright.

dotnet add package Azure.Developer.Playwright.NUnit

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

Definir a configuração do serviço

Crie um arquivo PlaywrightServiceSetup.cs em seu projeto com o conteúdo a seguir.

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;

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

[SetUpFixture]
public class PlaywrightServiceNUnitSetup  : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential()
    ) 
    {}
}

Observação

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

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. 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 do workspace do Playwright 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. Configurar 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

Executar seus testes em escala com Workspaces do Playwright

Agora você preparou a configuração para executar seus testes de Playwright na nuvem com Workspaces do Playwright. 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 Workspaces de Playwright, você é cobrado com base no número total de minutos de teste. Se você for um usuário iniciante ou estiver começando com uma avaliação gratuita, poderá começar executando um único teste em vez de todo o conjunto de testes, para evitar esgotar os limites da avaliação gratuita.

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 Workspaces do Playwright:

Playwright CLI

Para usar a CLI do Playwright para executar seus testes com Workspaces do Playwright, 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
   

Código do Visual Studio

Para executar um único teste de Playwright no Visual Studio Code com Workspaces de Playwright, selecione o arquivo de configuração de serviço no modo de exibição 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 Workspaces de Playwright, 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 Workspaces de Playwright:

Playwright CLI

Ao executar vários testes de Playwright ou um conjunto de testes completo com Workspaces do Playwright, 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)
   

Código do Visual Studio

Para executar seu conjunto de testes do Playwright no Visual Studio Code com Workspaces de Playwright:

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 Workspaces do Playwright.

   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 usando a configuração que você criou acima.

dotnet test -- NUnit.NumberOfTestWorkers=20

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

Starting test execution, please wait...

A total of 100 test files matched the specified pattern.

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.

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 Workspaces de Playwright, 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 êxito um Workspace do Playwright no portal do Azure e executou seus testes de 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