3、创建第一个Compose快照测试：@Test注解、@Composable函数、基线快照生成

首先引入 Roborazzi：

testImplementation("io.github.takahirom.roborazzi:roborazzi:1.30.0")
testImplementation("io.github.takahirom.roborazzi:roborazzi-compose:1.30.0")

然后修改测试：

class GreetingScreenshotTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun greeting_snapshot_baseline() {
        composeTestRule.setContent {
            Greeting(name = "World")
        }

        // 关键行：对比或记录快照
        composeTestRule.onRoot().captureRoboImage("baseline_greeting.png")
    }
}

首次运行这个测试时，Roborazzi 会生成一张 baseline_greeting.png 并保存在 src/test/assets/screenshots/ 下。这张就是 基线快照。此后每次运行，它都会对比渲染结果和基线图片的像素差异。

3.4 基线快照的存储与更新

基线文件默认放在 src/test/assets/screenshots/ 目录。你可以手动删除它来强制重新生成新的基线。但更规范的做法是：当 UI 故意变更时（比如设计师改了颜色），你需要在测试运行前更新基线。

Roborazzi 提供了一个系统属性开关：

// 在 gradle.properties 或命令行设置
roborazzi.record=true

当 roborazzi.record=true 时，所有 captureRoboImage 会覆盖已有基线图片，而不是对比。你可以在 CI 上用一个专门的 job 来更新基线，或者本地跑一下。

3.5 测试运行流程全景

下图展示了整个过程的交互关系：从测试代码到基线生成，再到对比结果。你可以把它当作一张挂图放在手边。

3.6 一个完整的实战示例

我们把所有内容组合成一个完整的测试文件，方便你直接参考：

import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.test.junit4.createComposeRule
import androidx.compose.ui.test.onRoot
import com.github.takahirom.roborazzi.captureRoboImage
import org.junit.Rule
import org.junit.Test

// 被测试的 Composable
@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello, $name!",
        style = MaterialTheme.typography.headlineMedium
    )
}

// 快照测试类
class GreetingScreenshotTest {

    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun greeting_default() {
        composeTestRule.setContent {
            Greeting(name = "World")
        }
        composeTestRule.onRoot().captureRoboImage("greeting_default.png")
    }

    @Test
    fun greeting_long_name() {
        composeTestRule.setContent {
            Greeting(name = "Supercalifragilisticexpialidocious")
        }
        composeTestRule.onRoot().captureRoboImage("greeting_long_name.png")
    }

    @Test
    fun greeting_empty_name() {
        composeTestRule.setContent {
            Greeting(name = "")
        }
        composeTestRule.onRoot().captureRoboImage("greeting_empty_name.png")
    }
}

运行方式：

./gradlew testDebugUnitTest

第一次会把三张基线图片生成到 src/test/assets/screenshots/ 下。之后每次跑都会有对比。如果某次重构导致 UI 变化，测试就会红掉，告诉你具体哪张图不一样。

3.7 常见误区 & 避坑指南

3.8 小结

好了，到这里你已经掌握了创建第一个 Compose 快照测试的全部要点。说白了就是三步：

1. 写一个 @Test 方法，里面用 composeTestRule.setContent { ... } 塞入你的 Composable。
2. 调用 captureRoboImage("文件名.png") 生成/对比快照。
3. 首次运行自动生成基线，后续每次运行都会自动对比。