Android Jetpack Compose自定义Canvas组件UI测试方法咨询

核心思路 #

Compose的Canvas绘制属于底层UI操作，无法通过常规的onNode类API直接断言绘制内容，需通过捕获绘制指令或像素对比的方式验证，交互逻辑则可通过模拟触摸操作测试。

具体测试方案 #

1. 捕获绘制指令验证参数 #

利用Compose测试库的DrawingTestUtils捕获Canvas的绘制命令，断言各绘制元素的参数是否符合预期。

步骤：

• 先添加测试依赖：

androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

• 给Canvas添加测试标签方便定位：

Canvas(
    modifier = Modifier
        .fillMaxWidth()
        .height(canvasHeight.dp)
        .testTag("customCanvas") // 新增测试标签
        .pointerInput(Unit) {
            detectTapGestures { offset ->
                touchPosition.value = offset
            }
        }
) {
    // 原有绘制代码
}

• 编写测试用例：

@RunWith(AndroidJUnit4::class)
class CustomCanvasTest {
    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun canvas_draws_expected_elements() {
        val sunColor = listOf(Color.Yellow, Color.Orange)
        val testPath = Path().apply {
            moveTo(100f, 100f)
            lineTo(200f, 200f)
        }
        val canvasHeight = 300.dp

        composeTestRule.setContent {
            Canvas(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(canvasHeight.dp)
                    .testTag("customCanvas")
                    .pointerInput(Unit) {
                        detectTapGestures { offset ->
                            touchPosition.value = offset
                        }
                    }
            ) {
                drawArc(
                    color = Color(0xFFf04231),
                    startAngle = -90f,
                    sweepAngle = 180f,
                    useCenter = true,
                    size = Size(size.width * .50f, size.height * .50f),
                    topLeft = Offset(size.width * .25f, 0f)
                )
                drawPath(path = testPath, color = Color.White.copy(alpha = .90f))
                drawCircle(
                    brush = Brush.verticalGradient(sunColor),
                    radius = width.times(.17f),
                    center = Offset(width.times(.35f), height.times(.35f))
                )
            }
        }

        // 捕获所有绘制记录
        val drawRecords = composeTestRule.onNode(hasTestTag("customCanvas"))
            .captureDrawRecords()

        // 断言圆弧参数
        val arcRecord = drawRecords.first { it is DrawArcRecord } as DrawArcRecord
        assertEquals(Color(0xFFf04231), arcRecord.color)
        assertEquals(-90f, arcRecord.startAngle)
        assertEquals(180f, arcRecord.sweepAngle)
        assertTrue(arcRecord.useCenter)

        // 断言圆形参数
        composeTestRule.runOnIdle {
            val canvasWidth = composeTestRule.onNode(hasTestTag("customCanvas"))
                .fetchSemanticsNode().size.width.toFloat()
            val canvasHeightPx = composeTestRule.density.run { canvasHeight.toPx() }
            
            val circleRecord = drawRecords.first { it is DrawCircleRecord } as DrawCircleRecord
            assertTrue(circleRecord.brush is VerticalGradientBrush)
            val gradientBrush = circleRecord.brush as VerticalGradientBrush
            assertEquals(sunColor, gradientBrush.colors)
            assertEquals(canvasWidth * 0.35f, circleRecord.center.x)
            assertEquals(canvasHeightPx * 0.35f, circleRecord.center.y)
            assertEquals(canvasWidth * 0.17f, circleRecord.radius)
        }

        // 断言路径参数
        val pathRecord = drawRecords.first { it is DrawPathRecord } as DrawPathRecord
        assertEquals(testPath, pathRecord.path)
        assertEquals(Color.White.copy(alpha = 0.90f), pathRecord.color)
    }
}

2. 像素对比验证视觉效果 #

如果需要验证整体视觉是否符合预期，可将Canvas截图与基准图对比。

测试用例示例：

@Test
fun canvas_matches_visual_baseline() {
    composeTestRule.setContent {
        YourCustomCanvasComponent() // 你的自定义Canvas组件
    }

    // 捕获Canvas截图
    val screenshot = composeTestRule.onNode(hasTestTag("customCanvas"))
        .captureToImage()

    // 读取assets下的基准图
    val baselineBitmap = composeTestRule.context.assets.open("canvas_baseline.png").use {
        BitmapFactory.decodeStream(it)
    }

    // 断言像素差异在允许范围内（需自行实现或使用工具类）
    assertBitmapEquals(baselineBitmap, screenshot.asAndroidBitmap(), tolerance = 0.01f)
}

注：assertBitmapEquals需自行实现像素对比逻辑，要预留容错空间，避免设备分辨率差异导致测试失败。

3. 交互逻辑测试 #

验证Canvas的点击事件是否正确更新触摸位置：

@Test
fun canvas_updates_touch_position_on_tap() {
    val touchPosition = mutableStateOf(Offset.Zero)
    composeTestRule.setContent {
        Canvas(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp)
                .testTag("customCanvas")
                .pointerInput(Unit) {
                    detectTapGestures { offset ->
                        touchPosition.value = offset
                    }
                }
        ) {
            // 原有绘制代码
        }
    }

    // 模拟点击指定位置
    val testOffset = Offset(150f, 150f)
    composeTestRule.onNode(hasTestTag("customCanvas"))
        .performClick(testOffset)

    // 断言触摸位置更新正确
    assertEquals(testOffset, touchPosition.value)
}

注意事项 #

• 捕获绘制记录时，需配合runOnIdle等待Compose布局和绘制完成。
• 像素对比测试建议在固定分辨率的模拟器上运行，避免设备差异影响结果。
• 动态生成的Path等元素，测试时需使用固定输入，避免随机值导致测试不稳定。

内容的提问来源于stack exchange，提问作者Rudra Dave