HTML Anlık Görüntü Testleri
Anlık görüntü testleriyle istenmeyen HTML değişikliklerini yakalayın
HTML Anlık Görüntü Testleri, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Anlık Görüntü Sınaması Nedir
Anlık görüntü sınaması, ilk çalıştırmada bir bileşenin veya sayfanın oluşturulmuş çıktısını kaydeder; sonraki çalıştırmalarda yeni çıktıyı kaydedilmiş anlık görüntüyle karşılaştırır. HTML çıktısındaki her değişiklik, anlık görüntü bilinçli olarak güncellenene kadar sınamanın başarısız olmasına neden olur.
Jest Anlık Görüntü Sınaması
Jest'in toMatchSnapshot() eşleştiricisi, bir değeri (JSX'in HTML'ye oluşturulmuş hâli de dâhil) serileştirir ve kaydedilmiş bir dosyayla karşılaştırır. Bilinçli değişiklikler yapıldığında npx jest -u anlık görüntülerini günceller. Sınamalar, yanlışlıkla yapılan oluşturma değişikliklerine karşı bir gerileme ağı görevi görür.
import { render } from "@testing-library/react";
import Button from "./Button";
test("Button renders consistently", () => {
const { container } = render(<Button>Save</Button>);
expect(container.innerHTML).toMatchSnapshot();
});Storybook Sınama Çalıştırıcısı
Storybook Sınama Çalıştırıcısı her hikâyeyi çalıştırır ve çıktısının anlık görüntüsünü axe (erişilebilirlik) ve DOM serileştirmesi aracılığıyla alır. Chromatic ile birleştirildiğinde bunun üzerine görsel gerileme denetimi ekler — DOM farklarına ek olarak piksel düzeyinde farklar da sağlar.
Percy veya Chromatic ile Görsel Gerileme Denetimi
Percy ve Chromatic, oluşturulmuş sayfaların görüntü olarak anlık görüntülerini alır ve görsel farkları ortaya çıkarır. DOM anlık görüntülerinin kaçırdığı CSS gerilemelerini yakalar (yazı tipi değişimi, kenar boşluğu ayarı veya renk kayması). DOM anlık görüntülerini (ucuz ve hızlı) görsel anlık görüntülerle (maliyetli ve kapsamlı) birlikte kullanın.
Anlık Görüntülerin Bakımı
"Çok kolay" değişen anlık görüntüler gürültüye dönüşür. Kararsız değerlerin (tarihler, id'ler, rastgele anahtarlar) anlık görüntüsünü almayın. Çalıştırmalar arasında meşru olarak değişen alanlar için Jest'in özellik eşleştiricilerini (expect.any(String)) kullanın. Anlık görüntüleri küçük ve odaklanmış tutun.
Anlık Görüntüleri Kod İncelemesine Dâhil Etme
Çekme isteklerindeki anlık görüntü dosyası farkları, doğrudan incelenmesi gereken temel içeriktir. İnceleyenler, DOM değişikliklerinin bilinçli ve istenen değişiklikler olduğunu doğrular — "basit" bir CSS değişikliğinin yanlışlıkla oluşturduğu zincirleme etkileri yakalar. Anlık görüntü farklarını diğer tüm farklar gibi ele alın.
Her Şeyin Anlık Görüntüsünü Almayın
Devasa üst düzey sayfa oluşturma çıktılarının anlık görüntüsünü almak kırılgandır; her küçük değişiklik devasa bir fark zincirini tetikler. Anlık görüntülerini bileşen düzeyinde alın: her Button, her Card, her FormField için ayrı ayrı. Sayfa düzeyindeki oluşturma çıktıları için bunun yerine görsel gerileme testleri kullanmak daha uygundur.
Anlık Görüntülerin Serileştirilmesi
Nasıl serileştireceğinizi seçin: tam HTML, sadeleştirilmiş DOM, yalnızca özellikler veya erişilebilirlik ağacı. Her biçim farklı gerilemeleri yakalar. Kullanıcı arayüzü bileşenleri için tam HTML en kapsamlı seçenektir; özellik odaklı mantık için yalnızca özellikleri kullanmak daha az maliyetlidir ve yanlış pozitif üretme olasılığı düşüktür.
Anlık Görüntüler Bozulduğunda
En yaygın neden, eşdeğer ancak farklı yapılandırılmış HTML üreten bir yeniden düzenlemedir. Farkı inceleyin: Değişiklik kasıtlı ve iyiyse anlık görüntüyü güncelleyin. Beklenmedikse temel koddaki sorunu düzeltin. İnceleme yapmadan asla körü körüne jest -u çalıştırmayın.
Tarayıcılar Arası Anlık Görüntüler
Görsel gerileme araçları birden çok tarayıcıda oluşturma yapar ve tarayıcıya özgü farklılıkları bildirir. Safari ile Chrome'da farklı oluşturulan CSS kurallarını yakalamak için bundan yararlanın; bu durum, erken benimseme aşamasındaki yeni düzen özelliklerinde yaygındır. Tarayıcılar arası anlık görüntüler olmadan bu tür gerilemeler yalnızca manuel QA sırasında yakalanır.
Diğer Testlerle Birlikte Kullanım
Anlık görüntüsü testleri gereklidir ancak tek başına yeterli değildir. İstenmeyen oluşturma değişikliklerini yakalar, ancak mantık hatalarını yakalayamazlar; örneğin düğmeye tıklamanın doğru işlemi yapıp yapmadığını kontrol etmezler. Davranış için birim testleriyle, kullanıcı akışları için uçtan uca testlerle birlikte kullanın; her katman farklı hataları yakalar.
Performans
Anlık görüntüsü testleri hızlıdır; dizeleri ve dosyaları karşılaştırırlar. Görsel gerileme testleri daha yavaştır; pikselleri oluşturur, görüntüleri karşılaştırır ve çoğu zaman bunu birden çok tarayıcıda yaparlar. Anlık görüntülerini her CI derlemesinde çalıştırın; CI bütçenize bağlı olarak görsel gerileme testlerini her PR'da, ancak her işlemde çalıştırmayabilirsiniz.
Bilginizi Sınayın
DOM anlık görüntüsü testleri neden genellikle Percy veya Chromatic gibi görsel gerileme testleriyle desteklenir?
Özet
Anlık görüntüsü testi, ilk çalıştırmada oluşturulmuş HTML'i yakalar ve sonraki çalıştırmalarda gerçekleşen her değişikliği bildirir. Bileşen DOM'u için Jest toMatchSnapshot, hikâyeler için Storybook Test Runner, piksel düzeyinde görsel gerileme için Percy/Chromatic kullanın. Anlık görüntülerini sayfa düzeyinde değil bileşen düzeyinde alın, kararsız değerleri hariç tutun ve PR'larda farkları dikkatle inceleyin. Kapsamlı denetim için bunları birim ve uçtan uca testlerle birleştirin.
Sıkça Sorulan Sorular
“HTML Anlık Görüntü Testleri” dersi ücretsiz mi?
Evet — “HTML Anlık Görüntü Testleri” 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“HTML Anlık Görüntü Testleri” dersinde ne öğreneceğim?
Anlık görüntü testleriyle istenmeyen HTML değişikliklerini yakalayın HTML 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.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML 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, 4 dersinin 4. dersidir.
“HTML Anlık Görüntü Testleri” 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML 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
- W3C İşaretleme Doğrulayıcısı
- Lighthouse HTML Denetimi
- Erişilebilirlik Testleri için Pa11y ve axe
- HTML Anlık Görüntü Testleri