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 fecha_de_actualización: 05-02-2020 descripción: La estrategia de pruebas de Chrome se basa en gran medida en pruebas automatizadas de corrección funcional y en pruebas manuales, pero ninguna de ellas detecta regresiones menores en la IU de manera confiable. Usa las pruebas de píxeles para automatizar las pruebas de la IU del navegador para computadoras. 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 pruebas de Chrome se basa en gran medida en la corrección funcional automatizada pruebas manuales y manuales, pero ninguna de estas detecta de forma confiable una IU secundaria regresiones. Usa las pruebas de píxeles para automatizar las pruebas de la IU del navegador para computadoras.

Cuando escribas una prueba de píxeles, evita la inestabilidad. Para ello, haz lo siguiente: (1) inhabilita la animación. (2) usar datos ficticios y (3) probar el área de superficie mínima posible.

A continuación, te mostramos una imagen de ejemplo que se utiliza para verificar la precisión de los píxeles en el cuadro multifunción:

Imagen del cuadro multifunción utilizada para la comparación de píxeles.

Y el código para verificar que 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);
}

Este código se encuentra en chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. Los encabezados relevantes son skia_gold_pixel_diff.h para las pruebas de unidades y browser_skia_gold_pixel_diff.h para las pruebas del navegador.

El proceso de aprobación y diferencias de píxeles cuenta con la tecnología de Skia Gold. Píxeles dorados de Skia proporcionan un flujo de trabajo de aprobación visual y permiten a los desarrolladores aceptar trozos pequeños aprobando varias imágenes doradas.

Actualmente, el paquete de pruebas se ejecuta en el bot de información de Windows. Pruebas del navegador y vistas de unidades.