WordPress’te Görsel Regresyon Testi Nasıl Kolayca Yapılır?

Geçen hafta, birden fazla WordPress sitesini yöneten bir arkadaşım panik içinde beni aradı. Rutin bir eklenti güncellemesi müşterisinin navigasyon menüsünü bozmuş, ancak müşteriler şikayet etmeye başlayana kadar fark etmemiş.

Bu, sayısız kez gördüğüm yaygın bir sorun ve tam da bu yüzden görsel regresyon testi WordPress web sitesi sahipleri için çok önemli.

Görsel regresyon testi kulağa karmaşık gelebilir. Ancak, aslında sizi saatlerce manuel kontrolden kurtarabilecek ve utanç verici düzen sorunlarını önleyebilecek basit bir çözümdür.

Genellikle sayfalarınızın önceki ve sonraki 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 yakalamanıza 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 Regresyon Testi Nedir ve Neden Önemlidir? 🤔

Sitenizi her güncellediğinizde – ister bir WordPress çekirdek güncellemesi, ister yeni bir eklenti, ister bir tema değişikliği veya sadece küçük bir kod değişikliği olsun – ön uçtaki bir şeyin yerinden kayma ihtimali vardır.

Örneğin, bir düğme kaybolabilir, düzeniniz bozulabilir veya bir ürün resmi düzgün yüklenmeyebilir.

Sorun ne mi? Bu görsel hatalar, bir ziyaretçi bunları bir iletişim formu veya tasarım geri bildirim anketi aracılığıyla gösterene kadar genellikle fark edilmez.

O zamana kadar sitenizin kullanıcı deneyimi çoktan zarar görmüş olabilir.

İşte burada görsel regresyon testi devreye giriyor.

İşlem basit: sayfalarınızın güncellemeden önce ve sonra anlık görüntülerini alın, ardından değişen her şeyi tespit etmek için bunları karşılaştırın.

Ve bir hazırlık sitesinde test yapıyorsanız (ki bunu öneriyoruz), herhangi bir şey yayınlanmadan önce görsel sorunları yakalamak için güvenle güncellemeler yapabilir ve karşılaştırmalar yapabilirsiniz.

İyi haber mi? 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 ederek masaüstü, tablet ve mobil cihazlardaki düzen sorunlarını yakalamanıza yardımcı olabilirsiniz.

Bu WordPress kullanıcıları için neden önemli?

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 sayfaya tıklamak yerine, bu araç size nelerin değiştiğine ve düzeltmeniz gereken bir şey olup olmadığına dair görsel bir rapor sunar.

Özellikle birden fazla WordPress sitesinde güncelleme yapan ajanslar, müşteri web sitelerini yöneten serbest çalışanlar veya ürün ve ödeme sayfalarının bozulmadan kaldığından emin olmak isteyen çevrimiçi mağaza sahipleri gibi birçok senaryoda yararlıdır.

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.

Bununla birlikte, WordPress’te görsel regresyon testinin nasıl kolayca yapılacağını 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 Kurun ve Etkinleştirin

Bu eğitimde VRTs eklentisini kullanacağım çünkü yeni başlayan dostu ve görsel regresyon testi için kullanımı çok kolay. İster kaydırılmış bir düzen, ister eksik bir düğme veya bir güncellemeden sonra bozuk bir öğe olsun, VRTs bunu erkenden fark etmenize yardımcı olur.

İşte nasıl çalıştığı: Eklenti, seçtiğiniz sayfaların ekran görüntülerini alır. Daha sonra karşılaştırmaları manuel olarak tetikleyebilir veya sitenizde bir eklentiyi güncellemek veya temanızı değiştirmek 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 görsel farklılıkları vurgular.

Böylece, 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 elde edersiniz.

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.

Daha sonra planlardan birini seçebilirsiniz. Ücretsiz plan, bir etki alanında günde 3 sayfaya kadar test yapmanıza ve günlük testler planlamanıza olanak tanır.

Öte yandan, ücretli planlar daha fazla 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’ seçeneğine tıklamanız yeterlidir.

Ardından, VRTs web sitesinde bir hesaba kaydolmak için talimatları izleyin ve ödeme bilgilerinizi ekleyin.

Ödemeyi tamamladıktan sonra, eklentiyi .zip dosyası olarak indirebileceğiniz VRTs kontrol panelinize ulaşacaksınız.

Ardından, Eklentiler ” Eklenti Ekle ‘ye gidin ve ‘Eklenti Yükle’ düğmesine tıklayın. Buradan, yeni indirdiğiniz VRTs eklentisi .zip dosyasını seçebilirsiniz.

Eklentiyi yükledikten sonra etkinleştirdiğinizden emin olun. Tüm ayrıntılar için WordPress eklentisi yükleme kılavuzumuza bakabilirsiniz.

Adım 2: VRTs Eklenti Ayarlarını Yapılandırma

Eklentiyi etkinleştirdikten sonra, görsel regresyon testlerinizin ne zaman çalışması gerektiğini ayarlamanın zamanı geldi.

WordPress yönetici menünüzdeki VRT’ler ” Ayarlar bölümüne gidin.

İçeri girdikten sonra, ‘Tetikleyiciler’ bölümüne ilerleyebilirsiniz – burada eklentiye otomatik olarak ne zaman anlık görüntü alacağını ve karşılaştıracağını söylersiniz.

İşte mevcut seçenekler:

• Testleri 24 saatte bir çalıştır (Ücretsiz) – Bu varsayılan ayardır. VRT’ler, seçili gönderilerinizi veya sayfalarınızı görsel değişiklikler için günde bir kez otomatik olarak kontrol eder.
• WordPress ve eklenti güncellemelerinden sonra Testleri Çalıştır (Pro) – Güncellemelerden kaynaklanan düzen sorunlarını tam gerçekleştikleri anda yakalamak için harika.
• Testleri favori uygulamalarınızla çalıştırın (Pro) – Web kancalarını kullanarak VRT’leri harici araçlara veya iş akışlarına bağlayın.
• Talep üzerine Testler Çalıştırın (Pro) – İhtiyaç duyduğunuzda testleri doğrudan WordPress panonuzdan manuel olarak tetikleyin.

İş akışınıza (veya lisansınıza) uygun tetikleyiciyi seçtikten sonra, sayfanın altındaki ‘Değişiklikleri Kaydet’ düğmesine tıklamanız yeterlidir.

Adım 3: Test Etmek İçin Yeni Sayfalar veya Gönderiler Ekleyin

Eklenti ayarlarını yapılandırdıktan sonra, görsel regresyon testlerinize hangi sayfaları veya gönderileri dahil etmek istediğinizi seçmenin zamanı geldi.

Şimdi görsel testlerinizi yöneteceğiniz ve çalıştıracağınız yer olan ‘Testler’ sekmesine geçelim.

Buradan, ‘Yeni Ekle’ düğmesine tıklayabilirsiniz. Bu, test etmek için gönderileri veya sayfaları seçmenize izin verecektir.

Görüntülenen açılır pencerede, görsel regresyon testini gerçekleştirmek 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 olarak yazılarınızın veya sayfalarınızın şu anda nasıl göründüğünün “önceki” versiyonu olarak işlev görür.

Testinizi ayarladıktan sonra, ilk anlık görüntüyü yüklemek için sayfayı yenilemeniz yönünde bir talimat göreceksiniz. Devam edin ve bunu yapın.

Bu işlem tamamlandığında, 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 ‘Planlandı’ olarak ayarlandığını göreceksiniz. Bunun nedeni, VRTs’nin ü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 ‘Anlık Görüntüyü Görüntüle’ bağlantısına tıklayabilirsiniz.

Bu şekilde yeni bir sekmede açılacaktır:

Şimdi sitenizde ihtiyaç duyduğunuz değişiklikleri yapabilirsiniz. Ardından, karşılaştırmayı gözden geçirmek ve beklenmedik görsel sorunları tespit etmek için yarın tekrar gelin.

Adım 4: Görsel Farklılıkları Kontrol Edin

Test tamamlandığında ve herhangi bir görsel hata tespit edildiğinde, VRT’ler ” Çalıştırmalar sekmesinde bir bildirim uyarısı görmeniz gerekir.

İçeri girdikten sonra, tespit edilen değişikliklerle koşunun üzerinde gezinebilirsiniz.

Ardından, görüntülendiğinde ‘Ayrıntıları Göster’ bağlantısını tıklayın.

Bir sonraki ekranda, sayfanızın önceki ve sonraki sürümlerini gösteren yan yana bir karşılaştırma göreceksiniz.

Eklenti görsel farklılıkları otomatik olarak vurgular, böylece hızlı bir şekilde tespit edebilirsiniz:

• Düzen Kaymaları ve Yanlış Hizalanmış Öğeler: Bir eklenti güncellemesinden veya tema değişikliğinden sonra tasarımınız değişirse (düğmelerin yerinden çıkması veya metinlerin atlaması gibi), VRT’ler bunu işaretleyecektir.
• Eksik veya Bozuk Öğeler: İster eksik bir görsel, ister CTA düğmesi veya gömülü form olsun, VRT’ler beklenmedik bir şekilde kaybolan her şeyi tespit etmeyi kolaylaştırır, bu da özellikle e-ticaret veya açılış sayfaları için kullanışlıdır.
• Beklenmedik İçerik Değişiklikleri: Eklenti ayrıca metin, bağlantı veya görsellerdeki değişiklikler konusunda sizi uyarır, böylece yetkisiz düzenlemeleri veya yayınlama hatalarını kullanıcılardan önce yakalayabilirsiniz.

Eski ve yeni sürümler arasında geçiş yapmak ve kesin değişiklikleri görsel olarak onaylamak için ekranın ortasındaki sürükleme tutamacını kullanabilirsiniz.

Adım 5: Gözden Geçirin ve Harekete Geçin

Görsel bir regresyon testi çalıştırdıktan sonra sonuçlara göre harekete geçebilirsiniz. İşte bundan sonra yapabilecekleriniz:

• Sayfayı manuel olarak düzenleyin: Değişiklikler küçükse, düzeni ayarlamak, öğeleri taşımak veya eksik özellikleri geri eklemek gibi sorunları doğrudan sayfayı düzenleyerek çözebilirsiniz.
• Bir yedeğe geri dönün: Değişiklikler daha büyükse veya düzeltilmesi daha zorsa, web sitenizin yed eğini 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.

WordPress’te Görsel Regresyon Testi Çalıştırmak için SSS

Görsel regresyon testine yeni başlıyorsanız yalnız değilsiniz. İşte WordPress kullanıcıları ve geliştiricilerinden sıkça duyduğum sorulara bazı 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, bir nevi işlerin nasıl olması gerektiğinin bir yedeğini kaydetmek gibi.

Görsel regresyon testi ise sitenizin görünümüne odaklanır. Düzen değişikliklerini, eksik öğeleri veya hemen fark edemeyeceğiniz görsel hataları yakalamak için güncellemelerden önceki ve sonraki ekran görüntülerini karşılaştırır.

WordPress’te görsel regresyon testi için en iyi araç nedir?

En kolay seçenek VRTs – Visual Regression Tests eklentisidir. Yeni başlayanlara uygundur, herhangi bir kodlama gerektirmez ve doğrudan kontrol panelinizden çalışır. Ayrıca, kullanımı çok kolay olan ücretsiz bir sürümü vardır.

Regresyon testini manuel olarak nasıl yapabilirim?

Manuel regresyon testi, yeni bir eklenti yüklemek veya temanızı güncellemek gibi değişiklikler yaptıktan sonra sitenizi gözden geçirmek ve önemli sayfaları kontrol etmek anlamına gelir.

Her şeyin olması gerektiği gibi göründüğünden ve çalıştığından emin olmak için ana sayfanızı, iletişim sayfanızı, ödeme sürecinizi (varsa) ve tüm özel düzenleri 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 bunu otomatikleştirmektir. VRTs – Visual Regression Tests 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 sayfaya manuel olarak tıklamanıza gerek yok – eklenti görsel kontrolü sizin için yapar.

Ayrıca güncellemeleri önce bir hazırlık sitesinde test edebilirsiniz, böylece sorunları canlı bir sitede düzeltmemiş olursunuz.

WordPress web sitesi tasarımını test etmenin en iyi yolları nelerdir?

İşte 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 bir regresyon aracı kullanın.
• Tema ve eklenti güncellemelerinizi bir hazırlık sitesinde önizleyin.
• Birden fazla ekran boyutunda (masaüstü, tablet ve mobil) test edin.
• Sitenizin farklı görünüm alanlarında nasıl göründüğünü kontrol etmek için tarayıcı geliştirme araçlarını kullanın.
• Kullanıcılardan veya müşterilerdengeri bildirim isteyin – genellikle gözden kaçırabileceğiniz şeyleri fark ederler.

Umarım bu makale WordPress’te görsel regresyon testinin nasıl yapılacağını öğrenmenize yardımcı olmuştur. Daha sonra, 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 makalemize göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.