Chromium Chronicle #10: Piksel Testleriyle Kullanıcı Arayüzü Regresyonlarını Yakalama

project_path: /blog/_proje.yaml kitap yolu: /_kitap.yaml page_type: "blog" yenileme_tarihi: 05.02.2020 açıklama: Chrome'un test stratejisi büyük ölçüde otomatik işlevsel doğruluk testlerine ve manuel testlere dayanır, ancak bunların ikisi de küçük kullanıcı arayüzü regresyonlarını güvenilir şekilde yakalayamaz. Masaüstü tarayıcınızın kullanıcı arayüzünü test etmeyi otomatikleştirmek için piksel testlerini kullanın. image_path: ../images/chromiumchronicle.jpg keywords: docType:Blog,chromiumchronicle

10. Bölüm: Sven Zheng, Bellevue, Washington (Ocak 2020)
Önceki bölümler

Chrome'un test stratejisi büyük ölçüde otomatik işlevsel doğruluğa dayanır test edilmesine ve manuel test yapılmasına, ancak bunların hiçbirinin güvenilir şekilde küçük kullanıcı arayüzünü yakalamasına regresyonlar vardır. Masaüstü tarayıcınızın kullanıcı arayüzünü otomatik olarak test etmek için piksel testlerini kullanın.

Piksel testi yazarken şunları yaparak stabiliteyi önleyin: (1) Animasyonu devre dışı bırakın, (2) sahte veriler kullanma ve (3) olası minimum yüzey alanını test etme.

Aşağıda, çok amaçlı adres çubuğu için piksel doğruluğunu doğrulamak amacıyla kullanılan örnek bir resim verilmiştir:

Piksel karşılaştırması için kullanılan çok amaçlı adres çubuğu resmi.

Tarayıcının bu resimle eşleştiğini doğrulayan kod da şu şekildedir:

IN_PROC_BROWSER_TEST_F(SkiaGoldDemoPixelTest, TestOmnibox) {
  // Always disable animation for stability.
  ui::ScopedAnimationDurationScaleMode disable_animation(
      ui::ScopedAnimationDurationScaleMode::ZERO_DURATION);
  GURL url("chrome://bookmarks");
  AddTabAtIndex(0, url, ui::PageTransition::PAGE_TRANSITION_FIRST);
  auto* const browser_view = BrowserView::GetBrowserViewForBrowser(browser());
  // CompareScreenshot() takes a screenshot and compares it with the
  // golden image, which was previously human-approved, is stored
  // server-side, and is managed by Skia Gold. If any pixels differ, the
  // test will fail and output a link for the author to triage the
  // new image.
  bool ret = GetPixelDiff().CompareScreenshot("omnibox",
      browser_view->GetLocationBarView());
  EXPECT_TRUE(ret);
}

Bu kod chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc adresinde bulunur. Birim testleri için ilgili başlıklar skia_gold_pixel_diff.h ve Tarayıcı testleri için browser_skia_gold_pixel_diff.h.

Piksel farkı ve onay süreci Skia Gold tarafından desteklenmektedir. Skia Altın pikseli testler görsel bir onay iş akışı sağlar ve geliştiricilerin küçük pürüzler görebilirsiniz.

Test paketi şu anda Windows Bilgi botu üzerinde çalışmaktadır. Tarayıcı testleri ve Görünüm birim testleri desteklenir.