The Chromium Chronicle #10: اكتشاف انحدارات واجهة المستخدم باستخدام اختبارات Pixel

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: مدونة تاريخ_التحديث: 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 لاختبارات المتصفّح.

تعتمد عملية الموافقة على اختلافات وحدات البكسل وSskia Gold على تطبيق Skia Gold. Skia Gold Pixel توفّر الاختبارات سير عمل الموافقة بشكل مرئي، وتسمح للمطوّرين بقبول رقائق صغيرة من خلال الموافقة على عدة صور ذهبية.

في الوقت الحالي، يتم تشغيل مجموعة الاختبار على برنامج تتبُّع Windows FYI. اختبارات المتصفّح وإمكانية استخدام اختبارات وحدة طرق العرض.