Angular Academy · Pelajaran

Gambaran Umum Pengujian E2E

Pahami peran pengujian menyeluruh.

Gambaran Umum Pengujian E2E adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Makna Pengujian End-to-End

Pengujian end-to-end (E2E) menjalankan aplikasi seperti yang dilakukan pengguna nyata: membuka aplikasi di peramban nyata, berpindah halaman, mengeklik tombol, mengetikkan data ke formulir, dan memeriksa hal yang terlihat. Pengujian ini memastikan seluruh tumpukan bekerja bersama, bukan hanya satu unit.

Piramida Pengujian

Kumpulan pengujian yang sehat memiliki banyak pengujian unit yang cepat, lebih sedikit pengujian integrasi, dan sedikit pengujian E2E yang lambat tetapi bernilai tinggi. E2E berada di puncak: cakupan per pengujian paling besar, tetapi juga paling mahal untuk dijalankan dan dipelihara.

Unit: fungsi/komponen secara terisolasi
Integrasi: beberapa unit secara bersama-sama
E2E: aplikasi yang berjalan dari awal hingga akhir

Hal yang Ditemukan E2E tetapi Terlewat oleh Unit

Pengujian E2E menemukan masalah yang hanya terlihat saat bagian-bagian nyata terhubung: kesalahan perutean, integrasi API yang rusak, DOM yang hilang setelah penerapan, CSS yang menyembunyikan tombol, atau loop pengalihan autentikasi. Pengujian unit dengan dependensi tiruan dapat berhasil, sementara aplikasi nyata rusak.

Sejarah Angular dan E2E

Angular versi lama menyertakan Protractor untuk E2E. Protractor tidak lagi dipelihara dan telah dihapus dari proyek baru. Kini Angular CLI memungkinkan Anda memilih pelaksana E2E pihak ketiga; Playwright dan Cypress adalah pilihan yang paling populer.

Mengapa Playwright

Playwright adalah kerangka kerja E2E modern dan cepat dari Microsoft. Playwright mengendalikan Chromium, Firefox, dan WebKit, secara otomatis menunggu elemen, mengisolasi pengujian dengan konteks peramban baru, serta memiliki alat penelusuran kesalahan yang sangat baik. Kursus ini menggunakan Playwright.

Menambahkan Playwright ke Angular

Anda dapat membuat kerangka Playwright dengan penginstalnya sendiri. Penginstal tersebut membuat playwright.config.ts dan folder contoh pengujian.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Anatomi Pengujian E2E

Pengujian E2E memulai aplikasi, melakukan tindakan pengguna, dan memeriksa halaman. Alurnya adalah: menyiapkan (menavigasi), bertindak (berinteraksi), memeriksa (memastikan hasil yang terlihat).

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

E2E Berjalan pada Server Nyata

E2E memerlukan aplikasi Angular Anda benar-benar berjalan. Biasanya konfigurasi memulai ng serve (atau menyajikan build produksi) dan mengarahkan pengujian ke URL tersebut melalui baseURL dan entri webServer.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

Jaga Kumpulan E2E Tetap Kecil dan Penting

Karena pengujian E2E lambat dan dapat tidak stabil, cakup hanya alur pengguna yang penting: login, pembayaran, dan alur utama yang berhasil. Pindahkan kasus tepi yang terperinci ke pengujian unit dan integrasi agar dapat berjalan lebih cepat dan andal.

Ketidakstabilan dan Determinisme

Tantangan terbesar E2E adalah ketidakstabilan, yaitu pengujian yang gagal secara tidak menentu. Hindari jeda sleep tetap; andalkan pemeriksaan yang menunggu otomatis dari Playwright. Kendalikan data pengujian agar setiap proses dimulai dari state yang diketahui.

E2E dibandingkan Pengujian Komponen

Pengujian komponen Angular (TestBed) memeriksa komponen dalam lingkungan sintetis. E2E memeriksa aplikasi yang diterapkan di peramban nyata. Keduanya saling melengkapi: gunakan TestBed untuk pemeriksaan logika/DOM yang cepat, dan E2E untuk memastikan seluruh produk berfungsi.

Pemeriksaan Cepat

Apa yang membedakan E2E dari pengujian unit?

Ringkasan

Pengujian E2E menjalankan seluruh aplikasi di peramban nyata untuk menemukan masalah integrasi dan perutean yang terlewat oleh pengujian unit. E2E berada di puncak piramida pengujian: jumlahnya sedikit, lambat, tetapi bernilai tinggi. Proyek Angular kini menggunakan pelaksana seperti Playwright, yang memulai server dan menjalankan alur pengguna yang penting.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Gambaran Umum Pengujian E2E” gratis?

Ya — teks lengkap “Gambaran Umum Pengujian E2E” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Gambaran Umum Pengujian E2E”?

Pahami peran pengujian menyeluruh. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Gambaran Umum Pengujian E2E” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy