Chromium Chronicle #10: como detectar regressões de IU com testes de pixel

project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020-02-05 description: A estratégia de teste do Chrome depende muito de testes de correção funcional automatizados e testes manuais, mas nenhum deles captura pequenas regressões de interface de maneira confiável. Use testes de pixel para automatizar os testes da interface do navegador para computador. image_path: ../images/chromiumchronicle.jpg keywords: docType:Blog,chromiumchronicle

Episódio 10:Sven Zheng em Bellevue, WA (janeiro de 2020)
Episódios anteriores

A estratégia de testes do Chrome depende muito de testes de correção funcional automatizados e testes manuais, mas nenhum deles captura pequenas regressões de interface de maneira confiável. Use testes de pixel para automatizar os testes da interface do navegador para computadores.

Ao criar um teste de pixel, é necessário (1) desativar a animação, (2) usar dados simulados e (3) testar a área de superfície mínima possível para evitar inconsistências.

Aqui está um exemplo de imagem usada para verificar a exatidão de pixel da omnibox:

Imagem da omnibox usada para comparação de pixels.

E o código para verificar se o navegador corresponde a esta imagem:

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

Esse código fica em chrome/test/pixel/demo/skia_gold_demo_pixeltest.cc. Os cabeçalhos relevantes são skia_gold_pixel_diff.h para testes de unidade e browser_skia_gold_pixel_diff.h para testes de navegador.

O processo de aprovação e diferença de pixels é desenvolvido pela Skia Gold. Os testes de pixel Gold Skia fornecem um fluxo de trabalho de aprovação visual e permitem que os desenvolvedores aceitem pequenos flocos ao aprovar várias imagens douradas.

No momento, o pacote de testes está em execução no bot do Windows FYI. Há suporte para testes de navegador e testes de unidade de visualizações.