Partilhar via

Início Rápido: configure teste contínuo de ponta a ponta com Workspaces do Playwright

Neste início rápido, você configura testes contínuos de ponta a ponta com Playwright Workspaces 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 de Playwright a um fluxo de trabalho de integração contínua (CI), como Ações do GitHub, Pipelines do Azure 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 Playwright em escala e ajuda você a solucionar problemas de testes facilmente com Playwright Workspaces.

Pré-requisitos

Obter o URL do ponto de extremidade da região de serviço

Na configuração do serviço, precisa fornecer o endereço 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 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é seu espaço de trabalho.

  2. Selecione a página Introdução .

    Captura de ecrã que mostra como navegar para a página Introdução.

  3. Em Adicionar ponto de extremidade de região em sua 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 do serviço em um segredo de fluxo de trabalho de CI:

    Nome secreto Valor
    PLAYWRIGHT_SERVICE_URL Cole o URL do ponto de extremidade copiado anteriormente.

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 { 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 do serviço permite acelerar pipelines de compilação executando testes em paralelo usando navegadores hospedados na nuvem.

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

Atualizar ficheiro package.json

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

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

Instalar pacote de serviço

No seu projeto, instale o pacote Playwright Workspaces.

dotnet add package Azure.Developer.Playwright.NUnit

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.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

Configurar a configuração do serviço

  1. Crie um novo arquivo PlaywrightServiceNUnitSetup.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.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
    }
}
  1. Salve e confirme o arquivo em seu repositório de código-fonte.

Configurar a autenticação

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

O serviço oferece dois métodos de autenticação: ID do Microsoft Entra e Tokens de Acesso. É altamente recomendável usar o Microsoft Entra ID para autenticar seus pipelines.

Configurar a autenticação usando o Microsoft Entra ID

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

Pré-requisitos

Opção 1: Aplicação Microsoft Entra

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

Criar segredos do GitHub
  • Adicione os valores obtidos na etapa anterior como segredos ao seu repositório GitHub. Consulte Configurar o Segredo de Ação do GitHub. Essas variáveis são usadas no fluxo de trabalho GitHub Action nas etapas subsequentes.
Segredo do GitHub Origem (Aplicação Microsoft Entra ou Identidade Gerida)
AZURE_CLIENT_ID ID do Cliente
AZURE_SUBSCRIPTION_ID ID da subscrição
AZURE_TENANT_ID ID do diretório (inquilino)

Observação

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

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 estiver a utilizar tokens de acesso, consulte Como gerir tokens de acesso

Você pode gerar um token de acesso a partir do seu espaço de trabalho 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, habilite a autenticação baseada em token de acesso.

  2. Configure a 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 de Ações do GitHub ou no arquivo yaml do Azure Pipeline.

Nome secreto Valor
PLAYWRIGHT_SERVICE_ACCESS_TOKEN Cole o valor do Token de Acesso criado anteriormente.

Atualizar a definição do fluxo de trabalho

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. Abra a definição do fluxo de trabalho de CI.

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

    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.

    
  # 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

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

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

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

    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.

    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

  1. Salve e confirme suas alterações.

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

Atenção

Com o Playwright Workspaces, você é cobrado com base no número total de minutos de teste consumidos. Se você é um usuário iniciante ou está começando com uma avaliação gratuita, você pode começar executando 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 ú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

Ver execuções de teste e resultados

O dramaturgo pode coletar artefatos de teste ricos, como logs, vestígios e capturas de tela em cada execução de teste. Para saber como exibir artefatos de teste no seu pipeline de CI, consulte a documentação do Playwright.

Conteúdo relacionado

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

  • Last updated on