Integrasi CI
Jalankan pengujian E2E dalam integrasi berkelanjutan.
Integrasi CI adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Mengapa Menjalankan E2E di CI
Pengujian E2E paling bermanfaat jika dijalankan secara otomatis pada setiap push atau pull request. Continuous Integration (CI) mendeteksi regresi sebelum perubahan digabungkan, sehingga alur login yang rusak tidak pernah sampai ke produksi tanpa diketahui.
Yang Diperlukan CI untuk Menjalankan E2E
Pekerjaan CI harus: memasang dependensi, memasang peramban Playwright, membangun atau menyajikan aplikasi Angular, lalu menjalankan pengujian tanpa antarmuka grafis. Mesin CI tidak memiliki tampilan, jadi pengujian secara default berjalan dalam mode tanpa antarmuka grafis.
Memasang Peramban di CI
Peramban tidak disimpan dalam repositori Anda. Pasang peramban tersebut di pipeline menggunakan pemasang Playwright, termasuk dependensi OS.
npm ci
npx playwright install --with-depsMembiarkan Playwright Memulai Aplikasi
Konfigurasi webServer memberi tahu Playwright untuk menjalankan aplikasi Anda sebelum pengujian dan mematikannya setelah selesai. Di CI, tetapkan reuseExistingServer: false agar server baru selalu dimulai.
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};Alur Kerja GitHub Actions
Alur kerja yang umum memeriksa kode, menyiapkan Node, memasang dependensi dan peramban, lalu menjalankan seluruh rangkaian pengujian.
# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright testBendera Tanpa Antarmuka Grafis dan CI
Playwright secara otomatis mendeteksi CI melalui variabel lingkungan CI dan menyesuaikan perilakunya: Playwright mengulangi pengujian yang gagal, melarang test.only, dan menggunakan lebih banyak pekerja dengan hati-hati. Anda juga dapat menetapkan jumlah pengulangan secara eksplisit.
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};Mempublikasikan Laporan HTML
Playwright menghasilkan laporan HTML. Unggah laporan tersebut sebagai artefak CI agar kegagalan dapat diperiksa setelah proses selesai, termasuk rekaman jejak dan tangkapan layar.
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/Merekam Jejak Saat Gagal
Konfigurasikan rekaman jejak agar hanya merekam pada pengulangan pertama. Dengan begitu, proses tetap cepat sekaligus memberi Anda pemutaran ulang lengkap atas setiap kegagalan untuk keperluan penelusuran kesalahan.
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};Sharding untuk Mempercepat Proses
Rangkaian pengujian yang besar dapat dibagi ke beberapa mesin yang berjalan secara paralel menggunakan --shard. Setiap pekerjaan CI menjalankan satu bagian, sehingga total waktu nyata dapat dipangkas.
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3Menggunakan Cache untuk Mempercepat CI
Simpan node_modules dan biner peramban Playwright dalam cache di antara proses berjalan agar pemasangan tidak mendominasi waktu pembangunan. Sebagian besar penyedia CI menyediakan tindakan cache dengan kunci berdasarkan berkas kunci Anda.
Menggagalkan Build dengan Benar
Playwright keluar dengan kode bukan nol jika ada pengujian yang gagal. Hal ini membuat CI menandai pekerjaan tersebut dengan warna merah dan memblokir penggabungan. Jangan mengabaikan kode keluar itu dengan || true, atau pengujian yang rusak akan dianggap berhasil tanpa diketahui.
Pemeriksaan Cepat
Apa yang memasang peramban di CI?
Ringkasan
Jalankan E2E pada setiap push dengan memasang dependensi dan peramban (playwright install --with-deps), membiarkan webServer memulai aplikasi, lalu menjalankannya tanpa antarmuka grafis dengan pengulangan yang menyesuaikan CI. Unggah laporan HTML dan rekaman jejak sebagai artefak, gunakan sharding untuk mempercepat proses, dan biarkan kode keluar bukan nol memblokir penggabungan yang bermasalah.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Integrasi CI” gratis?
Ya — teks lengkap “Integrasi CI” 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 “Integrasi CI”?
Jalankan pengujian E2E dalam integrasi berkelanjutan. 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 4 dari 4.
Berapa lama pelajaran “Integrasi CI” 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.