Chromium Chronicle מס' 10: זיהוי רגרסיות של ממשק המשתמש בעזרת בדיקות של Pixel

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020-02-05 תיאור: אסטרטגיית הבדיקה של Chrome מסתמכת במידה רבה על בדיקות תקינות פונקציונליות אוטומטיות ועל בדיקות ידניות, אבל אף אחת מהן לא תומכת ברגרסיות קלות בממשק המשתמש. השתמש בבדיקות פיקסלים כדי לבדוק באופן אוטומטי את ממשק המשתמש של דפדפן המחשב. image_path: ../images/chromiumchronicle.jpg מילות מפתח: docType:Blog,chromiumchronicle

פרק 10: מאת סוון ז'נג בבלוויו, וושינגטון (ינואר 2020)
פרקים קודמים

אסטרטגיית הבדיקה של Chrome מסתמכת בעיקר על בדיקות אוטומטיות של תקינות פונקציונלית ובדיקות ידניות, אבל אף אחת מהאפשרויות האלה לא מתעדת באופן מהימן רגרסיות קלות של ממשק המשתמש. משתמשים בבדיקות פיקסלים כדי לבצע בדיקה אוטומטית של ממשק המשתמש של הדפדפן במחשב.

כשכותבים בדיקת פיקסל, יש להימנע מרגיעות על ידי: (1) השבתת האנימציה, (2) שימוש בנתונים מדומים ו-(3) בדיקת שטח הפנים המינימלי האפשרי.

הנה תמונה לדוגמה המשמשת לאימות תקינות הפיקסלים בסרגל הכתובות:

תמונה של סרגל הכתובות להשוואה בין פיקסלים.

והקוד לאימות הדפדפן תואם לתמונה הבאה:

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);
}

הקוד הזה נמצא בכתובת chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. הכותרות הרלוונטיות הן skia_gold_pixel_diff.h לבדיקות יחידה ו-browser_skia_gold_pixel_diff.h לבדיקות דפדפן.

תהליך ההבדל והאישור של הפיקסלים מופעל על ידי Skia Gold. בדיקות הפיקסלים של Skya Gold מספקות תהליך עבודה של אישור ויזואלי, ומאפשרות למפתחים לקבל פתיתים קטנים על ידי אישור כמה תמונות זהב.

חבילת הבדיקות פועלת כרגע על הבוט Windows FYI. יש תמיכה בבדיקות דפדפן ובבדיקות של יחידות תצוגות.