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

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: בלוג Refresh_date: 5-02-2020 תיאור: אסטרטגיית הבדיקה של Chrome מסתמכת במידה רבה על בדיקות תיקון פונקציונליות אוטומטיות ובדיקות ידניות, אבל אף אחת מהן לא מזהה רגרסיות קטנות בממשק המשתמש. אפשר להשתמש בבדיקות פיקסלים כדי לבדוק באופן אוטומטי את ממשק המשתמש של דפדפן המחשב. image_path: ../images/chromiumchronicle.jpg מילות מפתח: docType:Blogger,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. פיקסל זהב של סקיה הבדיקות מספקות תהליך עבודה של אישור חזותי ומאפשרות למפתחים לקבל פתיתים קטנים על ידי אישור של כמה תמונות זהב.

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