Chromium Chronicle n.o 10: Cómo capturar regresiones de IU con pruebas de Pixel

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020-02-05 description: La estrategia de pruebas de Chrome se basa en gran medida en pruebas manuales y automatizadas de corrección funcional, pero ninguna de estas detecta regresiones menores de IU de manera confiable. Usa pruebas de píxeles para probar la IU del navegador de escritorio automáticamente. image_path: ../images/chromiumchronicle.jpg palabras clave: docType:Blog,chromiumchronicle.

Episodio 10: de Sven Zheng en Bellevue, WA (enero de 2020)
Episodios anteriores

La estrategia de prueba de Chrome se basa en gran medida en pruebas manuales y de corrección funcional automatizadas, pero ninguna de estas detecta de manera confiable regresiones menores de IU. Usa pruebas de píxeles para automatizar las pruebas de la IU del navegador para computadoras.

Cuando escribas una prueba de píxeles, evita la fragilidad. Para ello, haz lo siguiente: (1) inhabilitando la animación, (2) usando datos ficticios y (3) probando la superficie de superficie mínima posible.

A continuación, se muestra una imagen de ejemplo utilizada para verificar la precisión de los píxeles del cuadro multifunción:

Imagen del cuadro multifunción que se utiliza para la comparación de píxeles.

Y el código para verificar el navegador coincide con esta imagen:

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);
}

Puedes encontrar este código en chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. Los encabezados relevantes son skia_gold_pixel_diff.h para pruebas de unidades y browser_skia_gold_pixel_diff.h para pruebas de navegador.

El proceso de aprobación y diferencia de píxeles utiliza Skia Gold. Las pruebas de píxeles de Skya Gold proporcionan un flujo de trabajo de aprobación visual y permiten a los desarrolladores aceptar pequeñas copos mediante la aprobación de varias imágenes doradas.

Actualmente, el paquete de pruebas se ejecuta en el bot de Windows FYI. Se admiten las pruebas de navegador y de unidades de vistas.