Aracılığıyla paylaş

Hızlı Başlangıç: Playwright Çalışma Alanları ile sürekli uçtan uca test ayarlama

Bu hızlı başlangıçta, web uygulamanızın her kod işleme işlemiyle farklı tarayıcılar ve işletim sistemlerinde doğru şekilde çalıştığını doğrulamak ve hizmet panosunu kullanarak testlerde kolayca sorun gidermek için Playwright Çalışma Alanları ile sürekli uçtan uca test ayarlarsınız. Playwright testlerinizi GitHub Actions, Azure Pipelines veya diğer CI platformları gibi sürekli tümleştirme (CI) iş akışına eklemeyi öğrenin.

Bu hızlı başlangıcı tamamladıktan sonra, Playwright test paketinizi büyük ölçekte çalıştıran ve Playwright Çalışma Alanları ile test sorunlarını kolayca gidermenize yardımcı olan bir CI iş akışınız olur.

Önkoşullar

Hizmet bölgesi uç noktası URL'sini alma

Hizmet yapılandırmasında bölgeye özgü hizmet uç noktasını sağlamanız gerekir. Uç nokta, çalışma alanını oluştururken seçtiğiniz Azure bölgesine bağlıdır.

Hizmet uç noktası URL'sini almak ve ci iş akışı gizli dizisi olarak depolamak için aşağıdaki adımları gerçekleştirin:

  1. Azure hesabınızla Azure portalında oturum açın ve çalışma alanınıza gidin.

  2. Başlarken sayfasını seçin.

    Başlarken sayfasına nasıl gidildiğini gösteren ekran görüntüsü.

  3. Kurulumunuzda bölge uç noktası ekle bölümünde hizmet uç noktası URL'sini kopyalayın.

    Uç nokta URL'si, çalışma alanını oluştururken seçtiğiniz Azure bölgesiyle eşleşir.

  4. Hizmet uç noktası URL'sini bir CI iş akışı gizli dizisinde depolayın:

    Gizli isim Değer
    PLAYWRIGHT_SERVICE_URL Daha önce kopyaladığınız uç nokta URL'sini yapıştırın.

Hizmet yapılandırma dosyası ekleme

Hizmetle çalışacak şekilde yapılandırılmış Playwright testleriniz yoksa deponuza bir hizmet yapılandırma dosyası ekleyin. Sonraki adımda, playwright CLI'da bu hizmet yapılandırma dosyasını belirtirsiniz.

  1. playwright.service.config.ts dosyasının yanına playwright.config.ts dosyasıyla birlikte yeni bir dosya oluşturun.

    İsteğe bağlı olarak, örnek depodaki playwright.service.config.tsdosyayı kullanın.

  2. Aşağıdaki içeriği ekleyin:

    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(),
  })
);

    Varsayılan olarak hizmet yapılandırması, bulutta barındırılan tarayıcıları kullanarak testleri paralel olarak çalıştırarak derleme işlem hatlarını hızlandırmanızı sağlar.

  3. Dosyayı kaydedin ve kaynak kod deponuza işleyin.

package.json dosyasını güncelleştirme

package.json Bölümünde Playwright Workspaces paketiyle ilgili ayrıntıları eklemek için deponuzdaki devDependencies dosyayı güncelleştirin.

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

Hizmet paketini yükleme

Projenizde Playwright Çalışma Alanları paketini yükleyin.

dotnet add package Azure.Developer.Playwright.NUnit

Bu komut, bölüme hizmet paketi ayrıntılarını csproj ekleyerek projenizin ItemGroup dosyasını güncelleştirir. Bu değişiklikleri işlemeyi unutmayın.

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

Hizmet yapılandırmasını ayarlama

  1. Projenizin kök dizininde yeni bir dosya PlaywrightServiceNUnitSetup.cs oluşturun. Bu dosya, istemcinizin hizmetle kimlik doğrulamasını kolaylaştırır.
  2. Aşağıdaki içeriği ekleyin:
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. Dosyayı kaydedin ve kaynak kod deponuza işleyin.

Kimlik doğrulaması kurulumu

Tarayıcıların testleri çalıştırmasını sağlamak için Playwright testlerini çalıştıran CI makinesinin Playwright Workspaces hizmetiyle kimlik doğrulaması yapması gerekir.

Hizmet iki kimlik doğrulama yöntemi sunar: Microsoft Entra Id ve Access Tokens. İşlem hatlarınızın kimliğini doğrulamak için Microsoft Entra Id kullanmanızı kesinlikle öneririz.

Microsoft Entra Id kullanarak kimlik doğrulamayı ayarlama

GitHub Actions kullanıyorsanız, GitHub OpenID Connect kullanarak hizmete bağlanabilirsiniz. Tümleştirmeyi ayarlamak için adımları izleyin:

Önkoşullar

Seçenek 1: Microsoft Entra uygulaması

Seçenek 2: Kullanıcı tarafından atanan yönetilen kimlik

GitHub sırları oluştur
  • Önceki adımda aldığınız değerleri GitHub deponuza gizli dizi olarak ekleyin. Bakınız GitHub Eylem Gizli Anahtarını ayarlama. Bu değişkenler sonraki adımlarda GitHub Action iş akışında kullanılır.
GitHub Sırrı Kaynak (Microsoft Entra Uygulaması veya Yönetilen Kimlik)
AZURE_CLIENT_ID Müşteri Kimliği
AZURE_SUBSCRIPTION_ID Abonelik Kimliği
AZURE_TENANT_ID Dizin (Kiracı) Kimliği

Uyarı

Gelişmiş güvenlik için, hassas değerleri doğrudan iş akışı dosyanıza eklemek yerine depolamak için GitHub Gizli Dizileri'nin kullanılması kesinlikle önerilir.

Erişim belirteçlerini kullanarak kimlik doğrulamayı ayarlama

Dikkat

Hizmette kimlik doğrulaması için Microsoft Entra Id kullanmanızı kesinlikle öneririz. Erişim belirteçleri kullanıyorsanız bkz . Erişim belirteçlerini yönetme

Playwright çalışma alanınızdan bir erişim belirteci oluşturabilir ve bunu kurulumunuzda kullanabilirsiniz. Ancak, gelişmiş güvenliği nedeniyle kimlik doğrulaması için Microsoft Entra Id'yi kesinlikle öneririz. Erişim belirteçleri kullanışlı olsa da uzun ömürlü parolalar gibi çalışır ve güvenliğin tehlikeye atılmasına daha duyarlıdır.

  1. Erişim belirteçleri kullanılarak kimlik doğrulaması varsayılan olarak devre dışı bırakılır. Kullanmak için Erişim belirteci tabanlı kimlik doğrulamasını etkinleştirin.

  2. Erişim belirteçlerini kullanarak kimlik doğrulamayı ayarlayın.

  3. Erişim belirtecini bir CI iş akışı gizli dizisinde depolayın ve GitHub Actions iş akışında veya Azure Pipeline yaml dosyasında kullanın.

Gizli isim Değer
PLAYWRIGHT_SERVICE_ACCESS_TOKEN Daha önce oluşturduğunuz Erişim Belirteci değerini yapıştırın.

İş akışı tanımını güncelleştirme

Playwright testlerinizi Playwright CLI ile çalıştırmak için CI iş akışı tanımını güncelleştirin. Hizmet yapılandırma dosyasını Playwright CLI için giriş parametresi olarak geçirin. Ortam değişkenlerini belirterek ortamınızı yapılandırabilirsiniz.

  1. CI iş akışı tanımını açın.

  2. Playwright çalışma alanlarında Playwright testlerinizi çalıştırmak için aşağıdaki adımları ekleyin.

    Aşağıdaki adımlarda GitHub Actions veya Azure Pipelines için iş akışı değişiklikleri açıklanmaktadır. Benzer şekilde, Playwright CLI'yi diğer CI platformlarında kullanarak Playwright testlerinizi çalıştırabilirsiniz.

    
  # 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

Playwright NUnit CLI ile Playwright testlerinizi çalıştırmak için CI iş akışı tanımını güncelleştirin. Ortam değişkenlerini belirterek ortamınızı yapılandırabilirsiniz.

  1. CI iş akışı tanımını açın.

  2. Playwright çalışma alanlarında Playwright testlerinizi çalıştırmak için aşağıdaki adımları ekleyin.

    Aşağıdaki adımlarda GitHub Actions veya Azure Pipelines için iş akışı değişiklikleri açıklanmaktadır. Benzer şekilde, Playwright CLI'yi diğer CI platformlarında kullanarak Playwright testlerinizi çalıştırabilirsiniz.

    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. Değişikliklerinizi kaydedin ve işleyin.

    CI iş akışı tetiklendiğinde Playwright testleriniz 20 paralel çalışan arasında bulutta barındırılan tarayıcılarda Playwright çalışma alanınızda çalışır. Sonuçlar hizmette yayımlanır ve Azure portalında görüntülenebilir.

Dikkat

Playwright Çalışma Alanları ile tüketilen toplam test dakikası sayısına göre ücretlendirilirsiniz. İlk kez kullanıcıysanız veya ücretsiz deneme sürümünü kullanmaya başladıysanız, ücretsiz test dakikalarınızı tüketmemek için tam test paketiniz yerine uygun ölçekte tek bir test çalıştırmaya başlayabilirsiniz.

Testin başarıyla çalıştığını doğruladıktan sonra hizmetle daha fazla test çalıştırarak test yükünü kademeli olarak artırabilirsiniz.

Aşağıdaki komut satırını kullanarak hizmetle tek bir test çalıştırabilirsiniz:

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

Test çalıştırmalarını ve sonuçlarını görüntüleme

Playwright her test çalıştırması üzerinde günlükler, izlemeler ve ekran görüntüleri gibi zengin test yapıtları toplayabilir. CI işlem hattınızdaki test yapıtlarını görüntülemeyi öğrenmek için Playwright belgelerine bakın.

İlgili içerik

Playwright testlerinizi bulutta barındırılan tarayıcılarda büyük ölçekte çalıştırmak için sürekli uçtan uca test iş akışını başarıyla ayarladınız.

  • Last updated on