Let's @Preview the Future: Automating Screenshot Testing in CMP

Compose Multiplatform is gaining serious traction. With iOS support recently declared stable and Android Studio Narwhal introducing @Preview support for shared Composables in common, the ecosystem is evolving rapidly.

While @Preview is traditionally used for visual checks during UI development, what if we could transform these @Previews into powerful automated visual tests?

That's exactly what we'll explore in this talk. We'll:
- Briefly introduce screenshot testing and its key benefits
- Show how any Compose Multiplatform @Preview can become an automated screenshot test
- Walk through the full process with live coding examples

After this session, you’ll have a solid grasp of how to level up visual testing in your Compose Multiplatform projects.

Transcript

1. BY SERGIO SASTRE Screenshot Testing in CMP Automating Let’s the Future
2. How does screenshot testing @Gio_Sastre work ?
3. record AND verify @Gio_Sastre
4. CI @Gio_Sastre @Composable JVM
5. CI @Gio_Sastre + @Preview @Composable JVM
6. CI @Gio_Sastre + @Preview @Composable = test JVM
7. CI @Gio_Sastre + @Preview @Composable JVM
8. CI @Gio_Sastre + @Preview @Composable record JVM
9. CI @Gio_Sastre + @Preview @Composable record JVM
10. CI @Gio_Sastre + @Preview @Composable JVM
11. CI @Gio_Sastre + @Preview @Composable refactoring JVM
12. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
13. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
14. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
15. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
16. CI @Gio_Sastre + @Preview @Composable refactoring verify JVM
17. @Gio_Sastre + @Preview @Composable JVM refactoring verify
18. @Gio_Sastre + @Preview @Composable JVM refactoring verify
19. @Gio_Sastre + @Preview @Composable JVM refactoring verify
20. @Gio_Sastre + @Preview @Composable JVM refactoring verify
21. @Gio_Sastre = test @Preview
22. @Gio_Sastre + = test @Preview
23. Composable Preview Scanner https://github.com/sergio-sastre/ComposablePreviewScanner @Gio_Sastre
24. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device @Previews in CMP DESKTOP @Preview
25. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device @Previews in CMP DESKTOP @Preview
26. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device @Previews in CMP DESKTOP @Preview
27. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device @Previews in CMP DESKTOP @Preview
28. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device @Previews in CMP DESKTOP @Preview
29. @Gio_Sastre DEMO TIME
30. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device DESKTOP @Preview Common ComposablePreviewScanner Android ComposablePreviewScanner JvmAnnotation Scanner Composable Scanner
31. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device DESKTOP @Preview Common ComposablePreviewScanner Android ComposablePreviewScanner JvmAnnotation Scanner Composable Scanner
32. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device DESKTOP @Preview Common ComposablePreviewScanner Android ComposablePreviewScanner JvmAnnotation Scanner Composable Scanner
33. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device DESKTOP @Preview Common ComposablePreviewScanner Android ComposablePreviewScanner JvmAnnotation Scanner 0.7.0 Composable Scanner
34. @Gio_Sastre ANDROID @Preview @Preview @Preview COMMON widthDp heightDp widthDp heightDp fontScale locale uiMode device wallpapers apiLevel @Preview systemUi showBackground backgroundColor name group name group fontScale locale device DESKTOP @Preview Common ComposablePreviewScanner Android ComposablePreviewScanner JvmAnnotation Scanner 0.8.0 0.7.0 Composable Scanner
35. Linkedin @SergioSastre sergio-sastre @Gio_Sastre Hashnode blogs Sergio Sastre Flórez GDE for Android Lead Android developer Github sergio-sastre-florez