project_path: /blog/_project.yaml book_path: /_book.yaml page_type: blog refresh_date: 2020-02-05 description: Chrome의 테스트 전략은 자동화된 기능 정확성 테스트와 수동 테스트에 크게 의존하지만 두 방식 모두 사소한 UI 회귀를 안정적으로 포착합니다. 픽셀 테스트를 사용하여 데스크톱 브라우저 UI 테스트를 자동화합니다. image_path: ../images/chromiumchronicle.jpg 키워드: docType:Blog,chromiumchronicle
에피소드 10: 워싱턴주 벨뷰에 있는 스벤 정 (2020년 1월)
이전 에피소드
Chrome의 테스트 전략은 자동화된 기능 정확성 테스트와 수동 테스트에 크게 의존하지만 두 방식 모두 사소한 UI 회귀를 안정적으로 포착합니다. 픽셀 테스트를 사용하여 데스크톱 브라우저 UI 테스트를 자동화합니다.
픽셀 테스트를 작성할 때는 (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입니다.
Pixel 차이점 및 승인 절차는 Skia Gold에서 제공합니다. Skia Gold 픽셀 테스트는 시각적 승인 워크플로를 제공하며 개발자는 이를 통해 여러 개의 골드 이미지를 승인하여 작은 플레이크를 허용할 수 있습니다.
현재 테스트 모음은 Windows FYI 봇에서 실행됩니다. 브라우저 테스트와 뷰 단위 테스트가 지원됩니다.