project_path: /blog/_project.yaml 도서 경로: /_book.yaml page_type: 블로그 새로고침 날짜: 2020년 2월 5일 설명: Chrome의 테스트 전략은 자동화된 기능 정확성 테스트와 수동 테스트에 크게 의존하지만 이 중 어느 것도 사소한 UI 회귀를 안정적으로 포착하지 못합니다. 픽셀 테스트를 사용하여 데스크톱 브라우저 UI 테스트를 자동화합니다. image_path: ../images/chromiumchronicle.jpg 키워드: docType:블로그,크로로니클
에피소드 10: 워싱턴 벨뷰에 위치한 Sven Zheng (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: 브라우저 테스트
픽셀 비교 및 승인 프로세스는 Skia Gold에서 제공합니다. Skia Gold 픽셀 테스트는 시각적 승인 워크플로를 제공하며 개발자가 작은 조각을 만들기도 했습니다.
현재 테스트 모음은 Windows FYI 봇에서 실행됩니다. 브라우저 테스트 뷰 단위 테스트가 지원됩니다.