Geçen hafta, birden fazla WordPress sitesini yöneten bir arkadaşım panik içinde beni aradı. Rutin bir eklenti güncellemesi istemcisinin gezinme menüsünü bozmuştu, ancak müşteriler şikayet etmeye başlayana kadar fark etmemişti.
Bu, sayısız kez gördüğüm yaygın bir sorundur ve görsel regresyon testinin WordPress web sitesi sahipleri için bu kadar önemli olmasının nedeni budur.
Görsel regresyon testi karmaşık gelebilir. Ancak, aslında saatlerce süren manuel kontrollerden tasarruf etmenizi ve utanç verici düzen sorunlarını önlemenizi sağlayabilecek basit bir çözümdür.
Genellikle, sayfalarınızın öncesi ve sonrası ekran görüntülerini otomatik olarak karşılaştırarak çalışır. Bu, sitenizin görünümünü bozabilecek en küçük görsel değişiklikleri bile yakalamaya yardımcı olur. 🔍
Bu kılavuzda, WordPress sitenizde görsel regresyon testini nasıl yapacağınızı göstereceğim. Çok sayıda araç ve yöntemi test ettikten sonra, herhangi bir kodlama bilgisi veya teknik uzmanlık gerektirmeyen en güvenilir çözümü buldum.
Görsel Gerileme Testi Nedir ve Neden Önemlidir? 🤔
Sitenizi her güncellediğinizde — bu bir WordPress çekirdek güncellemesi, yeni bir eklenti, tema değişikliği veya sadece küçük bir kod değişikliği olsun — ön yüzde bir şeylerin yerinden kayma ihtimali vardır.
Örneğin, bir düğme kaybolabilir, düzeniniz bozulabilir veya bir ürün resmi düzgün yüklenmeyi durdurabilir.
Sorun mu? Bu görsel hatalar genellikle bir ziyaretçi bir iletişim formu aracılığıyla veya tasarım geri bildirim anketi aracılığıyla işaret edene kadar fark edilmez.
O zamana kadar, sitenizin kullanıcı deneyimine verilen zarar zaten meydana gelmiş olabilir.
İşte tam burada görsel regresyon testi devreye giriyor.
Süreç basittir: bir güncellemeden önce ve sonra sayfalarınızın anlık görüntülerini alın, ardından değişen herhangi bir şeyi tespit etmek için bunları karşılaştırın.
Ve bir staging sitesinde test yapıyorsanız (öneririz), canlıya geçmeden önce görsel sorunları yakalamak için güncellemeleri güvenle yapabilir ve karşılaştırmalar çalıştırabilirsiniz.
İyi haber? Bunu manuel olarak yapmak zorunda değilsiniz.
VRTs, Percy veya BackstopJS gibi görsel regresyon testi araçlarıyla, ekran görüntüsü karşılaştırmalarını otomatikleştirebilir ve sitenizin farklı ekran boyutlarında nasıl göründüğünü kontrol edebilirsiniz — bu da masaüstü, tablet ve mobil cihazlarda düzen sorunlarını yakalamanıza yardımcı olur.
Bu, WordPress kullanıcıları için neden önemlidir?
Bir WordPress web sitesi yönetiyorsanız, görsel regresyon testi zaman kazandıran bir güvenlik ağıdır. Bir güncellemeden sonra her sayfayı tek tek kontrol etmek yerine, bu araç size neyin değiştiğine dair görsel bir rapor sunar ve düzeltmeniz gereken bir şey olup olmadığını gösterir.
Ajansların birden fazla WordPress sitesinde güncelleme yapması, serbest çalışanların müşteri web sitelerini yönetmesi veya ürün ve ödeme sayfalarının bozulmadığından emin olmak isteyen çevrimiçi mağaza sahipleri gibi birçok senaryoda özellikle yardımcı olur.
Kısacası, görsel regresyon testi sinir bozucu sürprizlerden kaçınmanıza, zamandan tasarruf etmenize ve WordPress sitenizin sorunsuz çalışmasını sağlamanıza yardımcı olur.
Bunu söyledikten sonra, WordPress'te görsel regresyon testini nasıl kolayca yapacağınızı paylaşacağım. İşte bu kılavuzda ele alacağım tüm adımlara hızlı bir genel bakış:
- Adım 1: Görsel Regresyon Testi Eklentisini Yükleyin ve Etkinleştirin
- Adım 2: VRTs Eklenti Ayarlarını Yapılandırın
- Adım 3: Test Edilecek Yeni Sayfalar veya Yazılar Ekle
- Adım 4: Görsel Farklılıkları Kontrol Edin
- Adım 5: Gözden Geçirin ve Harekete Geçin
- WordPress'te Görsel Regresyon Testi Çalıştırma SSS
🧑💻 Profesyonel İpucu: Görsel gerileme testleri çalıştırmadan veya tasarım değişiklikleri yapmadan önce, bir hazırlık sitesi kullanmanızı şiddetle tavsiye ederim.
Bir hazırlık sitesi, canlı web sitenizin özel bir klonudur; burada kullanıcılarınızı etkilemeden güncellemeleri, eklenti değişikliklerini veya tasarım ince ayarlarını güvenle test edebilirsiniz. Bu, canlıya geçmeden önce düzen sorunlarını, eksik düğmeleri veya görsel hataları yakalamanıza yardımcı olur.
Kurulumu nasıl yapacağınızdan emin değil misiniz? Tüm ayrıntılar için bir WordPress staging sitesi oluşturma hakkındaki adım adım kılavuzumuza bakın.
Adım 1: Görsel Regresyon Testi Eklentisini Yükleyin ve Etkinleştirin
Bu eğitimde, VRTs eklentisini kullanacağım çünkü yeni başlayanlar için uygundur ve görsel gerileme testi için kullanımı çok kolaydır. Bu, kaymış bir düzen, eksik bir düğme veya bir güncellemeden sonra bozuk bir öğe olsun, VRTs bunu erken fark etmenize yardımcı olur.
Nasıl çalıştığı şöyledir: Eklenti, seçtiğiniz sayfaların ekran görüntülerini alır. Ardından, karşılaştırmaları manuel olarak tetikleyebilir veya sitenizde bir eklentiyi güncellemek veya temanızı ayarlamak gibi değişiklikler yaptıktan sonra otomatik olarak çalışacak şekilde zamanlayabilirsiniz.
Eklenti daha sonra ‘önce’ ve ‘sonra’ ekran görüntülerini yan yana karşılaştırır ve herhangi bir görsel farkı vurgular.
Bu nedenle, her sayfayı manuel olarak kontrol etmek yerine, neyin değiştiğini ve herhangi bir şeyin yanlış görünüp görünmediğini gösteren hızlı bir görsel rapor alırsınız.
Eklentiyi yüklemek için öncelikle VRTs web sitesini ziyaret etmeniz ve 'Ücretsiz başlayın' düğmesine tıklayarak bir plana kaydolmanız gerekir.
Ardından planlardan birini seçebilirsiniz. Ücretsiz plan, tek bir alan adında günde 3 sayfaya kadar test etmenize ve günlük testler planlamanıza olanak tanır.
Diğer yandan, ücretli planlar daha yüksek sayıda sayfayı test etmenize, manuel testler çalıştırmanıza ve WordPress çekirdek, eklenti ve tema güncellemelerinden sonra otomatik olarak görsel regresyon testleri çalıştırmanıza olanak tanır.
Kullanmak istediğiniz planın altındaki 'Şimdi satın al' veya 'Şimdi yükle' düğmesine tıklamanız yeterlidir.
Ardından, VRT'nin web sitesinde bir hesap için kaydolma ve ödeme bilgilerinizi ekleme talimatlarını izleyin.
Ödemeyi tamamladıktan sonra, eklentiyi .zip dosyası olarak indirebileceğiniz VRT'ler kontrol paneline yönlendirileceksiniz.
Ardından, sadece Eklentiler » Eklenti Ekle'ye gidin ve 'Eklenti Yükle' düğmesine tıklayın. Buradan, az önce indirdiğiniz VRTs eklentisinin .zip dosyasını seçebilirsiniz.
Eklenti yüklendikten sonra etkinleştirdiğinizden emin olun. Tam ayrıntılar için, bir WordPress eklentisinin nasıl kurulacağına dair rehberimize bakabilirsiniz.
Adım 2: VRTs Eklenti Ayarlarını Yapılandırın
Eklentiyi etkinleştirdikten sonra, görsel regresyon testlerinizin ne zaman çalışacağını ayarlama zamanı.
WordPress yönetici menünüzdeki VRT'ler » Ayarlar bölümüne gidin.
İçeri girdikten sonra, aşağı kaydırarak 'Tetikleyiciler' bölümüne gidebilirsiniz — eklentiye ne zaman otomatik olarak anlık görüntüler alıp karşılaştıracağını söylediğiniz yer burasıdır.
Mevcut seçenekler şunlardır:
- Her 24 Saatte Bir Test Yapın (Ücretsiz) – Bu varsayılan ayardır. VRT'ler, seçtiğiniz gönderileri veya sayfaları günde bir kez görsel değişiklikler için otomatik olarak kontrol edecektir.
- WordPress ve eklenti güncellemelerinden sonra Testleri Çalıştırın (Pro) – Güncellemelerin neden olduğu düzen sorunlarını, tam da oldukları anda yakalamak için harikadır.
- En sevdiğiniz uygulamalarla testleri çalıştırın (Pro) – Webhook'lar aracılığıyla VRT'leri harici araçlar veya iş akışlarıyla bağlayın.
- İsteğe bağlı testleri çalıştırın (Pro) – Doğrudan WordPress panonuzdan ihtiyaç duyduğunuzda testleri manuel olarak tetikleyin.
İş akışınıza (veya lisansınıza) uyan tetikleyiciyi seçtikten sonra, sayfanın altındaki 'Değişiklikleri Kaydet' düğmesine tıklamanız yeterlidir.
Adım 3: Test Edilecek Yeni Sayfalar veya Yazılar Ekle
Eklenti ayarlarını yapılandırdıktan sonra, görsel gerileme testlerinize dahil etmek istediğiniz sayfa veya yazıları seçme zamanı.
Şimdi görsel testlerinizi yönetip çalıştıracağınız 'Testler' sekmesine geçelim.
Buradan 'Yeni Ekle' düğmesine tıklayabilirsiniz. Bu, test etmek için yazılar veya sayfalar seçmenizi sağlar.
Açılan açılır pencerede, görsel regresyon testini uygulamak istediğiniz sayfaları veya gönderileri seçmeniz gerekir.
Ardından, seçimlerinizi onaylamak için ‘Yeni Test Ekle’ye tıklayın.
VRTs eklentisi, seçilen her sayfanın ilk anlık görüntüsünü alacaktır. Bu, temel çizginiz olarak işlev görür — temelde gönderilerinizin veya sayfalarınızın şu anda nasıl göründüğünün bir “öncesi” sürümü.
Testinizi ayarladıktan sonra, ilk anlık görüntüyü yüklemek için sayfayı yenilemeniz gerektiğine dair bir talimat göreceksiniz. Devam edin ve tam da bunu yapın.
Bu yapıldıktan sonra, test için eklediğiniz sayfa veya gönderi anlık görüntüsüne bir bağlantı bulacaksınız.
Ayrıca, ‘Test Durumu’nun bir sonraki gün için otomatik olarak ‘Zamanlanmış’ olarak ayarlandığını göreceksiniz. Bunun nedeni, VRT'lerin ücretsiz sürümünün testleri 24 saatlik bir programa göre çalıştırmasıdır.
İlk ekran görüntüsünü kontrol etmek için ‘Ekran Görüntüsünü Görüntüle’ bağlantısına tıklayabilirsiniz.
Bu, yeni bir sekmede şöyle açılacaktır:
Şimdi, sitenizde ihtiyacınız olan değişiklikleri yapabilirsiniz. Ardından, karşılaştırmayı gözden geçirmek ve beklenmeyen görsel sorunları tespit etmek için yarın geri gelin.
Adım 4: Görsel Farklılıkları Kontrol Edin
Test tamamlandıktan ve herhangi bir görsel hata tespit edildikten sonra, VRT'ler » Çalıştırmalar sekmesinde bir bildirim uyarısı görmelisiniz.
İçeri girdikten sonra, değişiklik tespit edilen çalıştırmanın üzerine gelebilirsiniz.
Ardından, göründüğünde ‘Detayları Göster’ bağlantısına tıklayın.
Bir sonraki ekranda, sayfanızın yan yana karşılaştırmasını göreceksiniz; bu, sayfanın öncesi ve sonrası sürümlerini gösterir.
Eklenti, görsel farklılıkları otomatik olarak vurgular, böylece şunları hızla tespit edebilirsiniz:
- Düzen Kaymaları ve Hizalanmamış Öğeler: Bir eklenti güncellemesi veya tema değişikliği sonrasında düğmelerin yerinden oynaması veya metnin etrafta zıplaması gibi tasarımınız değişirse, VRT'ler bunu işaretleyecektir.
- Eksik veya Bozuk Öğeler: Eksik bir resim, CTA düğmesi veya yerleştirilmiş bir form olsun, VRT'ler beklenmedik bir şekilde kaybolan herhangi bir şeyi tespit etmeyi kolaylaştırır, bu özellikle e-ticaret veya açılış sayfaları için kullanışlıdır.
- Beklenmeyen İçerik Değişiklikleri: Eklenti ayrıca metin, bağlantı veya resimlerdeki değişiklikler konusunda sizi uyarır, böylece kullanıcılar fark etmeden yetkisiz düzenlemeleri veya yayınlama hatalarını yakalayabilirsiniz.
Eski ve yeni sürümler arasında gezinmek ve tam değişiklikleri görsel olarak doğrulamak için ekranın ortasındaki sürükleme tutamacını kullanabilirsiniz.
Adım 5: Gözden Geçirin ve Harekete Geçin
Bir görsel regresyon testi çalıştırdıktan sonra, sonuçlara göre harekete geçebilirsiniz. İşte sonra yapabilecekleriniz:
- Sayfayı manuel olarak düzenleyin: Değişiklikler küçükse, düzeni ayarlamak, öğeleri taşımak veya eksik özellikleri geri eklemek gibi sayfayı düzenleyerek sorunları doğrudan düzeltebilirsiniz.
- Yedeğe Geri Dönün: Değişiklikler daha büyük veya düzeltilmesi daha zorsa, web sitesi yedeğinizi veya sürüm geçmişini kullanarak sayfayı önceki bir sürüme geri yükleyebilirsiniz. Bu, sitenizde sorun bırakmaktan kaçınmanıza yardımcı olur.
✋ Bir yedekleme aracı önerisine mi ihtiyacınız var? Duplicator mükemmel bir seçenektir. Kullanımı kolaydır ve WordPress sitenizi sadece birkaç tıklamayla klonlamanıza olanak tanır.
İş web sitelerimizden bazıları şu anda yedeklemeler ve site geçişleri için Duplicator kullanıyor ve bunu denemenizi şiddetle tavsiye ederim. Daha fazla bilgi edinmek için tam Duplicator incelememizi okuyun!
WordPress'te Görsel Regresyon Testi Çalıştırma SSS
Görsel regresyon testiyle yeni başlıyorsanız, yalnız değilsiniz. İşte WordPress kullanıcılarından ve geliştiricilerinden sıkça duyduğum yaygın sorulara hızlı yanıtlar.
Anlık görüntü testi ile görsel regresyon testi arasındaki fark nedir?
Anlık görüntü testi, web sitenizin kodunun veya içeriğinin aynı kalıp kalmadığını kontrol eder, her şeyin olması gerektiği gibi bir yedeğini almak gibidir.
Öte yandan, görsel regresyon testi sitenizin görünümüne odaklanır. Düzen değişikliklerini, eksik öğeleri veya hemen fark etmeyebileceğiniz görsel hataları yakalamak için güncellemelerden önce ve sonra ekran görüntülerini karşılaştırır.
WordPress'te görsel regresyon testi için en iyi araç hangisidir?
En kolay seçenek VRTs – Görsel Gerileme Testleri eklentisidir. Yeni başlayanlar için uygundur, kodlama gerektirmez ve doğrudan kontrol panelinizden çalışır. Ayrıca, kullanımı çok kolay olan ücretsiz bir sürümü de vardır.
Gerileme testini manuel olarak nasıl yapabilirim?
Manuel gerileme testi, sitenizde değişiklik yaptıktan sonra, yeni bir eklenti yüklemek veya temanızı güncellemek gibi durumlarda ana sayfaları kontrol etmek anlamına gelir.
Ana sayfanızı, iletişim sayfanızı, ödeme sürecinizi (varsa) ve özel düzenlerinizi, her şeyin hala göründüğü ve çalıştığı gibi olduğundan emin olmak için ziyaret etmek isteyeceksiniz. İşe yarar, ancak büyük veya yoğun bir siteyi yönetiyorsanız zaman alıcı olabilir.
Regresyon testini nasıl hızlandırırsınız?
Zamandan tasarruf etmenin en iyi yolu otomatikleştirmektir. VRTs – Görsel Gerileme Testleri gibi bir eklenti kullanmak, önemli sayfalarınızın anlık görüntülerini oluşturmanıza ve bir güncellemeden sonra bunları hızla karşılaştırmanıza olanak tanır.
Her sayfayı manuel olarak tıklamanıza gerek yok — eklenti görsel kontrolü sizin için yapar.
Güncellemeleri önce bir hazırlık (staging) sitesinde de test edebilirsiniz, böylece canlı sitede sorun gidermek zorunda kalmazsınız.
WordPress web sitesi tasarımını test etmenin en iyi yolları nelerdir?
WordPress tasarımınızı test etmek için birkaç ipucu:
- Tasarım değişikliklerini tespit etmek için VRTs – Visual Regression Tests gibi görsel regresyon araçlarını kullanın.
- Tema ve eklenti güncellemelerinizi bir hazırlık sitesinde önizleyin.
- Birden çok ekran boyutunda (masaüstü, tablet ve mobil) test edin.
- Sitenizin farklı görüntü alanlarında nasıl göründüğünü kontrol etmek için tarayıcı geliştirici araçlarını kullanın.
- Kullanıcılardan veya müşterilerden geri bildirim isteyin — genellikle sizin gözden kaçırabileceğiniz şeyleri fark ederler.
Umarım bu makale, WordPress'te görsel gerileme testi yapmayı öğrenmenize yardımcı olmuştur. Ardından, kullanıcılarınız için WordPress'te sohbet odaları oluşturma ve site ziyaretçilerine sorulacak en iyi kullanıcı deneyimi geri bildirim soruları hakkındaki makalemizi kontrol etmek isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Bir sorunuz veya öneriniz mi var? Tartışmayı başlatmak için lütfen bir yorum bırakın.