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 Playwright com navegadores de nuvem altamente paralelos usando o Microsoft Playwright Testing Preview. 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 espaço de trabalho Microsoft Playwright Testing para executar seus testes Playwright em escala.

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.

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.

Criar um token de acesso para autenticação de serviço

O Microsoft Playwright Testing usa tokens de acesso para autorizar os usuários a executar testes Playwright com o serviço. Primeiro, você gera um token de acesso de serviço no portal do Playwright e, em seguida, armazena o valor em uma variável de ambiente.

Para gerar o token de acesso, execute as seguintes etapas:

1. No guia de configuração do espaço de trabalho, em Criar um token de acesso, selecione Gerar token.

   

2. Copie o token de acesso para o espaço de trabalho.

   Você precisa do valor do token de acesso para configurar seu ambiente em uma etapa posterior.

   

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

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

   

Configure seu ambiente

Para configurar seu ambiente, você precisa configurar as variáveis de ambiente PLAYWRIGHT_SERVICE_ACCESS_TOKEN e PLAYWRIGHT_SERVICE_URL com os valores obtidos 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_ACCESS_TOKEN={MY-ACCESS-TOKEN}
   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Substitua os espaços reservados de texto {MY-ACCESS-TOKEN} e {MY-REGION-ENDPOINT} pelos valores copiados anteriormente.

Cuidado

Certifique-se de não adicionar o arquivo .env ao repositório do código-fonte para evitar o vazamento do valor do token de acesso.

Adicionar um arquivo de configuração de serviço

Para executar os testes do Playwright no espaço de trabalho do Microsoft Playwright Testing, você precisa adicionar um arquivo de configuração de serviço ao lado do arquivo de configuração do Playwright. O arquivo de configuração do serviço faz referência às variáveis de ambiente para obter o ponto de extremidade do espaço de trabalho e seu token de acesso.

Para adicionar a configuração de serviço ao seu projeto:

1. Crie um novo arquivo playwright.service.config.ts ao lado do arquivo playwright.config.ts.

   Opcionalmente, use o arquivo playwright.service.config.ts no repositório de exemplo.

2. Adicione o seguinte conteúdo a ele:

   /*
   * This file enables Playwright client to connect to remote browsers.
   * It should be placed in the same directory as playwright.config.ts.
   */
   
   import { defineConfig } from '@playwright/test';
   import config from './playwright.config';
   import dotenv from 'dotenv';
   
   // Define environment on the dev box in .env file:
   //  .env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
   //    PLAYWRIGHT_SERVICE_URL=XXX
   
   // Define environment in your GitHub workflow spec.
   //  env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
   //    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
   //    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
   
   dotenv.config();
   
   // Name the test run if it's not named yet.
   process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();
   
   // Can be 'linux' or 'windows'.
   const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';
   
   export default defineConfig(config, {
     // Define more generous timeout for the service operation if necessary.
     // timeout: 60000,
     // expect: {
     //   timeout: 10000,
     // },
     workers: 20,
   
     // Enable screenshot testing and configure directory with expectations.
     // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
     ignoreSnapshots: false,
     snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
     
     use: {
       // Specify the service endpoint.
       connectOptions: {
         wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
           // Can be 'linux' or 'windows'.
           os,
           runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
         })}`,
         timeout: 30000,
         headers: {
           'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
         },
         // Allow service to access the localhost.
         exposeNetwork: '<loopback>'
       }
     },
     // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
     projects: config.projects? config.projects : [{}]
   });
   

3. Salve o arquivo.

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 Teste Playwright no Visual Studio Code.

Executar um único teste em escala

Com o Microsoft Playwright Testing, você é cobrado com base no número total de minutos de teste. Se você for um usuário iniciante ou começar a usar uma avaliação gratuita, poderá começar com a execução de um único teste em escala, em vez de seu conjunto de testes completo, para evitar esgotar seus minutos de teste gratuitos.

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 conjunto de testes, você pode incorrer em encargos adicionais para os minutos de teste além dos minutos de teste gratuitos alocados.

Executar um conjunto de testes completo em escala

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)
   
   To open last HTML report run:
   
       npx playwright show-report
   

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.

Exibir execuções de teste no portal do Playwright

Vá para o portal do Playwright para exibir os metadados de execução de teste e o log de atividades do seu espaço de trabalho.

O log de atividades lista para cada execução de teste os seguintes detalhes: o tempo total de conclusão do teste, o número de trabalhadores paralelos e o número de minutos de teste.

Exibir os resultados do teste no portal do Playwright

O Microsoft Playwright Testing já dá suporte à exibição dos resultados do teste no Portal do Playwright. Esse recurso só está disponível como um recurso somente de convite.

Importante

O recurso de relatório do serviço do Microsoft Playwright Testing é gratuito durante a versão prévia somente para convidados. No entanto, a funcionalidade existente de qualquer navegador hospedado na nuvem continua sendo cobrada de acordo com o plano de preços do Azure.

Depois de ter acesso à ferramenta de relatório, use as etapas a seguir para configurar seus testes.

1. Na home page do workspace, navegue até Configurações.

   

2. Em Configurações, selecione Geral e verifique se o relatório está Habilitado.

   

3. Verifique se o ambiente está configurado corretamente conforme mencionado na seção Configurar seu ambiente.

4. Instalar o pacote de relatórios

   Como o recurso atualmente não é público, você precisa realizar algumas etapas extras para instalar o pacote. Essas etapas não serão necessárias quando o recurso se tornar público.

   1. Crie um arquivo com o nome .npmrc no mesmo local do arquivo de configuração do Playwright.

   2. Adicione o conteúdo a seguir ao arquivo e salve-o.

      @microsoft:registry=https://npm.pkg.github.com
      

   3. Crie um token de acesso pessoal do GitHub seguindo estas etapas.

   Você precisa fornecer as permissões read:packages para o token. Esse token é chamada de PAT_TOKEN_PACKAGE no restante do artigo.

   1. Execute o comando a seguir no terminal, no local do arquivo de configuração do Playwright. Substitua PAT_TOKEN_PACKAGE pelo token gerado na etapa anterior.

          npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
      

   2. Atualize o arquivo package.json com o pacote.

       "dependencies": {
                  "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
          }
      

   3. Execute npm install para instalar o pacote.

5. Atualizar o arquivo Playwright.config

   Adicione o relator do Playwright Testing a Playwright.config.ts da mesma forma que você usa outros relatores.

   import { defineConfig } from '@playwright/test';
   
   export default defineConfig({
       reporter: [
       ['list'],
       ['json', {  outputFile: 'test-results.json' }],
       ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
       ],
   });
   

   Verifique se os artefatos estão habilitados na configuração para uma melhor solução de problemas.

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

6. Executar os testes do Playwright

   Você pode executar o comando npx playwright test e exibir os resultados e artefatos no portal do Playwright Testing.

   

Dica

Use o serviço do Microsoft Playwright Testing para publicar os resultados do teste no portal, seja qual for o recurso dos navegadores hospedados na nuvem.

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.

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