Ön Sırtı Testine Giriş

Sep 13, 2025

Nasıl Yapılır

Sayfa 1/2:

Farklı ön sınır testleri (ve ne zaman kullanılır)

Farklı ön sınır testleri (ve ne zaman kullanılır)
Bir test kültürünü kucaklamak ve uygulamak

Önleme kodunu test etmek, birçok geliştiriciye hala kafa karıştırıcı bir uygulama. Ancak, önündeki gelişme ile daha karmaşık hale gelmekte ve daha önce hiç olmadığı gibi stabilite ve tutarlılıktan sorumlu geliştiricilerle, önündeki testler, kod tabanınız içindeki eşit bir vatandaş olarak benimsenmelidir. Farklı test seçeneklerinizi parçalıyoruz ve en iyi şekilde kullanıldıkları durumları açıklıyoruz.

Frontend testi, çeşitli otomatik test stratejilerini kapsayan bir battaniye terimidir. Bunlardan bazıları, birim ve entegrasyon testi gibi, arka uç geliştirme topluluğunda yıllardır kabul edilen en iyi uygulama olmuştur. Diğer stratejiler daha yenidir ve şimdi arka taraftaki ve cephelerin gelişimindeki değişikliklerden kaynaklanıyor.

Bu makalenin sonunda, hangi test stratejilerinin takımınız ve kod tabancalarınızla en iyi uyduğunu değerlendirmeyi kendinizi rahat hissetmeniz gerekir. Aşağıdaki kod örnekleri, Yasemin Çerçevesi kullanılarak yazılacaktır, ancak kurallar ve süreçler çoğu test çerçevesinde benzerdir.

Kullanıcı test yazılımı en iyi parçaları

01. Birim testi

Birim testi, test gazilerinden biri, tüm test türlerinin en düşük seviyesindedir. Amacı, beklendiği gibi bağımsız olarak kodunuzun (birimler denilen) en küçük parçalarını sağlamaktır.

Bir ev için bir lego setinizi hayal edin. Binaya başlamadan önce, her bir parçanın her birinin hesaplandığından emin olmak istiyorsunuz (beş kırmızı kare, üç sarı dikdörtgen). Birim testi, bireysel kod kümelerinin - girdi doğrulama ve hesaplamalar gibi şeylerin, daha büyük özelliği oluşturmadan önce amaçlandığı şekilde çalıştığından emin olmaktır.

Tandem'deki birim testlerini 'bir şeyi iyi yap' mantosu ile düşünmeye yardımcı olur. Tek bir sorumluluğu olan bir kodunuz varsa, muhtemelen bunun için bir birim testi yazmak istersiniz.

Basit bir hesap makinesi için bir birim testi yazdığımız aşağıdaki kod snippet'e bakalım:

 Tanımla ("Hesap Makinesi İşlemleri", işlevi () {
  ("iki sayı eklemeli", işlevi () {
    Calculator.init ();
    var sonucu = calculator.addnumbers (7,3);
    beklemek (sonuç) .Tobe (10);
  });
});

Bizim Hesap makinesi Uygulama, hesaplamaların her zaman beklediğimiz şekilde bağımsız olarak çalışmasını sağlamak istiyoruz. Örnekte, birlikte iki sayı ekleyebileceğimizden emin olmak istiyoruz.

Yaptığımız ilk şey, Yasemin'in kullanmasıyla çalışacağımız testler dizisini tanımlamak. tanımlamak . Bu, bir test paketi oluşturur - uygulamanın belirli bir alanıyla ilgili testlerin gruplandırılması. Hesap makinemiz için, her hesaplama testini kendi süitinde gruplayacağız.

Süitler sadece kod organizasyonu için değil, aynı zamanda süitleri kendi başlarına çalıştırmanızı sağlıyorlar. Bir başvuru için yeni bir özellik üzerinde çalışıyorsanız, bu zaman alıcı olacağı gibi, aktif geliştirme sırasında her sınavı çalıştırmak istemezsiniz. Test Süitleri ayrı ayrı daha hızlı bir şekilde geliştirmenize izin verir.

Sonra, gerçek testlerimizi yazıyoruz. Kullanmak o İşlev, test ettiğimiz özelliği veya işlevi yazıyoruz. Örneğimiz ek fonksiyonu test ediyor, bu yüzden doğru çalıştığını onaylayan senaryolar çalıştıracağız.

Daha sonra, kodumuzun beklediğimiz gibi işlev gördüğü yerde test ettiğimiz test iddiamızı yazıyoruz. Hesap makinemizi başlatırız ve çalıştırıyoruz addnumbers Eklemek istediğimiz iki sayı ile işlev. Numarayı sonuç olarak saklıyoruz ve sonra bunun beklediğimiz numaraya eşit olduğunu iddia ediyoruz (bizim durumumuzda, 10).

Eğer addnumbers Doğru rakamları döndürme başarısız olur, testimiz başarısız olacaktır. Diğer hesaplamalarımız için benzer testler yapardık - çıkarma, çarpma, vb.

02. Kabul Testleri

Birim testleri her lego parçasının kontrol edilmesi Gibi ise, bir bina aşamasının tamamlanabileceği takdirde kabul testleri kontrol edilir. Sırf, tüm parçaların muhasebeleştirilmesi için talimatların uygun şekilde çalıştırılabileceği anlamına gelmez ve son modeli oluşturmanıza izin verecektir.

Kabul Testleri Koşu uygulamanızdan geçer ve belirlenmiş eylemler, kullanıcı girişleri ve kullanıcı akışları tamamlanabilir ve işleyiş sağlar.

Sadece başvurumuzun addnumbers İşlev doğru numarayı döndürür, hesap makinesi arayüzünün, doğru sonucu vermesi beklendiği gibi kesinlikle işlev göreceği anlamına gelmez. Ya düğmeleriniz devre dışı bırakılırsa veya hesaplama sonucu gösterilmez mi? Kabul Testleri bu soruları cevaplamamıza yardımcı olur.

 Tanımlamak ("Kayıt Olma Hatası Durumu", Function () {
  BT ("Geçersiz bilgi ile kaydolmaya izin vermemeli", işlevi () {
    var page = ziyaret ("/ home");
    page.fill_in ("Giriş [Name = '' e-posta ']", "bir e-posta değil");
    Page.Click ("Button [Type = Gönder]");
    Page.Click ("Button [Type = Gönder]");
    bekle (page.find ("# Signuperror"). Hasclass ("gizlenmiş")). tobefalsy ();
  });
});

Yapı, birim testimize çok benziyor: Bir süiti tanımlıyoruz tanımlamak , sonra testimizi o İşlev, daha sonra bazı kodları çalıştırın ve sonucunu kontrol edin.

Bununla birlikte, belirli fonksiyonlar ve değerlerin etrafında test etmek yerine, burada belirli bir iş akışının (kayıt akışının) bazı kötü bilgileri doldurduğumuzda beklendiği gibi davranmadığını kontrol ediyoruz. Burada, birimin test edilmesi, örneğin bir ünite olup olmayabilecek form doğrulamaları gibi, kimliğe sahip bir öğe tarafından gösterilen hata durumumuzu gösteren herhangi bir işlem gibi daha fazla çalışma eylemi vardır. imzalayan kimse .

Kabul Testleri, kilit deneyim akışlarının her zaman doğru şekilde çalıştığından emin olmak için harika bir yoldur. EDGE vakalarının etrafında testler eklemek ve QA takımlarınızın başvurunuzda bulmasına yardımcı olmak kolaydır.

Neye kabul testlerini yazacağını düşünürken, kullanıcı hikayeleriniz başlamak için harika bir yerdir. Kullanıcınız web sitenizle nasıl etkileşime girer ve bu etkileşimin beklenen sonucu nedir? Doğrulanmış bir alanın etrafındaki gereklilikler gibi işlev gereksinimleri gibi bir şeyle daha iyi eşleşen birim testinden farklıdır.

03. Görsel Regresyon Testi

Girişte belirtildiği gibi, bazı test türleri cephandin dünyasına özgüdür. Bunlardan ilki görsel regresyon testidir. Bu, kodunuzu test etmiyor, ancak kodunuzun işlenen sonucunu karşılaştırır - arayüzünüz - Uygulamanızın işlenen sürümüyle üretim, evreleme veya önceden değiştirilmiş bir yerel ortamda.

Bu, genellikle başsız bir tarayıcıda alınan ekran görüntülerini karşılaştırarak (sunucuda çalışan bir tarayıcı). Görüntü karşılaştırma araçları daha sonra iki çekim arasındaki farkları tespit edin.

Phantomcss gibi bir araç kullanarak, testleriniz test koşucusunun nerede gezinmesi gerektiğini, ekran görüntüsü alındığını belirtir ve çerçeve bu görünümlerde ortaya çıkan farklılıkları gösterir.

 Casper.Start ("/ home"). Sonra (işlev () {

  // formun ilk durumu
  Phantomcss.Screenshot ("# Signupform", "Kayıt Formu");

  // Kayıt Ol düğmesine basın (hatayı tetiklemelidir)
  casper.click ("düğme # kayıt");

  // UI bileşeninin bir ekran görüntüsünü alın
  Phantomcss.Screenshot ("# Signupform", "Kayıt formu hatası");

  // Formu İsim Öznitelikleri ve AMP tarafından doldurun; Sunmak
  casper.fill ("# signupform", {
    Adı: "Alicia Sedlock",
    E-posta: "[email protected]"
  }, doğru);

  // Başarı Devletinin ikinci ekran görüntüsünü alın
 Phantomcss.Screenshot ("# Signupform", "Kaydolma Formu Başarısı");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — Bu görsel regresyon çerçevesi, başvurunuzdaki karar ağaçlarını göstermekte, geliştirme dışındaki kişilere karmaşıklığı gösteriyor

Kabul ve birim testinin aksine, görsel regresyon testi yeni bir şey inşa ediyorsanız fayda sağlamak zordur. UI'niz, aktif geliştirme sürecinde hızlı ve sert değişiklikler göreceği için, arayüzün parçaları görsel olarak tamamlandığında bu testleri koruyacaksınız. Bu nedenle, görsel regresyon testleri yazmanız gereken son testlerdir.

Halen, birçok görsel regresyon aleti bir miktar manuel çaba gerektirir. Şubenizdeki geliştirmeye başlamadan önce ekran görüntüsünüzü yakalamanız gerekebilir veya arayüzde değişiklik yaparken temel ekran görüntülerini manuel olarak güncellemeniz gerekebilir.

Bu sadece geliştirmenin doğası nedeniyle - değişiklikler Ui Kasıtlı olabilir, ancak testler sadece 'evet, bu aynıdır' veya 'Hayır, bu farklı ". Bununla birlikte, eğer görsel gerilemeler başvurunuzdaki bir ağrı noktası ise, bu yaklaşım, sürekli olarak sabitleme gerilemesiyle karşılaştırıldığında, ekip zamanınızı ve çabanızı genel olarak kaydedebilir.

04. Erişilebilirlik ve Performans Testleri

Frontend testi etrafındaki kültür ve farkındalık arttıkça, ekosistemin çeşitli yönlerini test etme kabiliyetimiz de. Artan odaklanın ulaşılabilirlik Ve teknik kültürümüzdeki performans, bunu test süitinize entegre etmek, bu kavramların bir öncelik olmasını sağlamaya yardımcı olur.

Performans bütçelerini veya erişilebilirlik standartlarını uygulayan sorunlar yaşıyorsanız, bu gereksinimleri insanların zihinlerinin ön saflarında tutmanın bir yoludur.

Bu kontrollerin her ikisi de, iş akışınıza, grunt ve gulp gibi yapı araçlarıyla veya terminalinizde yarı el ile entegre edilebilir. Performans bütçeleri için, Grunt-PerfBudget gibi bir araç, sitenizi belirli bir görev içinde otomatik olarak WebPagetest üzerinden çalıştırma yeteneği sunar.

Ancak, bir görev koşulu kullanmıyorsanız, perfbudget'ı bağımsız bir NPM modülü olarak da tutabilir ve testleri manuel olarak çalıştırabilirsiniz.

İşte bunu terminal boyunca çalıştırmak gibi görünüyor:

 Perfbudget - SurlIdIction.com - TEYHE [WebPagetest API Anahtarı] --Speedindex 2000 --Render 400

Ve aynı şekilde, Grunt ile ayarlama:

perfbudget: {
  varsayılan: {
    Seçenekler: {
      URL: 'http://aliciity.com',
      Anahtar: 'WebPagetest API Key',
      bütçe: {
        SpeedIndex: '2000',
        render: '400'
      }
    }
  }
}

[...]

grunt.registertask ('varsayılan', ['jshint', 'perfbudget']);

Aynı seçenekler erişilebilirlik testi için kullanılabilir. PA11Y için ya koşabilirsin pa11y Tarayıcınızda çıktı için komut verin veya bu adımı otomatikleştirmek için bir görevi ayarlayın. Terminalde:

 pa11y aliciity.com

// NPM yüklendikten sonra JavaScript komutu olarak

var pa11y = ('pa11y') gerektirir; // pa11y gerektir
var testi = pa11y (); // pa11y'yi ayarlamaya hazır edinin

test.run ('alicidirity.com', işlevi (hata, sonuçlar) {
  // SONUÇLARIMIZI SONUÇLARI GİRİŞ
});

Bu kategorideki çoğu araç oldukça tak ve oynar, aynı zamanda testlerin nasıl çalıştığını özelleştirme seçeneği sunar - örneğin, bunları belirli WCAG standartlarını görmezden gelmelerini sağlayabilirsiniz.

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation — Resemble.js popüler bir görüntü karşılaştırma kütüphanesidir ve görsel farklılaşmayı tetikleyen şey üzerinde size çok fazla kontrol sağlar.

Sonraki Sayfa: İş akışınıza test nasıl tanıtılır

Geçerli sayfa: Farklı ön sınır testleri (ve ne zaman kullanılır)

Sonraki Sayfa Bir test kültürünü kucaklamak ve uygulamak

Ön Sırtı Testine Giriş

01. Birim testi

02. Kabul Testleri

03. Görsel Regresyon Testi

04. Erişilebilirlik ve Performans Testleri

Nasıl Yapılır - En Popüler Makaleler

Bir at nasıl çizilir

Chiaroscuro Art: Adım Adım Kılavuzu

Animasyonlu bir yazma etkisi nasıl oluşturulur

Javascript ile titrek bir metin efekti oluşturun

Yağlı boya ile parlayan renkler nasıl oluşturulur

Gerçekçi 3D Aydınlatma için 12 İpuçları

Bir köpek kalem portresi çizin

3ds Max'te bir meteor duşu oluşturun

Kategoriler