Automatic screenshot testing for all your Compose @Previews

一言で表すと

全ての@PreviewsがついたComposableのスクリーンショット撮るよ

概要

記事の内容

デザイナー、QA、PMとのコミュニケーションが円滑になる

最近スクリーンショットのフックを追加しました

スクリーンショットを撮って比較してくれるツール

統合

code:kotlin

@ShowkaseScreenshot(rootShowkaseClass = ShowkaseRoot::class)

abstract class ComposeTests : ShowkaseScreenshotTest {

override fun onScreenshot(

id: String,

name: String,

group: String,

styleName: String?,

screenshotType: ShowkaseScreenshotType,

screenshotBitmap: Bitmap

) {

val view = ImageView(InstrumentationRegistry.getInstrumentation().context)

view.setImageBitmap(screenshotBitmap)

ViewHelpers.setupView(view).setExactWidthPx(screenshotBitmap.width).setExactHeightPx(screenshotBitmap.height).layout()

Screenshot.snap(view).setName("$group - $name").record()

}

}

コマンド

code:shell

# スクリーンショットを含むHTMLレポートを書き出す

./gradle runDebugAndroidTestScreenshotTest

# すべてのスクリーンショット画像ファイルをフォルダに保存する

./gradle recordDebugAndroidTestScreenshotTest

# 前回のスクリーンショットと比較する

./gradle verifyDebugAndroidTestScreenshotTest

今後はCIで継続的に動かすことをやりたい

Showkaseの実装

code:kotlin

@RequiresApi(Build.VERSION_CODES.O)

fun takeComposableScreenshot(

showkaseBrowserComponent: ShowkaseBrowserComponent

) {

// Disable animations for screenshots to make them deterministic

composeTestRule.mainClock.autoAdvance = false

composeTestRule.setContent { showkaseBrowserComponent.component() }

val bitmap = composeTestRule.onRoot().captureToImage().asAndroidBitmap()

onScreenshot(

id = showkaseBrowserComponent.componentKey,

name = showkaseBrowserComponent.componentName,

group = showkaseBrowserComponent.group,

styleName = showkaseBrowserComponent.styleName,

screenshotType = ShowkaseScreenshotType.Composable,

screenshotBitmap = bitmap,

)

}

screenshot-tests-for-android(facebook) の実装

javaで読むの辛い…

気になるポイント

一度bitmap化してからImageViewで表示して再度captureするの無駄が多そう

productのmoduleにdummy dataとかが入るのが嫌…

Katalogでもスクリーンショット連携を提供しようとしています

画像ファイルの保存場所困ってる

テストを動かしているデバイスに保存される

コメント

code:kotlin

feature/xx

testImplement dummy

dummy

appCatalog

implement dummy

ここでPreview用のコードを書く