Vue Academy · Pelajaran

Pengujian Menyeluruh

Validasi seluruh alur pengguna dengan pengujian menyeluruh.

Pengujian Menyeluruh adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Menguji Seperti Pengguna

Pengujian menyeluruh dari awal hingga akhir menjalankan aplikasi nyata Anda dalam browser nyata, mengeklik tombol dan mengisi formulir persis seperti yang dilakukan pengguna. Pengujian ini memverifikasi bahwa semuanya, mulai dari antarmuka pengguna hingga bagian belakang, bekerja sama.

Mengapa Pengujian Menyeluruh?

Pengujian unit memeriksa bagian-bagian secara terpisah, tetapi hanya pengujian menyeluruh yang memastikan perjalanan lengkap: pengguna dapat masuk, bernavigasi, mengirim formulir, dan melihat hasilnya. Pengujian ini menemukan celah integrasi yang tidak dapat ditemukan oleh cara lain.

Memasang Cypress

Cypress adalah kerangka kerja pengujian menyeluruh yang populer dengan pelaksana pengujian interaktif. Pasang sebagai dependensi pengembangan, lalu buka pelaksananya.

npm install -D cypress
npx cypress open

Struktur Pengujian Cypress

Pengujian Cypress menggunakan describe untuk mengelompokkan pengujian dan it untuk setiap skenario, mengikuti sintaks pengujian yang sudah dikenal.

describe("Login flow", () => {
  it("logs in a user", () => {
    // steps go here
  })
})

Mengunjungi Halaman

Gunakan cy.visit untuk memuat URL dalam browser, yang menjadi titik awal sebagian besar pengujian.

cy.visit("http://localhost:5173/login")

Menemukan Elemen

cy.get memilih elemen dengan pemilih CSS. Cypress otomatis menunggu elemen muncul, sehingga mengurangi pengujian yang tidak stabil.

cy.get("input[name=email]")
cy.get("button[type=submit]")

Mengetik pada Kolom Masukan

Rangkai type pada kolom masukan yang dipilih untuk menyimulasikan pengetikan melalui papan ketik.

cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")

Mengeklik Elemen

Gunakan click untuk berinteraksi dengan tombol dan tautan, seperti yang dilakukan pengguna.

cy.get("button[type=submit]").click()

Memastikan Hasil

Setelah berinteraksi, pastikan hal yang seharusnya kini dilihat pengguna menggunakan should. Cypress akan mencoba kembali pemeriksaan hingga berhasil atau waktu tunggu habis.

cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")

Pengujian Ujung ke Ujung Lengkap

Menggabungkan semua langkah menghasilkan pengujian alur pengguna nyata yang mudah dibaca.

describe("Login flow", () => {
  it("logs in successfully", () => {
    cy.visit("/login")
    cy.get("input[name=email]").type("user@example.com")
    cy.get("input[name=password]").type("secret123")
    cy.get("button[type=submit]").click()
    cy.url().should("include", "/dashboard")
  })
})

Alternatif Playwright

Playwright adalah alat pengujian ujung ke ujung lain yang andal dengan konsep serupa: alat ini membuka peramban, menavigasi, berinteraksi, dan memeriksa hasil. Antarmukanya berbeda, tetapi pola pikir pengujiannya sama.

// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)

Uji Cepat

Uji pemahaman Anda tentang pengujian ujung ke ujung.

Ringkasan

Pengujian ujung ke ujung menjalankan aplikasi nyata di dalam peramban. Dengan Cypress, susun pengujian menggunakan describe/it, muat halaman dengan cy.visit, temukan elemen dengan cy.get, berinteraksi melalui type dan click, lalu verifikasi dengan should. Playwright mengikuti gagasan yang sama. Selanjutnya Anda akan mengoptimalkan dan merilis hasil pembuatan aplikasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengujian Menyeluruh” gratis?

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

Apa yang akan aku pelajari di “Pengujian Menyeluruh”?

Validasi seluruh alur pengguna dengan pengujian menyeluruh. Kamu berlatih Vue 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 Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue 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 3 dari 3.

Berapa lama pelajaran “Pengujian Menyeluruh” 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 Vue Academy ini?

Ya. Setiap pelajaran Vue 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 Vue Academy