Mulai cepat: Menjalankan pengujian end-to-end dalam skala besar dengan Playwright Workspaces

Dalam mulai cepat ini, Anda mempelajari cara menjalankan pengujian Playwright dengan browser cloud yang sangat paralel menggunakan Playwright Workspaces. Gunakan infrastruktur cloud untuk memvalidasi aplikasi Anda di beberapa browser, perangkat, dan sistem operasi.

Setelah menyelesaikan mulai cepat ini, Anda memiliki ruang kerja Playwright untuk menjalankan pengujian Playwright dalam skala besar.

Prasyarat

• Sebuah akun Azure dengan langganan aktif. Jika Anda tidak memiliki langganan Azure, buatlah akun gratis sebelum Anda memulai.
• Akun Azure Anda memerlukan peran Pemilik, Kontributor, atau salah satu administrator klasik.
• Sebuah proyek Playwright. Jika Anda tidak memiliki proyek, buat proyek dengan menggunakan dokumentasi memulai Playwright atau gunakan proyek sampel Playwright Workspaces kami.
• Azure CLI. Jika Anda tidak memiliki Azure CLI, lihat Menginstal Azure CLI.

Membuat ruang kerja

Untuk mulai menjalankan pengujian Playwright di browser cloud, Pertama-tama Anda perlu membuat ruang kerja Playwright.

1. Masuk ke portal Azure.

2. Pilih tombol menu di sudut kiri atas portal, lalu pilih Buat sumber daya sumber daya .

   

3. Masukkan Ruang Kerja Playwright di kotak pencarian.

4. Pilih kartu Ruang Kerja Playwright , lalu pilih Buat.

   

5. Berikan informasi berikut untuk mengonfigurasi ruang kerja Playwright baru:

   Bidang	Deskripsi
   Abonemen	Pilih langganan Azure yang ingin Anda gunakan untuk ruang kerja Playwright ini.
   grup Sumber Daya	Memilih grup sumber daya yang sudah ada. Atau pilih Buat baru, lalu masukkan nama unik untuk grup sumber daya baru.
   Nama	Masukkan nama unik untuk mengidentifikasi ruang kerja Anda. Nama hanya dapat terdiri dari karakter alfanumerik dan tanda hubung, dan memiliki panjang antara 3 dan 24 karakter.
   Tempat	Pilih lokasi geografis untuk menghosting ruang kerja Anda. Lokasi ini juga menentukan di mana hasil eksekusi pengujian disimpan.

   Nota

   Secara opsional, Anda dapat mengonfigurasi detail lebih lanjut pada tab Tag . Tag adalah pasangan nama/nilai yang memungkinkan Anda mengategorikan sumber daya dan melihat penagihan terkonsolidasi dengan menerapkan tag yang sama ke beberapa sumber daya dan grup sumber daya.

6. Setelah selesai mengonfigurasi sumber daya, pilih Tinjau + Buat.

7. Tinjau semua pengaturan konfigurasi dan pilih Buat untuk memulai penyebaran ruang kerja Playwright.

   Setelah proses selesai, pesan keberhasilan penyebaran muncul.

8. Untuk melihat ruang kerja baru, pilih Buka sumber daya.

   

Menginstal paket Playwright Workspaces

Untuk menggunakan layanan, instal paket Playwright Workspaces.

npm init @azure/playwright@latest

Ini menghasilkan playwright.service.config.ts file yang berfungsi untuk mengarahkan dan mengautentikasi Playwright ke Playwright Workspaces.

Jika Anda sudah memiliki file ini, paket meminta Anda untuk menimpanya.

Untuk menggunakan layanan, instal paket Playwright Workspaces.

dotnet add package Azure.Developer.Playwright.NUnit

Mengonfigurasi titik akhir browser

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

Untuk mendapatkan URL titik akhir browser, 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. Di Tambahkan titik akhir browser ke penyiapan Anda, salin URL titik akhir.

   Pastikan URL ini tersedia dalam PLAYWRIGHT_SERVICE_URL variabel lingkungan.

   

Atur lingkungan Anda

Untuk menyiapkan lingkungan, Anda harus mengonfigurasi PLAYWRIGHT_SERVICE_URL variabel lingkungan dengan nilai yang Anda peroleh di langkah-langkah sebelumnya.

Kami menyarankan agar Anda menggunakan dotenv modul untuk mengelola lingkungan Anda. Dengan dotenv, Anda menentukan variabel lingkungan Anda dalam .env file.

1. dotenv Tambahkan modul ke proyek Anda:

   npm i --save-dev dotenv
   

2. Tambahkan cuplikan kode berikut di playwright.service.config.ts:

   require('dotenv').config();
   

3. Buat .env file bersama playwright.config.ts file di proyek Playwright Anda:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Pastikan untuk mengganti {MY-REGION-ENDPOINT} tempat penampung teks dengan nilai yang Anda salin sebelumnya.

Menyiapkan konfigurasi layanan

Buat file PlaywrightServiceSetup.cs di proyek Anda dengan konten berikut.

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup  : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential()
    ) 
    {}
}

Nota

Pastikan proyek Anda menggunakan Microsoft.Playwright.NUnit versi 1.50 atau lebih tinggi.

Menyiapkan Autentikasi

Untuk menjalankan pengujian Playwright di ruang kerja Playwright, Anda perlu mengautentikasi klien Playwright tempat Anda menjalankan pengujian dengan layanan. Ini bisa menjadi mesin dev lokal atau mesin CI Anda.

Layanan ini menawarkan dua metode autentikasi: ID Microsoft Entra dan Token Akses.

ID Microsoft Entra menggunakan kredensial Azure Anda, memerlukan masuk ke akun Azure Anda untuk akses yang aman. Atau, Anda dapat menghasilkan token akses dari ruang kerja Playwright dan menggunakannya dalam penyiapan Anda.

Menyiapkan autentikasi menggunakan ID Microsoft Entra

ID Microsoft Entra adalah autentikasi default dan direkomendasikan untuk layanan. Dari komputer dev lokal, Anda dapat menggunakan Azure CLI untuk masuk

az login

Nota

Jika Anda adalah bagian dari beberapa penyewa Microsoft Entra, pastikan Anda masuk ke penyewa tempat ruang kerja Anda berada. Anda bisa mendapatkan ID penyewa dari portal Azure. Lihat Menemukan Penyewa Microsoft Entra Anda. Setelah Anda mendapatkan ID, masuk menggunakan perintah az login --tenant <TenantID>

Menyiapkan autentikasi menggunakan 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.

Perhatian

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

Jalankan pengujian Anda dalam skala besar dengan Playwright Workspaces

Anda sekarang telah menyiapkan konfigurasi untuk menjalankan pengujian Playwright Anda di cloud dengan Playwright Workspaces. Anda dapat menggunakan Playwright CLI untuk menjalankan pengujian Anda, atau menggunakan ekstensi Playwright Test Visual Studio Code.

Menjalankan satu pengujian dengan layanan

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

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

Lakukan langkah-langkah berikut untuk menjalankan satu pengujian Playwright dengan Playwright Workspaces:

Playwright CLI

Untuk menggunakan Playwright CLI untuk menjalankan pengujian Anda dengan Playwright Workspaces, teruskan file konfigurasi layanan sebagai parameter baris perintah.

1. Buka jendela terminal.

2. Masukkan perintah berikut untuk menjalankan uji Playwright pada browser jarak jauh di ruang kerja Anda:

   {name-of-file.spec.ts} Ganti tempat penampung teks dengan nama file spesifikasi pengujian Anda.

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

   Setelah pengujian selesai, Anda dapat melihat status pengujian di terminal.

   Running 1 test using 1 worker
       1 passed (2.2s)
   
   To open last HTML report run:
   
   npx playwright show-report
   

Visual Studio Code

Untuk menjalankan satu pengujian Playwright di Visual Studio Code dengan Playwright Workspaces, pilih file konfigurasi layanan di tampilan Test Explorer . Kemudian pilih dan jalankan pengujian dari daftar pengujian.

1. Instal ekstensi Playwright Test Visual Studio Code.

2. Buka tampilan Test Explorer di bilah aktivitas.

   Penjelajah pengujian secara otomatis mendeteksi pengujian Playwright dan konfigurasi layanan di proyek Anda.

   

3. Pilih Pilih Profil Default, lalu pilih proyek default Anda dari file konfigurasi layanan.

   Perhatikan bahwa profil eksekusi layanan berasal dari file yang playwright.service.config.ts Anda tambahkan sebelumnya.

   Dengan mengatur profil default, Anda dapat secara otomatis menjalankan pengujian dengan layanan, atau menjalankan beberapa proyek Playwright secara bersamaan.

   

4. Dari daftar pengujian, pilih tombol Jalankan pengujian di samping pengujian untuk menjalankannya.

   Pengujian berjalan pada proyek yang Anda pilih di profil default. Jika Anda memilih satu atau beberapa proyek dari konfigurasi layanan, pengujian berjalan pada browser jarak jauh di ruang kerja Anda.

   

   Petunjuk / Saran

   Anda masih dapat men-debug kode pengujian saat menjalankan pengujian di browser jarak jauh dengan menggunakan tombol Uji debug.

5. Anda dapat melihat hasil pengujian secara langsung di Visual Studio Code.

   

Anda sekarang dapat menjalankan beberapa pengujian dengan layanan, atau menjalankan seluruh rangkaian pengujian Anda di browser jarak jauh.

Perhatian

Bergantung pada ukuran rangkaian pengujian, Anda mungkin dikenakan biaya tambahan untuk menit pengujian dan hasil pengujian di luar menit pengujian gratis yang dialokasikan dan hasil pengujian gratis.

Menjalankan rangkaian pengujian lengkap dengan layanan

Setelah memvalidasi bahwa Anda dapat menjalankan satu pengujian dengan Playwright Workspaces, Anda dapat menjalankan rangkaian pengujian Playwright lengkap dalam skala besar.

Lakukan langkah-langkah berikut untuk menjalankan rangkaian pengujian Playwright lengkap dengan Playwright Workspaces:

Playwright CLI

Saat menjalankan beberapa pengujian Playwright atau rangkaian pengujian lengkap dengan Playwright Workspaces, Anda dapat secara opsional menentukan jumlah pekerja paralel sebagai parameter baris perintah.

1. Buka jendela terminal.

2. Masukkan perintah berikut untuk menjalankan rangkaian pengujian Playwright Anda di browser jarak jauh di ruang kerja Anda:

   npx playwright test --config=playwright.service.config.ts --workers=20
   

   Bergantung pada ukuran rangkaian pengujian Anda, perintah ini menjalankan pengujian Anda hingga 20 pekerja paralel.

   Setelah pengujian selesai, Anda dapat melihat status pengujian di terminal.

   Running 6 tests using 6 workers
       6 passed (18.2s)
   

Visual Studio Code

Untuk menjalankan rangkaian pengujian Playwright Anda di Visual Studio Code dengan Playwright Workspaces:

1. Buka tampilan Test Explorer di bilah aktivitas.

2. Pilih tombol Jalankan pengujian untuk menjalankan semua pengujian dengan Playwright Workspaces.

   Saat Anda menjalankan semua pengujian, profil default digunakan. Pada langkah sebelumnya, Anda mengonfigurasi profil default untuk menggunakan proyek dari konfigurasi layanan.

   

   Petunjuk / Saran

   Anda masih dapat men-debug kode pengujian saat menjalankan pengujian di browser jarak jauh dengan menggunakan tombol Uji debug.

3. Secara bergantian, Anda dapat memilih konfigurasi layanan tertentu dari daftar untuk hanya menjalankan pengujian untuk konfigurasi browser tertentu.

   

4. Anda dapat melihat semua hasil pengujian di tab Hasil pengujian.

Jalankan pengujian Playwright terhadap browser yang dikelola oleh layanan menggunakan konfigurasi yang Anda buat di atas.

dotnet test -- NUnit.NumberOfTestWorkers=20

Setelah uji coba selesai, Anda dapat melihat status pengujian di terminal.

Starting test execution, please wait...

A total of 100 test files matched the specified pattern.

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 59 s - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

Mengoptimalkan konfigurasi pekerja paralel

Setelah pengujian Anda berjalan lancar dengan layanan, bereksperimenlah dengan berbagai jumlah pekerja paralel untuk menentukan konfigurasi optimal yang meminimalkan waktu penyelesaian pengujian.

Dengan Playwright Workspaces, Anda dapat menjalankan hingga 50 pekerja paralel. Beberapa faktor memengaruhi konfigurasi terbaik untuk proyek Anda, seperti sumber daya CPU, memori, dan jaringan komputer klien Anda, kapasitas penanganan beban aplikasi target, dan jenis tindakan yang dilakukan dalam pengujian Anda.

Anda dapat menentukan jumlah pekerja paralel pada baris perintah Playwright CLI, atau mengonfigurasi workers properti dalam file konfigurasi layanan Playwright.

Anda dapat menentukan jumlah pekerja paralel pada baris perintah Playwright CLI, atau mengonfigurasi NumberOfTestWorkers properti dalam .runsettings file.

Pelajari selengkapnya tentang cara menentukan konfigurasi optimal untuk mengoptimalkan penyelesaian rangkaian pengujian.

Langkah selanjutnya

Anda telah berhasil membuat ruang kerja Playwright di portal Microsoft Azure dan menjalankan pengujian Playwright Anda di browser cloud.

Lanjutkan ke mulai cepat berikutnya untuk menyiapkan pengujian end-to-end berkelanjutan dengan menjalankan pengujian Playwright di alur kerja CI/CD Anda.

Menyiapkan pengujian end-to-end berkelanjutan di CI/CD