The Chromium Chronicle #10: การจับการถดถอยของ UI ด้วยการทดสอบ Pixel

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: บล็อก วันที่รีเฟรช: 05-02-2020 คำอธิบาย: กลยุทธ์การทดสอบของ Chrome อาศัยการทดสอบความถูกต้องของฟังก์ชันการทำงานอัตโนมัติและการทดสอบด้วยตนเองเป็นหลัก แต่ทั้ง 2 วิธีนี้ก็ไม่สามารถตรวจจับการถดถอยของ UI เล็กน้อยได้อย่างน่าเชื่อถือ ใช้การทดสอบพิกเซลเพื่อทดสอบ UI ของเบราว์เซอร์บนเดสก์ท็อปโดยอัตโนมัติ image_path: ../images/chromiumrecordcle.jpg คีย์เวิร์ด: docType:บล็อก,chromiumchromiumcle

ตอนที่ 10: โดย Sven Zheng in Bellevue, WA (มกราคม 2020)
ตอนก่อนหน้า

กลยุทธ์การทดสอบของ Chrome อาศัยความถูกต้องของฟังก์ชันการทำงานแบบอัตโนมัติเป็นหลัก ทั้งการทดสอบและการทดสอบด้วยตนเอง ทั้งสองแบบ ก็ไม่สามารถตรวจพบ UI เล็กๆ น้อยๆ ได้อย่างน่าเชื่อถือ การถดถอย ใช้การทดสอบพิกเซลเพื่อทดสอบ UI ของเบราว์เซอร์บนเดสก์ท็อปโดยอัตโนมัติ

เมื่อเขียนทดสอบพิกเซล ให้หลีกเลี่ยงความไม่สม่ำเสมอโดยการ (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 สำหรับการทดสอบ 1 หน่วยและ browser_skia_gold_pixel_diff.hสำหรับการทดสอบเบราว์เซอร์

ความแตกต่างของพิกเซลและขั้นตอนการอนุมัติขับเคลื่อนโดย Skia Gold Skia Gold Pixel การทดสอบจะมีเวิร์กโฟลว์การอนุมัติแบบรูปภาพ และอนุญาตให้นักพัฒนาซอฟต์แวร์ยอมรับ เกล็ดเล็กๆ น้อยๆ เพราะการอนุมัติรูปภาพทองคำหลายๆ รูป

ชุดทดสอบกำลังทำงานอยู่ในบ็อต Windows FYI การทดสอบเบราว์เซอร์ และการทดสอบหน่วยการดู