פרק 10: מאת Sven Zheng ב-Bellevue, WA (ינואר 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. בדיקות הפיקסלים של Skia Gold מספקות תהליך אישור חזותי ומאפשרות למפתחים לאשר מספר תמונות 'זהב' כדי לאשר פגמים קטנים.
כרגע חבילת הבדיקות פועלת ב-Windows FYI bot. יש תמיכה בבדיקות דפדפן ובבדיקות יחידה של תצוגות.