Bagikan melalui


Panduan Cepat: Menyiapkan pengujian end-to-end berkelanjutan dengan Microsoft Playwright Testing Preview

Penting

Microsoft Playwright Testing akan dihentikan pada 8 Maret 2026. Untuk terus menjalankan pengujian Playwright Anda, buat Ruang Kerja Playwright baru di Azure App Testing, sekarang tersedia secara umum. Pelajari cara bermigrasi.

Dalam panduan memulai cepat ini, Anda menyiapkan pengujian end-to-end berkelanjutan dengan Microsoft Playwright Testing Preview untuk memvalidasi bahwa aplikasi web Anda berjalan dengan benar di berbagai browser dan sistem operasi setiap kali komit kode, serta menyelesaikan masalah dalam pengujian dengan mudah menggunakan dashboard layanan. Pelajari cara menambahkan pengujian Playwright Anda ke alur kerja integrasi berkelanjutan (CI), seperti GitHub Actions, Azure Pipelines, atau platform CI lainnya.

Setelah Anda menyelesaikan panduan memulai cepat ini, Anda memiliki alur kerja CI yang menjalankan rangkaian pengujian Playwright Anda dalam skala besar dan membantu Anda mengatasi masalah pengujian dengan mudah dengan Microsoft Playwright Testing.

Penting

Pengujian Microsoft Playwright saat ini sedang dalam masa pratinjau. Untuk persyaratan hukum yang berlaku untuk fitur Azure yang beta, dalam pratinjau, atau belum dirilis ke ketersediaan umum, lihat Ketentuan Penggunaan Tambahan untuk Pratinjau Microsoft Azure.

Prasyarat

  • Akun Azure dengan langganan aktif. Jika Anda tidak memiliki langganan Azure, buat akun gratis sebelum Anda memulai.

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

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 Playwright dengan akun Azure Anda.

  2. Pada beranda ruang kerja, pilih Tampilkan panduan penyetelan.

    Kiat

    Jika Anda memiliki beberapa ruang kerja, Anda dapat beralih ke ruang kerja lain dengan memilih nama ruang kerja di bagian atas halaman, lalu pilih Kelola semua ruang kerja.

  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 { 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']],
      }
    );
    

    Secara default, konfigurasi layanan memungkinkan Anda untuk:

    • Mempercepat alur build dengan menjalankan pengujian secara paralel menggunakan browser yang dihosting cloud.
    • Sederhanakan pemecahan masalah dengan akses mudah ke hasil pengujian dan artefak yang diterbitkan ke layanan.

    Namun, Anda dapat memilih untuk menggunakan salah satu fitur ini atau keduanya. Lihat Cara menggunakan fitur layanan dan memperbarui file konfigurasi layanan sesuai kebutuhan Anda.

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

Memperbarui file package.json

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

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

Mengaktifkan artefak dalam konfigurasi Playwright

playwright.config.ts Dalam file proyek Anda, pastikan Anda mengumpulkan semua artefak yang diperlukan.

  use: {
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
  },

Menyiapkan konfigurasi layanan

  1. Buat file PlaywrightServiceSetup.cs baru di direktori akar proyek Anda. File ini memfasilitasi autentikasi klien Anda dengan layanan.

  2. Tambahkan konten berikut ke dalamnya:

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

Menginstal paket layanan

Dalam proyek Anda, instal paket Pengujian Microsoft Playwright.

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

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

Tambahkan atau perbarui .runsettings file untuk proyek Anda.

Jika Anda belum mengonfigurasi pengujian Playwright untuk menjalankannya dengan layanan, tambahkan .runsettings file ke repositori Anda. Pada langkah berikutnya, Anda kemudian menentukan file konfigurasi layanan ini pada Playwright CLI.

  1. Buat file .runsettings baru.

    Secara opsional, gunakan berkas pada repositori .runsettings.

  2. Tambahkan konten berikut ke dalamnya:

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

    Pengaturan dalam file ini memungkinkan Anda untuk:

    • Mempercepat alur build dengan menjalankan pengujian secara paralel menggunakan browser yang dihosting cloud.
    • Terbitkan hasil pengujian dan artefak ke layanan untuk pemecahan masalah yang lebih cepat.

    Namun, Anda dapat memilih untuk menggunakan salah satu fitur ini atau keduanya. Lihat Cara menggunakan fitur layanan dan memperbarui file konfigurasi layanan sesuai kebutuhan Anda.

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

Mengaktifkan artefak dalam penyiapan Playwright Anda

Siapkan Playwright untuk mengambil artefak seperti cuplikan layar, video, dan jejak.

Setelah Anda mengumpulkan artefak ini, lampirkan ke TestContext untuk memastikan bahwa artefak tersebut tersedia dalam laporan pengujian Anda. Untuk informasi selengkapnya, lihat proyek sampel kami untuk NUnit.

Mengonfigurasikan autentikasi

Mesin CI yang menjalankan pengujian Playwright harus melakukan autentikasi pada layanan Pengujian Playwright agar browser dapat menjalankan pengujian serta menerbitkan hasil serta artefak 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

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 perwakilan layanan berdasarkan 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 Pengujian Playwright. Untuk detail selengkapnya, lihat cara mengelola akses.

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

Opsi 2: Identitas terkelola yang ditetapkan pengguna

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 klien
AZURE_SUBSCRIPTION_ID Identifikasi Langganan
AZURE_TENANT_ID ID Direktori (Penyewa)

Catatan

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

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 Pengujian Playwright dan menggunakannya dalam pengaturan 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 Microsoft Playwright Testing.

    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.

    
      # 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
    

Perbarui definisi alur kerja CI untuk menjalankan pengujian Playwright Anda dengan Playwright NUnit CLI. Teruskan .runsettings file 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 Microsoft Playwright Testing.

    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.

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

    Saat alur kerja CI dipicu, tes Playwright Anda berjalan melalui 20 pekerja paralel di ruang kerja Pengujian Microsoft Playwright pada browser yang dihosting cloud. Hasil dan artefak yang dikumpulkan diterbitkan ke layanan dan dapat dilihat di portal layanan.

Pengaturan untuk uji coba Anda dapat ditentukan dalam .runsettings file. Untuk informasi selengkapnya, lihat cara menggunakan opsi paket layanan

Catatan

Fitur pelaporan diaktifkan secara default untuk ruang kerja yang ada. Ini sedang diluncurkan secara bertahap dan akan memakan waktu beberapa hari. Untuk menghindari kegagalan, konfirmasikan bahwa Rich diagnostics using reporting pengaturan aktif untuk ruang kerja Anda sebelum melanjutkan. Untuk informasi selengkapnya, lihat Mengaktifkan pelaporan untuk ruang kerja.

Perhatian

Dengan Microsoft Playwright Testing, Anda akan dikenakan biaya berdasarkan jumlah total menit pengujian yang digunakan dan hasil pengujian yang diterbitkan. Jika Anda adalah pengguna pertama kali atau memulai dengan uji coba gratis, Anda mungkin bisa memulai dengan menjalankan satu pengujian dalam skala besar alih-alih menjalankan seluruh rangkaian pengujian Anda untuk menghindari kehabisan menit pengujian gratis dan hasil pengujian.

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 pelaksanaan pengujian dan hasil di portal Playwright

Sekarang Anda dapat memecahkan masalah alur CI di portal Playwright,

  1. Setelah uji coba selesai, tautan ke Portal Playwright dibuat. Buka tautan ini untuk melihat hasil pengujian terperinci dan artefak terkait. Portal menampilkan informasi penting, termasuk:

    • Detail CI build
    • Status pengujian secara keseluruhan
    • ID Komit yang ditautkan ke uji coba

    Cuplikan layar yang memperlihatkan daftar pengujian dalam eksekusi pengujian.

  2. Portal Playwright menyediakan semua informasi yang diperlukan untuk pemecahan masalah. Anda dapat:

    • Beralih antara upaya ulang.
    • Lihat log kesalahan terperinci, langkah pengujian, dan artefak terlampir seperti cuplikan layar atau video.
    • Navigasikan langsung ke Trace Viewer untuk analisis yang lebih mendalam.

    Cuplikan layar yang memperlihatkan pratinjau pengujian.

  3. Penampil Jejak memungkinkan Anda untuk menelusuri eksekusi pengujian Anda secara visual. Anda dapat:

    • Gunakan garis waktu untuk mengarahkan mouse ke atas langkah-langkah individual, memperlihatkan status halaman sebelum dan sesudah setiap tindakan.
    • Periksa log terperinci, rekam jepret DOM, aktivitas jaringan, kesalahan, dan output konsol untuk setiap langkah.

    Cuplikan layar yang memperlihatkan penampil jejak.

  1. Setelah uji coba selesai, Anda akan mendapatkan tautan ke portal Playwright di terminal Anda. Buka tautan ini untuk melihat hasil pengujian terperinci dan artefak terkait. Portal menampilkan informasi penting, termasuk:

    • Detail CI build
    • Status pengujian secara keseluruhan
    • ID Komit yang ditautkan ke uji coba

    Cuplikan layar yang memperlihatkan daftar pengujian dalam eksekusi pengujian.

  2. Portal Playwright menyediakan semua informasi yang diperlukan untuk pemecahan masalah. Anda dapat:

    • Lihat log kesalahan terperinci, dan artefak terlampir seperti cuplikan layar atau video.
    • Navigasikan langsung ke Trace Viewer untuk analisis yang lebih mendalam.

    Cuplikan layar yang memperlihatkan pratinjau pengujian.

Catatan

Beberapa metadata, seperti pemilik, deskripsi, dan kategori, saat ini tidak ditampilkan di dasbor layanan. Jika ada informasi tambahan yang ingin Anda lihat disertakan, kirimkan masalah GitHub di repositori kami.

  1. Penampil Jejak memungkinkan Anda untuk menelusuri eksekusi pengujian Anda secara visual. Anda dapat:

    • Gunakan garis waktu untuk mengarahkan mouse ke atas langkah-langkah individual, memperlihatkan status halaman sebelum dan sesudah setiap tindakan.
    • Periksa log terperinci, rekam jepret DOM, aktivitas jaringan, kesalahan, dan output konsol untuk setiap langkah.

    Cuplikan layar yang memperlihatkan penampil jejak.

Kiat

Anda dapat menggunakan fitur layanan Microsoft Playwright Testing secara independen. Anda dapat menerbitkan hasil pengujian ke portal tanpa menggunakan fitur browser yang dihosting cloud dan Anda juga hanya dapat menggunakan browser yang dihosting cloud untuk mempercepat rangkaian pengujian Anda tanpa menerbitkan hasil pengujian. Untuk detailnya, lihat Cara menggunakan fitur layanan.

Catatan

Hasil pengujian dan artefak yang Anda terbitkan dipertahankan pada layanan selama 90 hari. Setelah itu, mereka secara otomatis dihapus.

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