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

Project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020-02-05 description: تعتمد استراتيجية اختبار Chrome بشكل كبير على اختبارات صحة الوظائف الآلية والاختبار اليدوي، ولكن لا يكشف أي منهما بشكل موثوق عن حالات تراجع طفيف في واجهة المستخدم. استخدِم اختبارات وحدات البكسل لإجراء اختبار تلقائي لواجهة المستخدم في متصفّح سطح المكتب. image_path: ../images/chromiumchronicle.jpg Keywords: 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 Golden. توفّر اختبارات Skia Golden pixel سير عمل مرئي لعملية الموافقة، وتسمح للمطوّرين بقبول رقائق صغيرة من خلال الموافقة على عدة صور ذهبية.

يتم حاليًا تشغيل حزمة الاختبار على برنامج التتبع الذي يعمل بنظام التشغيل Windows لمعلوماتك. تتوفر اختبارات المتصفح واختبارات وحدة الملفات الشخصية.