Vue Academy · Ders

Uçtan Uca Test

Tam kullanıcı akışlarını uçtan uca testlerle doğrulayın.

3. ders / 313 adım

Uçtan Uca Test, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Kullanıcı Gibi Sınama Yapmak

Uçtan uca sınama, gerçek uygulamanızı gerçek bir tarayıcıda çalıştırır; düğmelere tıklar ve formları tam olarak bir kullanıcının yapacağı gibi doldurur. Kullanıcı arayüzünden arka uca kadar her şeyin birlikte çalıştığını doğrular.

Neden Uçtan Uca Sınama?

Birim sınamaları parçaları yalıtılmış biçimde kontrol eder; ancak yalnızca uçtan uca sınamalar tüm yolculuğu doğrular: bir kullanıcı oturum açabilir, gezinebilir, form gönderebilir ve sonucu görebilir. Başka hiçbir yöntemin yakalayamadığı entegrasyon eksiklerini bulurlar.

Cypress'i Kurma

Cypress, etkileşimli bir sınama çalıştırıcısına sahip popüler bir uçtan uca sınama çerçevesidir. Geliştirme bağımlılığı olarak kurun ve çalıştırıcısını açın.

npm install -D cypress
npx cypress open

Cypress Sınama Yapısı

Bir Cypress sınaması, sınamaları gruplamak için describe, her senaryo için de it kullanır ve tanıdık sınama sözdizimini yansıtır.

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

Sayfayı Ziyaret Etme

Tarayıcıda bir URL yüklemek için cy.visit kullanın; bu, çoğu sınamanın başlangıç noktasıdır.

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

Öğeleri Bulma

cy.get, öğeleri bir CSS seçicisiyle seçer. Cypress, öğelerin görünmesini otomatik olarak bekleyerek kararsız sınamaları azaltır.

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

Girdi Alanlarına Yazma

Klavyeyle giriş yapılmasını taklit etmek için seçili bir girdiye type ekleyin.

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

Öğelere Tıklama

Kullanıcının yapacağı gibi düğmelerle ve bağlantılarla etkileşim kurmak için click kullanın.

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

Sonucu Doğrulama

Etkileşimden sonra, kullanıcının artık görmesi gerekenleri should kullanarak doğrulayın. Cypress, doğrulamalar başarılı olana veya zaman aşımına uğrayana kadar onları yeniden dener.

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

Eksiksiz Uçtan Uca Sınama

Adımları bir araya getirmek, gerçek bir kullanıcı akışının okunabilir bir sınamasını sağlar.

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")
  })
})

Playwright Alternatifi

Playwright, benzer kavramlara sahip başka bir güçlü uçtan uca araçtır: bir tarayıcı başlatır, gezinir, etkileşim kurar ve doğrulama yapar. API'si farklıdır, ancak sınama yaklaşımı aynıdır.

// 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/)

Hızlı Kontrol

Uçtan uca sınama konusundaki bilginizi sınayın.

İnteraktif derste cevapla

Özet

Uçtan uca sınamalar, gerçek uygulamayı bir tarayıcıda çalıştırır. Cypress ile sınamaları describe/it kullanarak yapılandırın, sayfaları cy.visit ile yükleyin, öğeleri cy.get ile bulun, type ve click ile etkileşim kurun ve should ile doğrulayın. Playwright da aynı fikirleri izler. Sırada derlemenizi iyileştirip yayına almak var.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Uçtan Uca Test” dersi ücretsiz mi?

Evet — “Uçtan Uca Test” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Uçtan Uca Test” dersinde ne öğreneceğim?

Tam kullanıcı akışlarını uçtan uca testlerle doğrulayın. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.

“Uçtan Uca Test” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön