Início Rápido: Configurar testes contínuos de ponta a ponta com Workspaces de Playwright

Neste início rápido, você configura testes contínuos de ponta a ponta com Workspaces do Playwright para validar se seu aplicativo Web é executado corretamente em diferentes navegadores e sistemas operacionais com cada confirmação de código e solucionar problemas de testes facilmente usando o painel de serviço. Saiba como adicionar seus testes do Playwright a um fluxo de trabalho de CI (integração contínua), como GitHub Actions, Azure Pipelines ou outras plataformas de CI.

Depois de concluir este início rápido, você tem um fluxo de trabalho de CI que executa seu conjunto de testes do Playwright em escala e ajuda a solucionar problemas de testes facilmente com Workspaces do Playwright.

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.

• Um Workspace do Playwright. Conclua o início rápido: execute testes do Playwright em escala e crie um espaço de trabalho.

Ações do GitHub

• Uma conta do GitHub. Se você não tiver uma conta do GitHub, poderá criar uma gratuitamente.
• Um repositório GitHub que contém suas especificações de teste do Playwright e o fluxo de trabalho do GitHub Actions. Para criar um repositório, consulte Criando um novo repositório.
• Um fluxo de trabalho do GitHub Actions. Se você precisar de ajuda para começar a usar o GitHub Actions, confira criar seu primeiro fluxo de trabalho
• Configure a autenticação do GitHub Actions para o Azure. Consulte Usar o GitHub Actions para se conectar ao Azure.

Azure Pipelines

• Uma organização e um projeto do Azure DevOps. Se você não tem uma organização do Azure DevOps, você pode criar uma gratuitamente.
• Uma definição de pipeline. Se você precisar de ajuda para começar a usar o Azure Pipelines, confira criar seu primeiro pipeline.
• Conexão do Serviço do Azure Resource Manager para autenticar com segurança no serviço do Azure Pipelines, consulte Conexão de serviço do Azure Resource Manager

Obter a URL do 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 de serviço e armazená-la como um segredo de fluxo de trabalho de CI, 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 ponto de extremidade de região na configuração, copie a URL do ponto de extremidade de serviço.

   A URL do ponto de extremidade corresponde à região do Azure que você selecionou ao criar o espaço de trabalho.

4. Armazene a URL do ponto de extremidade de serviço em um segredo de fluxo de trabalho de CI:

   Nome do segredo	Valor
   PLAYWRIGHT_SERVICE_URL	Cole a URL do ponto de extremidade copiada anteriormente.

Adicionar arquivo de configuração de serviço

Se você não tiver testes do Playwright configurados para serem executados com o serviço, adicione um arquivo de configuração de serviço ao seu 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 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:

   import { defineConfig } from '@playwright/test';
   import { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
   import { DefaultAzureCredential } from '@azure/identity';
   import config from './playwright.config';
   
   /* Learn more about service configuration at https://aka.ms/pww/docs/config */
   export default defineConfig(
     config,
     createAzurePlaywrightConfig(config, {
       exposeNetwork: '<loopback>',
       connectTimeout: 3 * 60 * 1000, // 3 minutes
       os: ServiceOS.LINUX,
       credential: new DefaultAzureCredential(),
     })
   );
   

   Por padrão, a configuração de serviço permite acelerar os pipelines de build executando testes em paralelo usando navegadores hospedados na nuvem.

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

Atualizar o arquivo package.json

Atualize o arquivo package.json em seu repositório para adicionar detalhes sobre o pacote Workspaces do Playwright na seção devDependencies.

"devDependencies": {
    "@azure/playwright": "latest"
}

Instalar o pacote de serviço

Em seu projeto, instale o pacote Workspaces do Playwright.

dotnet add package Azure.Developer.Playwright.NUnit

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

  <ItemGroup>
    <PackageReference Include="Azure.Developer.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

Definir a configuração do serviço

1. Crie um novo arquivo PlaywrightServiceNUnitSetup.cs no diretório raiz do projeto. Esse arquivo facilita a autenticação do seu cliente com o serviço.
2. Adicione o seguinte conteúdo a ele:

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;
using System.Runtime.InteropServices;
using System;

namespace PlaywrightService.SampleTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential(),
    )
    {
        // no-op
    }
}

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

Configurar a autenticação

A máquina de CI que executa testes de Playwright deve se autenticar com o serviço Workspaces do Playwright para fazer com que os navegadores executem os testes.

O serviço oferece dois métodos de autenticação: Microsoft Entra ID e Tokens de Acesso. Recomendamos fortemente usar o Microsoft Entra ID para autenticar seus pipelines.

Configurar a autenticação usando o Microsoft Entra ID

Ações do GitHub

Se estiver usando o GitHub Actions, você pode se conectar ao serviço usando o GitHub OpenID Connect. Siga as etapas para configurar a integração:

Pré-requisitos

Opção 1: Aplicativo Microsoft Entra

• Crie um aplicativo do Microsoft Entra com uma entidade de serviço pelo portal do Azure, CLI do Azure ou Azure PowerShell.

• Copie os valores para ID do cliente, ID da assinatura e ID do diretório (locatário) para usar posteriormente no seu fluxo de trabalho do GitHub Actions.

• Atribua a função Owner ou Contributor à entidade de serviço criada na etapa anterior. Essas funções devem ser atribuídas no workspace do Playwright. Para mais detalhes, veja como gerenciar o acesso.

• Configure uma credencial de identidade federada em um aplicativo Microsoft Entra para confiar em tokens emitidos pelo GitHub Actions para seu repositório GitHub.

Opção 2: Identidade gerenciada atribuída pelo usuário

• Crie uma identidade gerenciada atribuída pelo usuário.

• Copie os valores para ID do cliente, ID da assinatura e ID do diretório (locatário) para usar posteriormente no seu fluxo de trabalho do GitHub Actions.

• Atribua a função Owner ou Contributor à identidade gerenciada atribuída pelo usuário criada na etapa anterior. Essas funções devem ser atribuídas no workspace do Playwright. Para mais detalhes, veja como gerenciar o acesso.

• Configure uma credencial de identidade federada em uma identidade gerenciada atribuída pelo usuário para confiar em tokens emitidos pelo GitHub Actions para seu repositório GitHub.

Criar segredos do GitHub

• Adicione os valores que você obteve na etapa anterior como segredos ao seu repositório GitHub. Veja configurar o GitHub Action Secret. Essas variáveis ​​são usadas no fluxo de trabalho do GitHub Action em etapas subsequentes.

Segredo do GitHub	Origem (Aplicativo do Microsoft Entra ou Identidade Gerenciada)
AZURE_CLIENT_ID	ID do cliente
AZURE_SUBSCRIPTION_ID	ID da assinatura
AZURE_TENANT_ID	ID do diretório (locatário)

Observação

Para maior segurança, é altamente recomendável usar o GitHub Secrets para armazenar valores confidenciais em vez de incluí-los diretamente no seu arquivo de fluxo de trabalho.

Azure Pipelines

Se estiver usando o Azure Pipelines, você poderá se conectar ao serviço usando Conexões de Serviço. Siga as etapas para configurar a integração:

• Crie um registro de aplicativo com federação de identidade de carga de trabalho. Selecione a assinatura e o grupo de recursos associados ao workspace do Playwright. Normalmente, o grupo de recursos tem o mesmo nome do workspace do Playwright.

• Use essa conexão de serviço no arquivo yaml do Azure Pipeline, conforme mostrado nas etapas subsequentes.

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, veja Como gerenciar 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.

3. Armazene o token de acesso em um segredo de fluxo de trabalho de CI e use-o no fluxo de trabalho do GitHub Actions ou no arquivo yaml do Azure Pipeline.

Nome do segredo	Valor
PLAYWRIGHT_SERVICE_ACCESS_TOKEN	Cole o valor do Token de Acesso que você criou anteriormente.

Atualizar a definição de fluxo de trabalho

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

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

2. Adicione as etapas a seguir para executar seus testes de Playwright nos Workspaces do Playwright.

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

   Ações do GitHub

   
     # 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 (Playwright Workspaces)
     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 Playwright Workspaces
               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
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN) # Not recommended, use Microsoft Entra ID authentication. 
   
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         npx playwright test -c playwright.service.config.ts --workers=20
     addSpnToEnvironment: true
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

Atualize a definição de fluxo de trabalho de CI para executar seus testes de Playwright com a CLI do Playwright NUnit. Configure seu ambiente especificando variáveis de ambiente.

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

2. Adicione as etapas a seguir para executar seus testes de Playwright nos Workspaces do Playwright.

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

   Ações do GitHub

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

   Azure Pipelines

   - task: UseDotNet@2
     inputs:
       packageType: 'sdk'
       version: '8.x'
       installationPath: $(Agent.ToolsDirectory)/dotnet
   
   - checkout: self
   
   - script: dotnet restore
     displayName: 'Restore dependencies'
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - script: dotnet build --no-restore
     displayName: 'Build'
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN) # Not recommended, use Microsoft Entra ID authentication. 
   
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service using Microsoft Entra ID.
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         dotnet test -- NUnit.NumberOfTestWorkers=20
     addSpnToEnvironment: true
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

3. Salve e confirme suas alterações.

   Quando o fluxo de trabalho de CI é disparado, os testes do Playwright são executados no workspace do Playwright em navegadores hospedados na nuvem, em 20 trabalhos paralelos. Os resultados são publicados no serviço e podem ser exibidos no portal do Azure.

Cuidado

Com Workspaces do Playwright, você é cobrado com base no número total de minutos de teste consumidos. 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.

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

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

Exibir resultados e execuções de teste

O Playwright pode coletar artefatos de teste avançados, como logs, rastreamentos e capturas de tela em cada execução de teste. Para saber como exibir artefatos de teste em seu pipeline de CI, consulte a documentação do Playwright.

Conteúdo relacionado

Você configurou com êxito um fluxo de trabalho de teste de ponta a ponta contínuo para executar seus testes do Playwright em escala em navegadores hospedados na nuvem.

• Conceder aos usuários acesso ao workspace

• Gerenciar seus workspaces