Screenshot Test: co to je, typy a jak funguje v testování

Co je to Screenshot Test a k čemu je potřebný?

Screenshot Test — je end-to-end testování uživatelského rozhraní, při kterém test otevře obrazovku aplikace, provede akce (klepnutí, zadání textu, posouvání) a pořídí srnímek výsledného stavu. Srnímek je porovnán s referencí (baseline) uloženou v repozitáři. Pokud se srnímky liší — test selže. Screenshot testy odhalují vizuální regrese, které nejsou vidět v jednotkových testech: nesprávné okraje, překrývání prvků, špatné barvy.

Proč jsou potřebné screenshot testy, když existují golden testy — golden testy kontrolují komponenty izolovaně: jedno tlačítko, jedna karta, jeden text. Screenshot testy kontrolují celou obrazovku v prostředí co nejbližším produkčnímu: reálná navigace, reálná data (nebo co nejrealističtější mocky), reálná systémová písma, reálný stavový řádek. Pouze screenshot test ukáže, že se tlačítko překrývá s jiným prvkem na reálném zařízení.

Obchodní hodnota screenshot testů

Obchodní hodnota — podle údajů Google (2023) tvoří vizuální chyby 15-25% všech chyb mobilních aplikací. Screenshot testy automatizují kontrolu vizuální kvality, která se dříve prováděla ručně inženýry QA. Jeden screenshot test nahrazuje 5-10 minut ručního testování jedné obrazovky. Pro aplikaci s 50 obrazovkami úspory: 4-8 osobohodin na jeden regresní průběh. Screenshot testy se vrátí během 2-3 release cyklů.

Screenshot Test vs Golden Test: srovnání přístupů

Golden testy jsou rychlejší a jednodušší: vykreslení komponenty v off-screen bufferu trvá milisekundy, nevyžaduje zařízení, jsou stabilní v CI. Screenshot testy jsou realističtější: pořizují reálnou obrazovku se systémovými prvky, podporují animace a navigaci, fungují na reálných zařízeních. Volba závisí na cíli: rychlá zpětná vazba pro vývojáře (golden) nebo maximální realismus před vydáním (screenshot).

Strategie pokrytí: golden + screenshot

Golden + Screenshot — používejte golden testy pro každou UI komponentu v knihovně komponent (Design System). 80% vizuálních regresí je zachyceno na úrovni komponenty. Screenshot testy — pro kritické uživatelské cesty: onboarding, přihlášení, platební tok, košík. 20% regresí souvisejících s integrací komponent na reálné obrazovce je zachyceno pouze screenshot testy. V IT Sectr používáme poměr 80/20: 400 golden + 100 screenshot.

Kdy screenshot test není potřeba — pokud obrazovka obsahuje statický obsah bez interaktivity, golden test komponenty poskytuje stejnou úroveň kontroly za nižší cenu. Pokud se obrazovka dynamicky mění (feed, chat), screenshot test vyžaduje složitou konfiguraci dat a čekací dobu. V takových případech používejte screenshot pro základní stav (prázdný seznam, načítání) a golden pro jednotlivé karty v seznamu.

UI Automator a Firebase Test Lab pro Android

UI Automator — Android framework pro meziaplikační UI testování. Umožňuje pořizovat srnímky prostřednictvím UiDevice.takeScreenshot(). Na rozdíl od Espressa (funguje uvnitř jedné aplikace) může UI Automator interagovat se systémovými dialogy (oprávnění, oznámení) a jinými aplikacemi. Screenshot test na UI Automator: otevřete aplikaci, počkejte na načtení, pořiďte srnímek, porovnejte s referencí.

class LoginScreenScreenshotTest {

    @get:Rule
    val rule = ComposeTestRule.createAndroidComposeRule<MainActivity>()

    @Test
    fun login_screen_default() {
        val device = UiDevice.getInstance(
            InstrumentationRegistry.getInstrumentation()
        )

        // Čekáme na načtení obrazovky
        IdlingRegistry.getInstance().waitForIdle()

        // Pořídíme screenshot
        val screenshot = device.takeScreenshot()
        val golden = loadGolden("login_default.png")

        // Porovnáváme s referencí
        val diff = ImageComparator.compare(screenshot, golden)
        assertTrue(diff.similarity > 0.98)
    }
}

Firebase Test Lab — služba Google Cloud pro paralelní spouštění instrumentálních testů na stovkách reálných zařízení. Screenshot testy na Firebase Test Lab pořizují srnímky na různých zařízeních (Pixel 7, Galaxy S24, Xiaomi 14) a porovnávají je s referencemi. Výhoda: jeden test kontroluje UI na 20 zařízeních během 10-15 minut. Nevýhoda: náklady ($1-5 na test na 20 zařízení). Firebase Test Lab se integruje s CI pomocí gcloud CLI nebo Gradle pluginu.

Shot: knihovna pro zjednodušení screenshot testů

Shot — knihovna pro screenshot testování na Androidu, která usnadňuje vytváření a porovnávání srnímků. Shot pracuje na bázi Espressa a UI Automatoru, přidává správu golden (vytváření, aktualizace, mazání), porovnání s prahem (pixely nebo procenta) a generování HTML zprávy. Shot je vhodný pro projekty, které chtějí rychle zavést screenshot testování bez psaní vlastní infrastruktury pro porovnávání obrázků.

XCUITest a Xcode Cloud pro iOS

XCUITest — Apple framework pro UI testování iOS, iPadOS a tvOS aplikací. Screenshot testy na XCUITest používají XCUIScreen.main.screenshot() pro zachycení obrazovky a XCAttachment pro uložení srnímku. XCUITest simuluje uživatelské akce: tap, swipe, typeText, a pořizuje srnímky po každém kroku. V Xcode 16+ byla přidána vestavěná podpora pro porovnávání srnímků s referencemi prostřednictvím XCTAttachment.

final class LoginScreenScreenshotTests: XCTestCase {

    var app: XCUIApplication!

    override func setUp() {
        super.setUp()
        app = XCUIApplication()
        app.launch()
    }

    func test_login_initial_state() {
        let loginButton = app.buttons["login_button"]
        XCTAssertTrue(loginButton.exists)

        // Pořídíme screenshot
        let screenshot = app.screenshot()
        let attachment = XCTAttachment(screenshot: screenshot)
        attachment.name = "Login-Screen-Initial"
        attachment.lifetime = .keepAlways
        add(attachment)

        // Porovnání s referencí (vyžaduje XCTAttachment + golden)
        assertScreenshot(
            screenshot: screenshot,
            goldenName: "login_initial_state"
        )
    }
}

Xcode Cloud — cloudové CI od Apple pro sestavení a testování iOS aplikací. Xcode Cloud podporuje spouštění XCUITest testů na simulátorech. Screenshot testy lze spouštět na více simulátorech paralelně (iPhone 15, iPhone 15 Pro Max, iPad Pro). Výsledky: XCResult Bundle s přílohami. Xcode Cloud není integrován do GitHub/GitLab — pro integraci použijte Xcode Cloud Webhooks. Alternativa: GitHub Actions s macos-14 a xcodebuild.

Srovnávací frameworky — iOSSnapshotTestCase (Uber) funguje i pro screenshot testy, pokud je spuštěn na simulátoru. SwiftSnapshotTesting (pointfree) je více zaměřen na golden testy komponent. Pro screenshot testy na iOS použijte vestavěné nástroje XCUITest + XCTAttachment + vlastní ImageComparator (Pixelmator nebo AImage). V CI použijte simulátor — na reálných zařízeních screenshot testy fungují pouze prostřednictvím Device Farm (AWS Device Farm).

Proces automatizace screenshot testů v CI

Správa baseline — referenční srnímky jsou uloženy v repozitáři (Git LFS) nebo v S3. Každý srnímek je pojmenován podle šablony: {testName}_{device}_{orientation}_{locale}.png. Příklad: loginScreenPixel7PortraitRu.png. Při přidání nového zařízení nebo locale se vytvoří nový baseline. Při změně UI jsou staré baseline nahrazeny novými po code review. Baseline je součástí kódové základny, stejně jako zdroje testů.

CI Pipeline — (1) Sestavení aplikace. (2) Spuštění screenshot testů na emulátorech/simulátorech. (3) Porovnání srnímků s baseline. (4) Při neshodě — generování diff obrázku. (5) Nahrání diff artefaktů (actual, expected, diff — tři soubory). (6) Publikování HTML zprávy s tabulkou výsledků. (7) Pokud je práh překročen — test selže. (8) Recenzent prohlédne diff artefakty a rozhodne: schválit (aktualizovat baseline) nebo zamítnout (opravit kód).

Práh a tolerance — absolutní porovnání pixel po pixelu je příliš přísné. Použijte SSIM (Structural Similarity Index) nebo MSE (Mean Squared Error). SSIM 0.98 = 98% strukturální podobnosti — dobrý práh. Pro různé obrazovky mohou být potřebné různé prahy: tmavý motiv (více černé — vyšší přesnost), gradienty (více šumu — nižší přesnost). Nastavte práh per-test pomocí parametru: @ScreenshotTest(threshold = 0.99).

Device Farm vs Simulátor — testy na reálných zařízeních (Firebase Test Lab, AWS Device Farm) poskytují maximální realismus, ale jsou pomalé a placené. Testy na simulátorech/emulátorech — rychlé a zdarma, ale neukazují vlastnosti reálných zařízení (různé GPU, podání barev obrazovky, hustota pixelů). Strategie: simulátor pro pre-merge kontrolu (5 minut), Device Farm pro nightly (30 minut, 20 zařízení). V IT Sectr používáme Firebase Test Lab pro noční průběhy na top-10 Android zařízeních.