Screenshot Testing in Compose - Roborazzi for CI Integration

#android #kotlin #compose #tutorial

Screenshot testing catches visual regressions before release. Learn to implement Roborazzi and integrate visual testing into your CI pipeline.

Setting Up Roborazzi

Add Roborazzi dependency and configure screenshot testing:

// build.gradle.kts
plugins {
    id("io.github.takahirom.roborazzi") version "1.x.x"
}

dependencies {
    testImplementation("io.github.takahirom.roborazzi:roborazzi:1.x.x")
    testImplementation("io.github.takahirom.roborazzi:roborazzi-compose:1.x.x")
}

Writing Screenshot Tests

Capture composable screenshots automatically:

@RunWith(RoborazziParameterizedTestRunner::class)
class ButtonScreenshotTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun buttonVariants() {
        composeTestRule.setContent {
            Column {
                Button(onClick = {}) { Text("Primary") }
                OutlinedButton(onClick = {}) { Text("Outlined") }
                TextButton(onClick = {}) { Text("Text") }
            }
        }

        composeTestRule.onRoot()
            .captureRoboImage("buttons/variants.png")
    }
}

Visual Regression Detection

Roborazzi compares screenshots and reports differences:

@Test
fun cardScreenshot() {
    composeTestRule.setContent {
        Card(modifier = Modifier.size(200.dp)) {
            Text("Content")
        }
    }

    composeTestRule.onRoot()
        .captureRoboImage(
            "cards/default.png",
            roborazziOptions = RoborazziOptions(
                compareOptions = CompareOptions(
                    pixelThreshold = 0.01f  // 1% pixel difference threshold
                )
            )
        )
}

CI Integration with GitHub Actions

Automate screenshot comparison in CI:

- name: Run Roborazzi Tests
  run: ./gradlew testDebugRoborazzi

- name: Upload Screenshots
  if: failure()
  uses: actions/upload-artifact@v3
  with:
    name: roborazzi-reports
    path: build/outputs/roborazzi