Guia de início rápido: configure testes contínuos de ponta a ponta com o Microsoft Playwright Testing Preview

Adicionar arquivo de configuração de serviço

Se você não tiver testes de Playwright configurados para serem executados com o serviço, adicione um arquivo de configuração de serviço ao repositório. Na próxima etapa, especifique esse arquivo de configuração de serviço na CLI do Playwright.

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

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

2. Adicione o seguinte conteúdo a ele:

   import { defineConfig } from '@playwright/test';
   import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
   import config from './playwright.config';
   
   /* Learn more about service configuration at https://aka.ms/mpt/config */
   export default defineConfig(
     config,
     getServiceConfig(config, {
       exposeNetwork: '<loopback>',
       timeout: 30000,
       os: ServiceOS.LINUX,
       useCloudHostedBrowsers: true
     }),
     {
       /* 
       Playwright Testing service reporter is added by default.
       This will override any reporter options specified in the base playwright config.
       If you are using more reporters, please update your configuration accordingly.
       */
       reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
     }
   );
   

   Por padrão, a configuração do serviço permite:

   • Acelere os pipelines de compilação executando testes em paralelo usando navegadores hospedados na nuvem.
   • Simplifique a solução de problemas com fácil acesso aos resultados de testes e artefatos publicados no serviço.

   No entanto, você pode optar por usar um desses recursos ou ambos. Consulte Como usar os recursos de serviço e atualizar o arquivo de configuração do serviço de acordo com suas necessidades.

3. Salve e confirme o arquivo em seu repositório de código-fonte.

Atualizar ficheiro package.json

Atualize o arquivo package.json no seu repositório para adicionar detalhes sobre o pacote de serviço package.json Microsoft Playwright Testing na seção .

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.6"
}

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

Configurar a configuração do serviço

1. Crie um novo arquivo PlaywrightServiceSetup.cs no diretório raiz do seu projeto. Este ficheiro facilita a autenticação do seu cliente com o serviço.

2. Adicione o seguinte conteúdo a ele:

   using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;
   using NUnit.Framework;
   
   namespace PlaywrightTests; // Remember to change this as per your project namespace
   
   [SetUpFixture]
   public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };
   

3. Salve e confirme o arquivo em seu repositório de código-fonte.

Instalar pacote de serviço

No seu projeto, instale o pacote Microsoft Playwright Testing.

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

Este comando atualiza o arquivo do csproj seu projeto adicionando os detalhes do pacote de serviço à ItemGroup seção . Lembre-se de cometer essas alterações.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
  </ItemGroup>

Adicione ou atualize .runsettings o arquivo para seu projeto.

Se ainda não configurou os seus testes de Playwright para serem executados com o serviço, adicione o ficheiro .runsettings ao repositório. Na próxima etapa, especifique esse arquivo de configuração de serviço na CLI do Playwright.

1. Crie um novo .runsettings arquivo.

   Opcionalmente, use o .runsettings ficheiro no repositório de exemplo.

2. Adicione o seguinte conteúdo a ele:

   <?xml version="1.0" encoding="utf-8"?>
   <RunSettings>
       <TestRunParameters>
           <!-- The below parameters are optional -->
           <Parameter name="Os" value="linux" />
           <!--<Parameter name="RunId" value="sample-run-id1" />-->
           <Parameter name="ServiceAuthType" value="EntraId" />
           <Parameter name="UseCloudHostedBrowsers" value="true" />
           <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" />
           <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />-->
           <Parameter name="EnableGitHubSummary" value="false" />
           <!--<Parameter name="ExposeNetwork" value="*" />-->
       </TestRunParameters>
     <!-- NUnit adapter -->  
     <NUnit>
       <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files -->
       <NumberOfTestWorkers>10</NumberOfTestWorkers>
     </NUnit>
     <!-- General run configuration -->
     <RunConfiguration>
       <EnvironmentVariables>
         <!-- For debugging selectors, it's recommend to set the following environment variable -->
           <!--<DEBUG>pw:api*</DEBUG>--> 
       </EnvironmentVariables>
     </RunConfiguration>
     <!-- Playwright -->  
     <Playwright>
       <BrowserName>chromium</BrowserName>
       <ExpectTimeout>5000</ExpectTimeout>
       <LaunchOptions>
         <Headless>false</Headless>
         <!--Channel>msedge</Channel-->
       </LaunchOptions>
     </Playwright>
       <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>
   

   As configurações neste arquivo permitem que você:

   • Acelere os pipelines de compilação executando testes em paralelo usando navegadores hospedados na nuvem.
   • Publique resultados de teste e artefatos no serviço para uma solução de problemas mais rápida.

   No entanto, você pode optar por usar um desses recursos ou ambos. Consulte Como usar os recursos de serviço e atualizar o arquivo de configuração do serviço de acordo com suas necessidades.

3. Salve e confirme o arquivo em seu repositório de código-fonte.

Ativar artefatos na configuração do Playwright

Configure o Playwright para capturar artefatos como capturas de tela, vídeos e rastreamentos.

• Para capturas de tela, consulte capturar capturas de tela
• Para vídeos, consulte gravar vídeos para seus testes
• Para rastreamentos, consulte registro de um rastreamento

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

Atualize a definição do fluxo de trabalho de CI para executar seus testes de Playwright com a CLI do Playwright. Passe o ficheiro de configuração de serviço como um parâmetro de entrada para a CLI do Playwright. Você configura seu ambiente especificando variáveis de ambiente.

1. Abrir a definição do fluxo de trabalho de CI

2. Adicione as seguintes etapas para executar seus testes de Playwright no Microsoft Playwright Testing.

   As etapas a seguir descrevem as alterações de fluxo de trabalho para Ações do GitHub ou Pipelines do Azure. Da mesma forma, você pode executar seus testes de Playwright usando a CLI Playwright em outras plataformas de CI.

   • Ações do GitHub
   • Azure Pipelines

   
     # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
     # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 
     name: Playwright Tests (Microsoft Playwright Testing)
     on:
       push:
         branches: [main, master]
       pull_request:
         branches: [main, master]
   
     permissions: # Required when using Microsoft Entra ID to authenticate
       id-token: write
       contents: read
   
     jobs:
       test:
         timeout-minutes: 60
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v4
   
           - name: Login to Azure with AzPowershell (enableAzPSSession true)
             uses: azure/login@v2
             with:
               client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps
               tenant-id: ${{ secrets.AZURE_TENANT_ID }}
               subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
               enable-AzPSSession: true
   
           - name: Install dependencies
             working-directory: path/to/playwright/folder # update accordingly
             run: npm ci
   
           - name: Run Playwright tests
             working-directory: path/to/playwright/folder # update accordingly
             env:
               # Regional endpoint for Microsoft Playwright Testing
               PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
               # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
             run: npx playwright test -c playwright.service.config.ts --workers=20
   
           - name: Upload Playwright report
             uses: actions/upload-artifact@v3
             if: always()
             with:
               name: playwright-report
               path: path/to/playwright/folder/playwright-report/ # update accordingly
               retention-days: 10
   

Atualize a definição do fluxo de trabalho de CI para executar seus testes de Playwright com a CLI do Playwright NUnit. Passe o .runsettings arquivo como um parâmetro de entrada para a CLI do Playwright. Você configura seu ambiente especificando variáveis de ambiente.

1. Abra a definição do fluxo de trabalho de CI.

2. Adicione as seguintes etapas para executar seus testes de Playwright no Microsoft Playwright Testing.

   As etapas a seguir descrevem as alterações de fluxo de trabalho para Ações do GitHub ou Pipelines do Azure. Da mesma forma, você pode executar seus testes de Playwright usando a CLI Playwright em outras plataformas de CI.

   • Ações do GitHub
   • Azure Pipelines

   on:
     push:
       branches: [ main, master ]
     pull_request:
       branches: [ main, master ]
   permissions: # Required when using AuthType as EntraId
     id-token: write
     contents: read
   jobs:
     test:
       timeout-minutes: 60
       runs-on: ubuntu-latest
         steps:
         - uses: actions/checkout@v4
       # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
       # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 
   
         - name: Login to Azure with AzPowershell (enableAzPSSession true) 
           uses: azure/login@v2 
           with: 
             client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps
             tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
             subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
             enable-AzPSSession: true 
   
         - name: Setup .NET
           uses: actions/setup-dotnet@v4
           with:
             dotnet-version: 8.0.x
   
         - name: Restore dependencies
           run: dotnet restore
           working-directory: path/to/playwright/folder # update accordingly
   
         - name: Build
           run: dotnet build --no-restore
           working-directory: path/to/playwright/folder # update accordingly
   
         - name: Run Playwright tests
             working-directory: path/to/playwright/folder # update accordingly
           env:
             # Regional endpoint for Microsoft Playwright Testing
             PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
             # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
           run: dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20
   
         - name: Upload Playwright report
           uses: actions/upload-artifact@v3
           if: always()
           with:
             name: playwright-report
             path: path/to/playwright/folder/playwright-report/ # update accordingly
             retention-days: 10
   

Você pode executar um único teste com o serviço usando a seguinte linha de comando:

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

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 compilaçã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.
   • Veja logs de erros detalhados, etapas de teste e artefatos anexados, como capturas de tela ou vídeos.
   • Navegue diretamente para 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, capturas instantâneas do DOM, atividade de rede, erros e saída do console em cada etapa.

   

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 compilaçã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:

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

   

4. 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, capturas instantâneas do DOM, atividade de rede, erros e saída do console em cada etapa.