Mulai cepat: Menyiapkan pengujian end-to-end berkelanjutan dengan Playwright Workspaces

Dalam mulai cepat ini, Anda menyiapkan pengujian end-to-end berkelanjutan dengan Playwright Workspaces untuk memvalidasi bahwa aplikasi web Anda berjalan dengan benar di berbagai browser dan sistem operasi dengan setiap penerapan kode dan memecahkan masalah pengujian dengan mudah menggunakan dasbor layanan. Pelajari cara menambahkan pengujian Playwright Anda ke alur kerja integrasi berkelanjutan (CI), seperti GitHub Actions, Azure Pipelines, atau platform CI lainnya.

Setelah menyelesaikan mulai cepat ini, Anda memiliki alur kerja CI yang menjalankan rangkaian pengujian Playwright dalam skala besar dan membantu Anda memecahkan masalah pengujian dengan mudah dengan Playwright Workspaces.

Prasyarat

• Sebuah akun Azure dengan langganan aktif. Jika Anda tidak memiliki langganan Azure, buatlah akun gratis sebelum Anda memulai.

• Ruang kerja Playwright. Selesaikan panduan memulai cepat: jalankan pengujian Playwright dalam skala besar dan buat ruang kerja.

Tindakan GitHub

• Akun GitHub. Jika Anda tidak memiliki akun GitHub, Anda dapat membuatnya secara gratis.
• Repositori GitHub yang berisi spesifikasi pengujian Playwright dan alur kerja GitHub Actions Anda. Untuk membuat repositori, lihat Membuat repositori baru.
• Alur kerja GitHub Actions. Jika Anda memerlukan bantuan untuk mulai menggunakan GitHub Actions, lihat membuat alur kerja pertama Anda
• Siapkan autentikasi dari GitHub Actions ke Azure. Lihat Menggunakan GitHub Actions untuk menyambungkan ke Azure.

Azure Pipeline

• Organisasi dan proyek Azure DevOps. Jika Anda tidak memiliki organisasi Azure DevOps, Anda dapat membuatnya secara gratis.
• Definisi alur. Jika Anda memerlukan bantuan untuk mulai menggunakan Azure Pipelines, lihat membuat alur pertama Anda.
• Koneksi Azure Resource Manager Service untuk mengautentikasi ke layanan dengan aman dari Azure Pipelines, lihat Koneksi layanan Azure Resource Manager

Mendapatkan URL titik akhir wilayah layanan

Dalam konfigurasi layanan, Anda harus menyediakan titik akhir layanan khusus wilayah. Titik akhir bergantung pada wilayah Azure yang Anda pilih saat membuat ruang kerja.

Untuk mendapatkan URL titik akhir layanan dan menyimpannya sebagai rahasia alur kerja CI, lakukan langkah-langkah berikut:

1. Masuk ke portal Microsoft Azure dengan akun Azure Anda dan navigasikan ke ruang kerja Anda.

2. Pilih halaman Memulai .

   

3. Pada "Tambahkan titik akhir wilayah di penyiapan Anda", salin URL titik akhir layanan.

   URL titik akhir cocok dengan wilayah Azure yang Anda pilih saat membuat ruang kerja.

4. Simpan URL titik akhir layanan dalam rahasia alur kerja CI:

   Nama rahasia	Nilai
   PLAYWRIGHT_SERVICE_URL	Tempelkan URL titik akhir yang Anda salin sebelumnya.

Menambahkan file konfigurasi layanan

Jika Anda tidak memiliki pengujian Playwright yang dikonfigurasi untuk dijalankan dengan layanan, tambahkan file konfigurasi layanan ke repositori Anda. Pada langkah berikutnya, Anda kemudian menentukan file konfigurasi layanan ini pada Playwright CLI.

1. Buat file playwright.service.config.ts baru bersama playwright.config.ts file.

   Secara opsional, gunakan berkas pada repositori playwright.service.config.ts.

2. Tambahkan konten berikut ke dalamnya:

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

   Secara default, konfigurasi layanan memungkinkan Anda mempercepat alur build dengan menjalankan pengujian secara paralel menggunakan browser yang dihosting cloud.

3. Simpan dan terapkan file ke repositori kode sumber Anda.

Memperbarui file package.json

package.json Perbarui file di repositori Anda untuk menambahkan detail tentang paket Playwright Workspaces di devDependencies bagian .

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

Menginstal paket layanan

Dalam proyek Anda, instal paket Playwright Workspaces.

dotnet add package Azure.Developer.Playwright.NUnit

Perintah ini memperbarui file proyek csproj Anda dengan menambahkan detail paket layanan ke bagian .ItemGroup Ingatlah untuk menerapkan perubahan ini.

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

Menyiapkan konfigurasi layanan

1. Buat file PlaywrightServiceNUnitSetup.cs baru di direktori akar proyek Anda. File ini memfasilitasi autentikasi klien Anda dengan layanan.
2. Tambahkan konten berikut ke dalamnya:

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. Simpan dan terapkan file ke repositori kode sumber Anda.

Mengonfigurasikan autentikasi

Mesin CI yang menjalankan pengujian Playwright harus mengautentikasi dengan layanan Playwright Workspaces untuk mendapatkan browser untuk menjalankan pengujian.

Layanan ini menawarkan dua metode autentikasi: ID Microsoft Entra dan Token Akses. Kami sangat merekomendasikan menggunakan ID Microsoft Entra untuk mengautentikasi jalur Anda.

Menyiapkan autentikasi menggunakan ID Microsoft Entra

Tindakan GitHub

Jika Anda menggunakan GitHub Actions, Anda dapat terhubung ke layanan menggunakan GitHub OpenID Connect. Ikuti langkah-langkah untuk menyiapkan integrasi:

Prasyarat

Opsi 1: Aplikasi Microsoft Entra

• Buat aplikasi Microsoft Entra dengan principal layanan menggunakan portal Azure, Azure CLI, atau Azure PowerShell.

• Salin nilai untuk ID Klien, ID Langganan, dan ID Direktori (penyewa) untuk digunakan nanti di alur kerja GitHub Actions Anda.

• Tetapkan Owner peran atau Contributor ke perwakilan layanan yang dibuat di langkah sebelumnya. Peran ini harus ditetapkan pada ruang kerja Playwright. Untuk detail selengkapnya, lihat cara mengelola akses.

• Mengonfigurasi kredensial identitas federasi pada aplikasi Microsoft Entra untuk mempercayai token yang dikeluarkan oleh GitHub Actions ke repositori GitHub Anda.

Opsi 2: Identitas terkelola yang ditetapkan pengguna

• Buat identitas terkelola yang ditetapkan oleh pengguna.

• Salin nilai untuk ID Klien, ID Langganan, dan ID Direktori (penyewa) untuk digunakan nanti di alur kerja GitHub Actions Anda.

• Tetapkan peran Owner atau Contributor kepada identitas terkelola yang ditugaskan kepada pengguna yang dibuat di langkah sebelumnya. Peran ini harus ditetapkan pada ruang kerja Playwright. Untuk detail selengkapnya, lihat cara mengelola akses.

• Konfigurasikan kredensial identitas federasi pada identitas terkelola yang ditetapkan pengguna untuk mempercayai token yang dikeluarkan oleh GitHub Actions ke repositori GitHub Anda.

Membuat rahasia GitHub

• Tambahkan nilai yang Anda dapatkan di langkah sebelumnya sebagai rahasia ke repositori GitHub Anda. Lihat menyiapkan Rahasia Tindakan GitHub. Variabel ini digunakan dalam alur kerja GitHub Action dalam langkah-langkah berikutnya.

GitHub Rahasia	Sumber (Aplikasi Microsoft Entra atau Identitas Terkelola)
AZURE_CLIENT_ID	ID Pelanggan
AZURE_SUBSCRIPTION_ID	Identifikasi Langganan
AZURE_TENANT_ID	ID Direktori (Penyewa)

Nota

Untuk keamanan yang ditingkatkan, sangat disarankan untuk menggunakan Rahasia GitHub untuk menyimpan nilai sensitif daripada menyertakannya langsung dalam file alur kerja Anda.

Azure Pipeline

Jika Anda menggunakan Azure Pipelines, Anda dapat menyambungkan ke layanan menggunakan Koneksi Layanan. Ikuti langkah-langkah untuk menyiapkan integrasi:

• Daftarkan aplikasi dengan federasi identitas beban kerja. Pilih langganan dan grup sumber daya yang terkait dengan ruang kerja Playwright Anda. Biasanya, grup sumber daya memiliki nama yang sama dengan ruang kerja Playwright.

• Gunakan koneksi layanan ini dalam file yaml Azure Pipeline seperti yang ditunjukkan pada langkah berikutnya.

Menyiapkan autentikasi menggunakan token akses

Perhatian

Sebaiknya gunakan ID Microsoft Entra untuk autentikasi ke layanan. Jika Anda menggunakan token akses, lihat Cara mengelola token akses

Anda dapat membuat token akses dari ruang kerja Playwright Anda dan menggunakannya di penyiapan Anda. Namun, kami sangat merekomendasikan ID Microsoft Entra untuk autentikasi karena keamanannya yang ditingkatkan. Token akses, meskipun nyaman, berfungsi seperti kata sandi berumur panjang dan lebih rentan disusupi.

1. Autentikasi menggunakan token akses dinonaktifkan secara default. Untuk digunakan, Aktifkan autentikasi berbasis token akses.

2. Siapkan autentikasi menggunakan token akses.

3. Simpan token akses dalam rahasia alur kerja CI dan gunakan di alur kerja GitHub Actions atau file yaml Azure Pipeline.

Nama rahasia	Nilai
PLAYWRIGHT_SERVICE_ACCESS_TOKEN	Tempelkan nilai Token Akses yang Anda buat sebelumnya.

Memperbarui definisi alur kerja

Perbarui definisi alur kerja CI untuk menjalankan pengujian Playwright Anda dengan Playwright CLI. Berikan file konfigurasi layanan sebagai parameter input untuk Playwright CLI. Anda mengonfigurasi lingkungan dengan menentukan variabel lingkungan.

1. Buka definisi alur kerja CI.

2. Tambahkan langkah-langkah berikut untuk menjalankan pengujian Playwright Anda di Playwright Workspaces.

   Langkah-langkah berikut menjelaskan perubahan alur kerja untuk GitHub Actions atau Azure Pipelines. Demikian pula, Anda dapat menjalankan pengujian Playwright dengan menggunakan Playwright CLI di platform CI lainnya.

   Tindakan 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 Pipeline

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

Perbarui definisi alur kerja CI untuk menjalankan pengujian Playwright Anda dengan Playwright NUnit CLI. Anda mengonfigurasi lingkungan dengan menentukan variabel lingkungan.

1. Buka definisi alur kerja CI.

2. Tambahkan langkah-langkah berikut untuk menjalankan pengujian Playwright Anda di Playwright Workspaces.

   Langkah-langkah berikut menjelaskan perubahan alur kerja untuk GitHub Actions atau Azure Pipelines. Demikian pula, Anda dapat menjalankan pengujian Playwright dengan menggunakan Playwright CLI di platform CI lainnya.

   Tindakan 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 Pipeline

   - 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. Simpan dan terapkan perubahan Anda.

   Saat alur kerja CI dipicu, pengujian Playwright Anda berjalan di ruang kerja Playwright Anda di browser yang dihosting cloud, di 20 pekerja paralel. Hasilnya diterbitkan ke layanan dan dapat dilihat di portal Microsoft Azure.

Perhatian

Dengan Playwright Workspaces, Anda akan dikenakan biaya berdasarkan jumlah total menit pengujian yang digunakan. Jika Anda adalah pengguna pertama kali atau memulai uji coba gratis, Anda mungkin mulai dengan menjalankan satu pengujian dalam skala besar alih-alih rangkaian pengujian lengkap Anda untuk menghindari kelelahan menit pengujian gratis Anda.

Setelah memvalidasi bahwa pengujian berhasil dijalankan, Anda dapat secara bertahap meningkatkan beban pengujian dengan menjalankan lebih banyak pengujian dengan layanan.

Anda dapat menjalankan satu pengujian dengan layanan dengan menggunakan baris perintah berikut:

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

Melihat eksekusi dan hasil pengujian

Playwright dapat mengumpulkan artefak pengujian yang kaya seperti log, jejak, dan cuplikan layar pada setiap eksekusi pengujian. Untuk mempelajari cara melihat artefak pengujian dalam alur CI Anda, lihat dokumentasi Playwright.

Konten terkait

Anda berhasil menyiapkan alur kerja pengujian end-to-end berkelanjutan untuk menjalankan pengujian Playwright dalam skala besar di browser yang dihosting cloud.

• Memberi pengguna akses ke ruang kerja

• Mengelola ruang kerja Anda