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

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020-02-05 description: Chrome'un test stratejisi büyük ölçüde otomatik işlevsel doğruluk ve manuel testlere dayanıyor, ancak bunların hiçbiri küçük kullanıcı arayüzü regresyonlarını güvenilir şekilde yakalamıyor. Masaüstü tarayıcı kullanıcı arayüzünüzün testini otomatikleştirmek için piksel testlerini kullanın. image_path: ../images/chromiumchronicle.jpg anahtar kelimeler: docType:Blog,chromiumchronicle

Bölüm 10: Yazar: Sven Zheng in Bellevue, WA (Ocak 2020)
Önceki bölümler

Chrome'un test stratejisi, büyük ölçüde otomatik işlevsel doğruluk ve manuel testlere dayansa da bunların ikisi de küçük kullanıcı arayüzü regresyonlarını güvenilir bir şekilde yakalamaz. Masaüstü tarayıcı kullanıcı arayüzünüzün testini otomatikleştirmek için piksel testlerini kullanın.

Piksel testi yazarken (1) animasyonu devre dışı bırakarak, (2) sahte verileri kullanarak ve (3) mümkün olan minimum yüzey alanını test ederek pürüzsüzlüğü önleyin.

Burada, çok amaçlı adres çubuğunda piksel doğruluğunu onaylamak için kullanılan örnek bir resim gösterilmektedir:

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:

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 adresindedir. İlgili başlıklar şunlardır: birim testleri için 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 Gold piksel testleri, görsel onay iş akışı sağlar ve geliştiricilerin birden fazla altın resmi onaylayarak küçük parçaları kabul etmelerine olanak tanır.

Test paketi şu anda Windows Bilgilendirme botunda çalışmaktadır. Tarayıcı testleri ve Görünümler birim testleri desteklenir.