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

project_path: /blog/_project.yaml (em inglês) Book_path: /_book.yaml page_type: blog update_date: 05/02/2020 descrição: a estratégia de testes do Chrome depende muito de testes de correção funcional automatizados e testes manuais, mas nenhum deles detecta de maneira confiável regressões pequenas na interface. Use testes de pixels para automatizar os testes da interface do navegador para computador. caminho_da_imagem: ../images/chromiumchronicle.jpg palavras-chave: docType:Blog,chromiumchronicle

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

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

Ao programar um teste de pixel, evite instabilidade: (1) desabilitando a animação, (2) usar dados simulados e (3) testar a área de superfície mínima possível.

Aqui está uma amostra de imagem usada para verificar a exatidão de pixel para a 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 pode ser encontrado 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. Skia Gold Pixel Os testes fornecem um fluxo de trabalho de aprovação visual e permitem que os desenvolvedores aceitem flocos pequenos aprovando várias imagens douradas.

No momento, o pacote de testes é executado no bot do Windows FYI. Testes do navegador e testes de unidade de visualizações são compatíveis.