Memahami Spesifikasi Pengujian

  • 9 menit

Pengujian default berjalan pada spesifikasi pengujian/example.spec.ts . Mari kita bongkar itu untuk melihat isinya:

import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Jika Anda melakukan pengembangan berbasis pengujian atau pengujian end-to-end, struktur dan format pengujian harus akrab. Tetapi Anda mungkin melihat beberapa konsep baru juga. Sebelum kita menyelaminya, mari kita bicara tentang struktur pengujian.

Memahami hierarki pengujian

Berikut adalah cara kami mengatur tes kami di Playwright.

  • Setiap metode test() dalam spesifikasi tersebut adalah Test Case. Saat dijalankan dalam konfigurasi dengan beberapa proyek, setiap proyek membuat instans versi Kasus Pengujian ini dan mengonfigurasinya agar sesuai dengan persyaratan proyek.
  • Setiap pernyataan yang dapat dieksekusi dalam Kasus Pengujian adalah tindakan pengujian yang dapat dilacak di alur alat mode pelapor, penampil jejak, atau UI.
  • Kasus pengujian dapat dikelompokkan secara eksplisit ke Test Suites menggunakan fungsi test.describe(). Anda dapat melihat contoh ini dalam file test-examples/demo-todo-app-spec.ts kami. Kami akan meninjau kembali kasus pengujian nanti.
  • Kasus pengujian dikelompokkan secara implisit ke dalam Suites berdasarkan proyek serta file tempat mereka berada, sehingga memungkinkan Playwright untuk menargetkan grup kasus pengujian dengan berbagai cara untuk eksekusi.
  • Setiap pengujian memiliki rangkaian Root dengan rangkaian Proyek sebagai anak untuk setiap proyek yang dikonfigurasi. Rangkaian proyek memiliki suite File anak untuk setiap spesifikasi pengujian yang diidentifikasi untuk eksekusi tersebut. Rangkaian File dapat memiliki objek Kasus Pengujian (individual) dan objek Test Suite (dikelompokkan secara eksplisit menggunakan describe) sebagai turunan.

Direktif test.describe memungkinkan kita untuk mengelompokkan objek Kasus Pengujian secara logis dalam file sehingga kita dapat melakukan hal-hal seperti terapkan beforeEach dan afterEach kait ke semua pengujian dalam grup. Lihat cuplikan berikut dari test-examples/demo-todo-app.spec.ts untuk referensi:

test.describe('Mark all as completed', () => {
  test.beforeEach(async ({ page }) => {
    await createDefaultTodos(page);
    await checkNumberOfTodosInLocalStorage(page, 3);
  });

  test.afterEach(async ({ page }) => {
    await checkNumberOfTodosInLocalStorage(page, 3);
  });

  test('should allow me to mark all items as completed', async ({ page }) => {
    // test actions details omitted for clarity
  });

  test('should allow me to clear the complete state of all items', async ({ page }) => {
    // test actions details omitted for clarity
  });

  test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
    // test actions details omitted for clarity
  });
});

Memahami struktur pengujian

Kita dapat melihat salah satu dari dua cuplikan Spesifikasi Pengujian sebelumnya (yang pertama dari example.spec.ts, yang kedua dari demo-todo-app.spec.ts) untuk diskusi ini. Mari kita gunakan yang kedua karena memiliki sedikit detail lebih lanjut yang relevan.

Pengujian Playwright umumnya, mengikuti pola Arrange-Act-Assert:

  • Atur: Menyiapkan lingkungan untuk pengujian. Ini dapat mencakup penyediaan fasilitas yang tepat, tetapi juga menjalankan beforeEach/beforeAll hooks yang menyiapkan kondisi awal untuk pengujian tersebut.
  • Act: Ini adalah langkah-langkah dalam pengujian yang menemukan elemen yang tepat untuk berinteraksi, lalu bertindak pada elemen tersebut. Misalnya, pengujian mungkin menemukan tombol, lalu memilihnya. Tindakan lain termasuk centang/hapus centang (kotak centang), isi (formulir), hover (mouseover), fokus (pada elemen), tekan (tombol tunggal), dan sebagainya.
  • Pernyataan: Pernyataan ini memvalidasi hasil yang diharapkan dari tindakan. Playwright mendukung pernyataan berbasis web terlebih dahulu , di mana pernyataan generik (dengan perintah expect) dapat digabungkan dengan pencocok asinkron(untuk Locator) untuk memastikan bahwa elemen target siap sebelum mengevaluasi kondisi yang ditegaskan.

Setelah Anda memahami ini, akan lebih mudah untuk memahami, menulis, dan memperbaiki spesifikasi pengujian Anda menggunakan alat Playwright.

Memahami komponen pengujian

Mari kita lihat konsep-konsep ini beraksi dengan meninjau tes/example.spec.ts yang telah kita bahas sebelumnya di unit ini.

import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
  1. Atur: Tidak ada kait eksplisit dalam spesifikasi pengujian ini, namun page adalah Fixture yang juga mendukung tujuan ini.
  2. Act: page.goto adalah contoh tindakan Navigasi tempat browser mengotomatiskan tindakan pengguna menavigasi ke URL tersebut.
  3. Pernyataan: expect.(\<locator>).toBeVisible() adalah contoh LocatorAssertion di mana Playwright menunggu elemen yang terletak siap (menggunakan percobaan ulang) sebelum mengevaluasi pernyataan (apakah terlihat?).

Dengan contoh sederhana ini, Anda tahu tiga konsep kuat dalam Pengujian Playwright:

  • Pengaturan: Untuk menetapkan lingkungan dan isolasi pengujian.
  • Locator: Untuk menemukan elemen dengan auto-wait dan auto-retry.
  • Pernyataan: Untuk memvalidasi hasil tindakan otomatis pernyataan web.

Luangkan beberapa menit untuk membiasakan diri dengan dokumentasi untuk ketiga fitur dan API tersebut. Kemudian, Anda harus siap memulai merancang dan menulis spesifikasi end-to-end untuk aplikasi contoh.

Unggul! Sekarang mari kita bahas Alat Pengembang inti untuk Playwright!