Mulai Cepat: Menyiapkan pengujian end-to-end berkelanjutan dengan Pratinjau Pengujian Microsoft Playwright

Artikel
05/21/2024

Dalam mulai cepat ini, Anda menyiapkan pengujian end-to-end berkelanjutan dengan Pratinjau Pengujian Microsoft Playwright untuk memvalidasi bahwa aplikasi web Anda berjalan dengan benar di berbagai browser dan sistem operasi dengan setiap penerapan kode. 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 dengan Pengujian Microsoft Playwright.

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.
Ruang kerja Pengujian Microsoft Playwright. Selesaikan mulai cepat: jalankan pengujian Playwright dalam skala besar untuk membuat ruang kerja.

GitHub Actions
Alur Azure

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

Mengonfigurasi token akses layanan

Pengujian Microsoft Playwright menggunakan token akses untuk mengotorisasi pengguna untuk menjalankan pengujian Playwright dengan layanan. Anda dapat membuat token akses layanan di portal Playwright, lalu menentukan token akses dalam file konfigurasi layanan.

Untuk menghasilkan token akses dan menyimpannya sebagai rahasia alur kerja CI, lakukan langkah-langkah berikut:

Masuk ke portal Playwright dengan akun Azure Anda.
Pilih ikon pengaturan ruang kerja, lalu buka halaman Token akses.
Pilih Buat token baru untuk membuat token akses baru untuk alur kerja CI Anda.
Masukkan detail token akses, lalu pilih Buat token.
Simpan token akses dalam rahasia alur kerja CI untuk menghindari menentukan token dalam teks yang jelas dalam definisi alur kerja:
- GitHub Actions
- Alur Azure
1. Buka repositori GitHub Anda, dan pilih tindakan Pengaturan> Secrets dan variabel.>
2. Pilih Rahasia repositori baru.
3. Masukkan detail rahasia, lalu pilih Tambahkan rahasia untuk membuat rahasia CI/CD.
  
  Parameter Nilai
  
  Nama PLAYWRIGHT_SERVICE_ACCESS_TOKEN
  
  Nilai Tempelkan token akses ruang kerja yang Anda salin sebelumnya.
4. Pilih OK untuk membuat rahasia alur kerja.
1. Buka proyek Azure DevOps Anda.
2. Masuk ke halaman Alur, pilih alur yang sesuai, lalu pilih Edit.
3. Temukan Variabel untuk alur ini.
4. Tambahkan variabel baru.
5. Masukkan detail variabel, lalu pilih Tambahkan rahasia untuk membuat rahasia CI/CD.
  
  Parameter Nilai
  
  Nama PLAYWRIGHT_SERVICE_ACCESS_TOKEN
  
  Nilai Tempelkan token akses ruang kerja yang Anda salin sebelumnya.
  
  Rahasiakan nilai ini Periksa nilai ini
6. Pilih OK, lalu Simpan untuk membuat rahasia alur kerja.

Parameter	Nilai
Nama	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
Nilai	Tempelkan token akses ruang kerja yang Anda salin sebelumnya.

Parameter	Nilai
Nama	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
Nilai	Tempelkan token akses ruang kerja yang Anda salin sebelumnya.
Rahasiakan nilai ini	Periksa nilai ini

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:

Masuk ke portal Playwright dengan akun Azure Anda.
Pada beranda ruang kerja, pilih Tampilkan panduan penyetelan.

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.
Di Tambahkan titik akhir wilayah dalam penyiapan Anda, salin URL titik akhir layanan.

URL titik akhir cocok dengan wilayah Azure yang Anda pilih saat membuat ruang kerja.
Simpan URL titik akhir layanan dalam rahasia alur kerja CI:

Nama rahasia Nilai

PLAYWRIGHT_SERVICE_URL Tempelkan URL titik akhir yang Anda salin sebelumnya.

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

Menambahkan file konfigurasi layanan

Jika Anda belum mengonfigurasi pengujian Playwright untuk menjalankannya di browser yang dihosting cloud, tambahkan file konfigurasi layanan ke repositori Anda. Pada langkah berikutnya, Anda kemudian menentukan file konfigurasi layanan ini pada Playwright CLI.

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

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

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 : [{}]
});

Simpan dan terapkan file ke repositori kode sumber Anda.

Memperbarui definisi alur kerja

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

Buka definisi alur kerja CI

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.

GitHub Actions
Alur Azure

- 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:
    # Access token and regional endpoint for Microsoft Playwright Testing
    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 }}
  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

- task: PowerShell@2
  enabled: true
  displayName: "Install dependencies"
  inputs:
    targetType: 'inline'
    script: 'npm ci'
    workingDirectory: path/to/playwright/folder # update accordingly

- task: PowerShell@2
  enabled: true
  displayName: "Run Playwright tests"
  env:
    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
    PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
  inputs:
    targetType: 'inline'
    script: 'npx playwright test -c playwright.service.config.ts --workers=20'
    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'

Simpan dan terapkan perubahan Anda.

Saat alur kerja CI dipicu, pengujian Playwright Anda akan berjalan di ruang kerja Pengujian Microsoft Playwright Anda di browser yang dihosting cloud, di 20 pekerja paralel.

Perhatian

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.

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

Mengaktifkan pelaporan hasil pengujian

Microsoft Playwright Testing sekarang mendukung melihat hasil pengujian di Portal Playwright. Selama akses pratinjau hanya tersedia berdasarkan undangan.

Penting

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

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

Dari beranda ruang kerja, navigasikan ke Pengaturan.
Dari Pengaturan, pilih Umum dan pastikan pelaporan Diaktifkan.
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.
Simpan token GitHub dalam rahasia alur kerja CI untuk menghindari menentukan token dalam teks yang jelas dalam definisi alur kerja:
- GitHub Actions
- Alur Azure
1. Buka repositori GitHub Anda, dan pilih tindakan Pengaturan> Secrets dan variabel.>
2. Pilih Rahasia repositori baru.
3. Masukkan detail rahasia, lalu pilih Tambahkan rahasia untuk membuat rahasia CI/CD.
  
  Parameter Nilai
  
  Nama PAT_TOKEN_PACKAGE
  
  Nilai Tempelkan token akses ruang kerja yang Anda salin sebelumnya.
4. Pilih OK untuk membuat rahasia alur kerja.
1. Buka proyek Azure DevOps Anda.
2. Masuk ke halaman Alur, pilih alur yang sesuai, lalu pilih Edit.
3. Temukan Variabel untuk alur ini.
4. Tambahkan variabel baru.
5. Masukkan detail variabel, lalu pilih Tambahkan rahasia untuk membuat rahasia CI/CD.
  
  Parameter Nilai
  
  Nama PAT_TOKEN_PACKAGE
  
  Nilai Tempelkan token akses ruang kerja yang Anda salin sebelumnya.
  
  Rahasiakan nilai ini Periksa nilai ini
6. Pilih OK, lalu Simpan untuk membuat rahasia alur kerja.

Parameter	Nilai
Nama	PAT_TOKEN_PACKAGE
Nilai	Tempelkan token akses ruang kerja yang Anda salin sebelumnya.

Parameter	Nilai
Nama	PAT_TOKEN_PACKAGE
Nilai	Tempelkan token akses ruang kerja yang Anda salin sebelumnya.
Rahasiakan nilai ini	Periksa nilai ini

Perbarui file package.json dengan paket.

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

Perbarui file konfigurasi Playwright.

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

Perbarui definisi alur kerja CI untuk menginstal paket pelaporan sebelum menjalankan pengujian untuk menerbitkan laporan pengujian Playwright Anda di Pengujian Microsoft Playwright.

GitHub Actions
Alur Azure

- name: Install reporting package
  working-directory: path/to/playwright/folder # update accordingly
  run: |
    npm config set @microsoft:registry=https://npm.pkg.github.com
    npm set //npm.pkg.github.com/:_authToken ${{secrets.PAT_TOKEN_PACKAGE}} 
    npm install

- name: Run Playwright tests
  working-directory: path/to/playwright/folder # update accordingly
  env:
    # Access token and regional endpoint for Microsoft Playwright Testing
    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 }}
  run: npx playwright test

- task: PowerShell@2
  enabled: true
  displayName: "Install reporting package"
  inputs:
    targetType: 'inline'
    script: |
        'npm config set @microsoft:registry=https://npm.pkg.github.com'
        'npm set //npm.pkg.github.com/:_authToken ${{secrets PAT_TOKEN_PACKAGE}}'
        'npm install'
    workingDirectory: path/to/playwright/folder # update accordingly

- task: PowerShell@2
  enabled: true
  displayName: "Run Playwright tests"
  env:
    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
    PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
    PLAYWRIGHT_SERVICE_RUN_ID: $(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt)
  inputs:
    targetType: 'inline'
    script: 'npx playwright test -c playwright.service.config.ts --workers=20'
    workingDirectory: path/to/playwright/folder # update accordingly

Tip

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

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

Bagikan melalui

Mulai Cepat: Menyiapkan pengujian end-to-end berkelanjutan dengan Pratinjau Pengujian Microsoft Playwright

Prasyarat

Mengonfigurasi token akses layanan

Mendapatkan URL titik akhir wilayah layanan

Menambahkan file konfigurasi layanan

Memperbarui definisi alur kerja

Mengaktifkan pelaporan hasil pengujian

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan:

Bagikan melalui

Mulai Cepat: Menyiapkan pengujian end-to-end berkelanjutan dengan Pratinjau Pengujian Microsoft Playwright

Prasyarat

Mengonfigurasi token akses layanan

Mendapatkan URL titik akhir wilayah layanan

Menambahkan file konfigurasi layanan

Memperbarui definisi alur kerja

Mengaktifkan pelaporan hasil pengujian

Konten terkait

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: