Chromium Chronicle #10: выявление регрессий пользовательского интерфейса с помощью пиксельных тестов

путь_проекта: /blog/_project.yaml путь_книги: /_book.yaml тип_страницы: блог обновление_дата: 05.02.2020 описание: Стратегия тестирования 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 для тестов браузера.

Процесс сравнения и утверждения пикселей осуществляется с помощью Skia Gold. Пиксельные тесты Skia Gold обеспечивают визуальный рабочий процесс утверждения и позволяют разработчикам принимать небольшие фрагменты, утверждая несколько золотых изображений.

В настоящее время набор тестов работает на боте Windows FYI. Поддерживаются браузерные тесты и модульные тесты Views.