Latihan: Mendekonstruksi Uji Playwright

Selesai

Mari kita sekarang mendalami Spesifikasi dan Konfigurasi Uji Playwright. Buka proyek yang kami buat di bagian sebelumnya di editor kode favorit Anda (kami merekomendasikan Visual Studio Code, yang kami gunakan dalam modul ini) dan jelajahi file yang diinstal Playwright.

Memahami konfigurasi pengujian

Mari kita mulai dengan mempelajari tentang konfigurasi pengujian Playwright.

• File playwright.config.ts menentukan konfigurasi Test Runner default.
• API TestConfig menjelaskan properti konfigurasi yang tersedia untuk penyesuaian.
• Playwright Test CLI memungkinkan Anda mengambil alih properti konfigurasi atau lokasi file saat runtime.

Mari kita lihat seperti apa file konfigurasi default yang disediakan oleh Playwright (pada penyiapan pertama) . Cuplikan berikut playwright.config.ts disederhanakan untuk kejelasan:

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  
  use: {
    trace: 'on-first-retry',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Kita dapat merujuk ke dokumentasi Konfigurasi Dasar untuk memahami apa yang dilakukan kode ini:

• testDir: Direktori tingkat atas untuk memindai secara rekursif untuk file pengujian.
• fullyParallel: Putuskan apakah semua pengujian di semua file harus berjalan secara paralel.
• forbidOnly: Keluar dengan kesalahan jika test.only digunakan (misalnya, berguna di CI).
• retries: Jumlah maksimum pengulangan setiap uji coba (berguna untuk asersi web-first).
• workers: Jumlah maksimum proses kerja bersamaan (untuk pengujian paralel).
• reporter: Pilih dari opsi reporter yang tersedia (bawaan dan kustom).
• use: Atur opsi global untuk semua pengujian (dapat ditimpa pada tingkat proyek atau pengujian).
• projects: Jalankan pengujian dalam beberapa konfigurasi (browser, emulator, opsi).

Menjalankan pengujian aplikasi todo demo

Folder tests-examples berisi pengujian untuk aplikasi todo demo. Pertama, salin file spesifikasi tersebut (demo-todo-app.spec.ts) dan tempelkan ke folder pengujian Anda.

Jalankan pengujian Anda:

npx playwright test

Kali ini, Playwright akan menjalankan pengujian dari kedua file spesifikasi di folder pengujian kami.

Running 78 tests using 5 workers
  78 passed (15.4s)

To open last HTML report run:
  npx playwright show-report

Wow, ternyata ada beberapa tes. Untuk melihat apa yang terjadi, mari kita buka laporan HTML.

npx playwright show-report

Laporan ini memberi tahu kami bahwa semua pengujian dijalankan pada tiga mesin browser yang berbeda: Chromium, , Firefoxdan Webkit.

Anda dapat menghapus file demo-todo-app.spec.ts dari folder pengujian Anda.

Konfigurasi proyek

Proyek adalah sekelompok pengujian yang berjalan dengan konfigurasi yang sama dan dapat digunakan untuk menjalankan pengujian pada browser dan perangkat yang berbeda. Di bagian terakhir, kami mempelajari cara menjalankan pengujian pada browser Chromium dengan menambahkan -- project opsi setelah perintah pengujian di CLI.

Proyek didefinisikan dalam array proyek dalam file konfigurasi. Secara default, Playwright hadir dengan tiga proyek yang sudah ditentukan: kromium, firefox, dan webkit. Inilah sebabnya mengapa tes kami berjalan pada ketiga browser.

Setiap proyek memiliki name properti dan use properti. Opsi use menentukan apa yang seharusnya digunakan oleh proyek. Misalnya, perangkat Desktop Chrome untuk proyek kromium.

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],

Dalam file playwright.config.ts di direktori learn-playwright Anda, komentari proyek lain dan hanya tinggalkan proyek kromium, lalu jalankan pengujian.

npx playwright test

Unggul! Kita dapat melihat bahwa kita sekarang memiliki dua kasus pengujian yang berjalan di dalam satu proyek peramban, memberi kita dua kali pelaksanaan pengujian.

Running 2 tests using 2 workers
  2 passed (1.2s)

To open last HTML report run:
  npx playwright show-report

Mari kita jalankan perintah show-report dan perhatikan bagaimana laporan sekarang hanya menunjukkan kepada kita dua pengujian di satu browser.

Jelajahi Emulasi

Playwright mendukung Emulasi untuk pengujian seluler. Anda dapat memilih profil perangkat dari profil emulasi yang didukung dan menambahkannya sebagai proyek baru dalam file konfigurasi.

Anda mungkin melihat bahwa file konfigurasi default (playwright.config.ts) memiliki bagian yang dikomentari untuk pengujian terhadap viewport seluler. Mari kita batalkan komentar proyek untuk Mobile Safari.

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12 Pro'] },
    },
  ],

Berikut tampilan deskripsi profil untuk iPhone 12 Pro:

  "iPhone 12 Pro": {
    "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like macOS X)* *AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1",
    "screen": {
      "width": 390,
      "height": 844
    },

    "viewport": {
      "width": 390,
      "height": 664
    },

    "deviceScaleFactor": 3,
    "isMobile": true,
    "hasTouch": true,
    "defaultBrowserType": "webkit"
  },

Mari kita jalankan tes kita lagi.

npx playwright test

Kode ini menjalankan dua pengujian kami pada proyek chromium dan Mobile Safari. Kita dapat melihat bahwa kita sekarang memiliki dua pelaksanaan uji coba.

Running 4 tests using 4 workers
  4 passed

Untuk melihat apa yang terjadi, mari kita buka laporan:

npx playwright show-report

Ini melayani laporan di server lokal dan membuka browser ke URL tersebut.

Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.

Perhatikan bagaimana dua kasus pengujian yang sama dijalankan, sekarang dengan browser chromium dan emulator perangkat Mobile Safari. Kita dapat melihat bahwa emulator membutuhkan waktu sedikit lebih lama untuk menjalankan setiap pengujian dibandingkan dengan mesin browser.

Kita dapat mengubah properti profil default melalui file konfigurasi Playwright (global) atau dalam file Spesifikasi Pengujian (penimpaan lokal) — namun untuk mencobanya, pertama-tama kita perlu memahami direktif use.

Sebelum kita melakukannya, mari kita reset file kita playwright.config.ts untuk menjalankan pengujian pada proyek chromium, firefox, dan webkit. Anda dapat membuat proyek Safari Seluler tetap aktif untuk saat ini.

Jelajahi opsi use

Playwright memiliki properti use untuk mengonfigurasi Test Runner demi fitur-fitur berikut:

• Dasar: Atur baseURL (peta ke rute "/") dan storageState (misalnya, muat autentikasi).
• Emulasi: Meniru perangkat nyata; misalnya, ponsel atau tablet.
• Jaringan: Mengonfigurasi koneksi; misalnya, berikan kredensial untuk autentikasi HTTP.
• Perekaman: Ambil jejak untuk membantu penelusuran kesalahan, atau cuplikan layar atau video.

Anda dapat mengatur opsi ini secara global dalam file konfigurasi (untuk semua pengujian) atau secara lokal hanya untuk pengujian atau grup pengujian tertentu.

Untuk mengaktifkan jejak dan menangkap cuplikan layar untuk proyek kami, mari kita aktifkan fitur Perekaman. Ini memungkinkan kita untuk mendapatkan pemahaman tingkat visual dan sistem tentang apa yang terjadi dalam eksekusi pengujian. Perbarui objek use tingkat atas di playwright.config.ts Anda sebagai berikut:

export default defineConfig({
  testDir: './tests',
  ..
  use: {
    trace: 'on',
    screenshot: 'on',
  },
  ..
});

Mari kita jalankan tes lagi.

npx playwright test

Perhatikan bagaimana total waktu yang diperlukan untuk menjalankan pengujian meningkat secara drastis. Mengaktifkan jejak dan media perekaman adalah tindakan intensif waktu dan harus digunakan dengan kebijaksanaan - biasanya untuk membantu men-debug masalah.

Running 4 tests using 3 workers
  4 passed

Untuk melihat apa yang terjadi, mari kita buka laporan HTML.

npx playwright show-report

Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.

Pilih baris untuk melihat pengujian tersebut secara terperinci.

Mengaktifkan opsi seperti perekaman mahal, jadi gunakan dengan kebijaksanaan; misalnya, untuk penelusuran kesalahan pada CI.

Mari kita lihat tampilan terperinci dari salah satu pengujian kita menggunakan proyek chromium seperti yang didefinisikan dalam file konfigurasi kita.

1. Tampilan detail menyertakan cuplikan layar (dari page.goto). Ini berguna untuk pengujian regresi visual.

   

2. Yang terpenting, kita mendapatkan tautan ke tracing untuk pengujian kami. Untuk membuka jejak, pilih tautan pelacakan dalam tampilan daftar atau gambar jejak dalam tampilan detail pengujian.

   

3. Jejak memberi kami pandangan terperinci tentang pengujian kami. Dari sana, kita dapat dengan mudah menelusuri setiap tindakan dan menjelajahi permintaan jaringan, konsol, dan bahkan menampilkan cuplikan DOM dan memeriksanya (misalnya, saat penelusuran kesalahan).

   

Mari kita kembali ke laporan dan memilih salah satu tes yang dijalankan pada proyek Mobile Safari kami. Halaman detail untuk proyek seluler mencerminkan tampilan profil yang disimulasikan, di mana kita sekali lagi dapat menelusuri jejak pengujian yang disimulasikan.

Mengaktifkan pelacakan untuk setiap eksekusi pengujian tidak disarankan untuk eksekusi produksi. Mari kita ubah konfigurasi kembali untuk menjalankan trace pada percobaan ulang pertama dari pengujian yang gagal. Dengan begitu, jika pengujian kami gagal pada CI, kami memiliki jejak untuk membantu men-debug masalah.

Mari kita hapus juga opsi cuplikan layar karena kita tidak membutuhkannya untuk saat ini.

export default defineConfig({
  testDir: './tests',
  ..
  use: {
    trace: 'on-first-retry',
  },
  ..
});

Kami membahas banyak hal di sini dan harus melanjutkan. Tetapi sebagai tantangan bagi diri Anda sendiri, cobalah beberapa opsi lain use dan jalankan pengujian untuk melihat bagaimana eksekusi dan pelaporan berubah. Misalnya, coba tirudark skema warna atau ubah viewport untuk mengambil alih default profil perangkat.

Anda belajar banyak tentang Konfigurasi Pengujian. Sekarang, mari kita jelajahi Spesifikasi Pengujian.