Mulai Cepat: Menjalankan pengujian end-to-end dalam skala besar dengan Pratinjau Pengujian Microsoft Playwright

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

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

Penting

Pengujian Microsoft Playwright saat ini dalam 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.
• 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 Pengujian Microsoft Playwright kami.

Membuat ruang kerja

Untuk mulai menjalankan pengujian Playwright dalam skala besar di browser cloud, Anda terlebih dahulu membuat ruang kerja Pengujian Microsoft Playwright di portal Playwright.

1. Masuk ke portal Playwright dengan akun Azure Anda.

2. Jika Anda sudah memiliki ruang kerja, pilih ruang kerja yang sudah ada, dan pindah ke langkah berikutnya.

   Tip

   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. Jika Anda belum memiliki ruang kerja, pilih + Ruang kerja baru, lalu berikan informasi berikut:

   Bidang	Deskripsi
   Nama ruang kerja	Masukkan nama unik untuk mengidentifikasi ruang kerja Anda. Nama hanya dapat terdiri dari karakter alfanumerik, dan memiliki panjang antara 3 dan 64 karakter.
   Langganan Azure	Pilih langganan Azure yang ingin Anda gunakan untuk ruang kerja Pengujian Microsoft Playwright ini.
   Wilayah	Pilih lokasi geografis untuk menghosting ruang kerja Anda. Ini adalah lokasi tempat data uji coba disimpan untuk ruang kerja.

   

4. Pilih Buat ruang kerja untuk membuat ruang kerja di langganan Anda.

   Selama pembuatan ruang kerja, grup sumber daya baru dan sumber daya Microsoft Playwright Testing Azure dibuat di langganan Azure Anda.

Setelah pembuatan ruang kerja selesai, Anda diarahkan ke panduan penyiapan.

Membuat token akses untuk autentikasi layanan

Pengujian Microsoft Playwright menggunakan token akses untuk mengotorisasi pengguna untuk menjalankan pengujian Playwright dengan layanan. Anda terlebih dahulu membuat token akses layanan di portal Playwright, lalu menyimpan nilai dalam variabel lingkungan.

Untuk menghasilkan token akses, lakukan langkah-langkah berikut:

1. Di panduan penyiapan ruang kerja, di Buat token akses, pilih Hasilkan token.

   

2. Salin token akses untuk ruang kerja.

   Anda memerlukan nilai token akses untuk mengonfigurasi lingkungan Anda di langkah selanjutnya.

   

Mengonfigurasi 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, lakukan langkah-langkah berikut:

1. Di Tambahkan titik akhir wilayah dalam penyiapan Anda, salin titik akhir wilayah untuk ruang kerja Anda.

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

   

Menyiapkan lingkungan Anda

Untuk menyiapkan lingkungan, Anda harus mengonfigurasi PLAYWRIGHT_SERVICE_ACCESS_TOKEN variabel lingkungan dan PLAYWRIGHT_SERVICE_URL 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. Buat .env file bersama playwright.config.ts file di proyek Playwright Anda:

   PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

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

Perhatian

Pastikan Anda tidak menambahkan .env file ke repositori kode sumber untuk menghindari kebocoran nilai token akses Anda.

Menambahkan file konfigurasi layanan

Untuk menjalankan pengujian Playwright di ruang kerja Pengujian Microsoft Playwright, Anda perlu menambahkan file konfigurasi layanan bersama file konfigurasi Playwright Anda. File konfigurasi layanan mereferensikan variabel lingkungan untuk mendapatkan titik akhir ruang kerja dan token akses Anda.

Untuk menambahkan konfigurasi layanan ke proyek Anda:

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

   Secara opsional, gunakan playwright.service.config.ts file di repositori sampel.

2. Tambahkan konten berikut ke dalamnya:

   /*
   * This file enables Playwright client to connect to remote browsers.
   * It should be placed in the same directory as playwright.config.ts.
   */
   
   import { defineConfig } from '@playwright/test';
   import config from './playwright.config';
   import dotenv from 'dotenv';
   
   // Define environment on the dev box in .env file:
   //  .env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
   //    PLAYWRIGHT_SERVICE_URL=XXX
   
   // Define environment in your GitHub workflow spec.
   //  env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
   //    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
   //    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
   
   dotenv.config();
   
   // Name the test run if it's not named yet.
   process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();
   
   // Can be 'linux' or 'windows'.
   const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';
   
   export default defineConfig(config, {
     // Define more generous timeout for the service operation if necessary.
     // timeout: 60000,
     // expect: {
     //   timeout: 10000,
     // },
     workers: 20,
   
     // Enable screenshot testing and configure directory with expectations.
     // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
     ignoreSnapshots: false,
     snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
     
     use: {
       // Specify the service endpoint.
       connectOptions: {
         wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
           // Can be 'linux' or 'windows'.
           os,
           runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
         })}`,
         timeout: 30000,
         headers: {
           'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
         },
         // Allow service to access the localhost.
         exposeNetwork: '<loopback>'
       }
     },
     // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
     projects: config.projects? config.projects : [{}]
   });
   

3. Simpan file.

Jalankan pengujian Anda dalam skala besar dengan Microsoft Playwright Testing

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

Menjalankan satu pengujian dalam skala besar

Dengan Microsoft Playwright Testing, 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 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.

Lakukan langkah-langkah berikut untuk menjalankan satu pengujian Playwright dengan Microsoft Playwright Testing:

Playwright CLI

Untuk menggunakan Playwright CLI untuk menjalankan pengujian Anda dengan Microsoft Playwright Testing, berikan 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 Microsoft Playwright Testing, 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.

   

   Tip

   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 di luar menit pengujian gratis yang dialokasikan.

Menjalankan rangkaian pengujian penuh dalam skala besar

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

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

Playwright CLI

Saat menjalankan beberapa pengujian Playwright atau rangkaian pengujian lengkap dengan Microsoft Playwright Testing, 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)
   
   To open last HTML report run:
   
       npx playwright show-report
   

Visual Studio Code

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

1. Buka tampilan Test Explorer di bilah aktivitas.

2. Pilih tombol Jalankan pengujian untuk menjalankan semua pengujian dengan Microsoft Playwright Testing.

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

   

   Tip

   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.

Melihat eksekusi pengujian di portal Playwright

Buka portal Playwright untuk melihat metadata uji coba dan log aktivitas untuk ruang kerja Anda.

Log aktivitas mencantumkan untuk setiap pengujian menjalankan detail berikut: total waktu penyelesaian pengujian, jumlah pekerja paralel, dan jumlah menit pengujian.

Melihat hasil pengujian di portal Playwright

Microsoft Playwright Testing sekarang mendukung melihat hasil pengujian di Portal Playwright. Fitur ini hanya tersedia sebagai fitur khusus undangan.

Penting

Fitur pelaporan layanan Pengujian Microsoft Playwright gratis selama pratinjau khusus undangan. Namun, fungsionalitas browser yang dihosting cloud yang ada terus ditagih sesuai paket harga Azure.

Setelah Anda memiliki akses ke alat pelaporan, gunakan langkah-langkah berikut untuk menyiapkan pengujian Anda.

1. Dari beranda ruang kerja, navigasikan ke Pengaturan.

   

2. Dari Pengaturan, pilih Umum dan pastikan pelaporan Diaktifkan.

   

3. Pastikan lingkungan disiapkan dengan benar seperti yang disebutkan di bagian Siapkan lingkungan Anda.

4. Menginstal paket pelaporan

   Karena fitur ini saat ini tidak bersifat publik, Anda perlu melakukan beberapa langkah tambahan untuk menginstal paket. Langkah-langkah ini tidak akan diperlukan setelah fitur menjadi publik.

   1. Buat file dengan nama .npmrc di lokasi yang sama dengan file konfigurasi Playwright Anda.

   2. Tambahkan konten berikut ke file dan simpan.

      @microsoft:registry=https://npm.pkg.github.com
      

   3. Buat Token Akses Pribadi GitHub dengan mengikuti langkah-langkah ini.

   Anda perlu memberikan read:packages izin ke token. Token ini disebut sebagai untuk PAT_TOKEN_PACKAGE sisa artikel ini.

   1. Jalankan perintah berikut di terminal Anda, di lokasi file konfigurasi Playwright Anda. Ganti PAT_TOKEN_PACKAGE dengan token yang dihasilkan pada langkah sebelumnya.

          npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
      

   2. Perbarui file package.json dengan paket.

       "dependencies": {
                  "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
          }
      

   3. Jalankan npm install untuk menginstal paket.

5. Memperbarui file Playwright.config

   Tambahkan reporter Pengujian Playwright dengan Playwright.config.ts cara yang sama seperti Anda menggunakan wartawan lain.

   import { defineConfig } from '@playwright/test';
   
   export default defineConfig({
       reporter: [
       ['list'],
       ['json', {  outputFile: 'test-results.json' }],
       ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
       ],
   });
   

   Pastikan artefak diaktifkan dalam konfigurasi untuk pemecahan masalah yang lebih baik.

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

6. Jalankan pengujian Playwright

   Anda dapat menjalankan npx playwright test perintah dan melihat hasil dan artefak di portal Pengujian Playwright.

   

Tip

Anda dapat menggunakan layanan Pengujian Microsoft Playwright untuk menerbitkan hasil pengujian ke portal yang independen dari fitur browser yang dihosting cloud.

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 Microsoft Playwright Testing, 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.

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

Langkah selanjutnya

Anda telah berhasil membuat ruang kerja Microsoft Playwright Testing di portal Playwright 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