Опыт внедрения скриншот-тестирования

Презентация моего доклада на конференции DUMP-2023

Transcript

1. Опыт внедрения скриншот- тестирования Олег Осипенко Wildberries
2. Что такое скриншот-тест Эталон Diff Свежий скриншот
3. Тестовая пирамида
4. О чем этот доклад - сторонние библиотеки
5. О чем этот доклад - сторонние библиотеки - почему Shot
6. О чем этот доклад - сторонние библиотеки - почему Shot - проблемы Shot
7. О чем этот доклад - сторонние библиотеки - почему Shot - проблемы Shot - инструменты для создания 
 собственной библиотеки
8. О чем этот доклад - сторонние библиотеки - почему Shot - проблемы Shot - инструменты для создания 
 собственной библиотеки - архитектура решения
9. О чем этот доклад - сторонние библиотеки - почему Shot - проблемы Shot - инструменты для создания 
 собственной библиотеки - архитектура решения - что можно улучшить
10. Facebook screenshot testing library Droidcon NYC 2015
11. Facebook screenshot testing library Минусы не поддерживается 🚫
12. Facebook screenshot testing library Минусы не поддерживается требует Python 🚫
13. Paparazzi плюсы
14. Paparazzi плюсы быстрый 🚀
15. Paparazzi плюсы быстрый поддержка XML и Compose 🚀
16. Сложные списки
17. Shot
18. Shot плюсы активно поддерживался 🔨
19. Shot плюсы не требует Python ♻ активно поддерживался 🔨
20. Shot плюсы простота интеграции 👌 не требует Python ♻ активно поддерживался 🔨
21. Shot интеграция buildscript { dependencies { classpath 'com.karumi:shot:<LATEST_RELEASE>' } } apply plugin: 'shot' android { defaultConfig { testInstrumentationRunner "com.karumi.shot.ShotTestRunner" } }
22. Shot интеграция
23. Shot интеграция class MyActivityTest: ScreenshotTest { @Test fun theActivityIsShownProperly() { val mainActivity = startMainActivity() compareScreenshot(mainActivity) } }
24. Shot тест-репорт
25. Shot и жили они долго и счастливо
26. Shot минусы требует adb 🔌
27. Shot минусы требует adb 🔌 🔄 необходима синхронизация настроек
28. Shot минусы требует adb необходима синхронизация настроек 🔌 тупой алгоритм сравнения 🔄 👺
29. Shot проблемы с Compose
30. Shot проблемы с Compose. Посмотрим байты
31. Shot минусы перестал обновляться 🚫
32. Shot минусы
33. Пайплайн тестирования 1. Прогон тестов и создание скриншотов 2. Получение скриншотов с девайса 3. Сравнение скриншотов с образцом 4. Генерация тест-репорта
34. public final class Screenshot { static ScreenCapture capture(); static ScreenCapture capture(Activity activity); static ScreenCapture capture(View view); } public final class ScreenCapture { Bitmap getBitmap(); } public interface ScreenCaptureProcessor { abstract String process(ScreenCapture capture); } Google android testing library
35. Пайплайн тестирования 1. Прогон тестов и создание скриншотов ✅ 2. Получение скриншотов с девайса ❓ 3. Сравнение скриншотов с образцом ❓ 4. Генерация тест-репорта ❓
36. Поиск дубликатов поиск по содержанию поиск по ключевым точкам перцептуальные кэши
37. Phash как частный случай LSH Locality-sensitive hashing (LSH) — вероятностный метод понижения размерности многомерных данных. Основная идея состоит в таком подборе хеш-функций для некоторых измерений, чтобы похожие объекты с высокой степенью вероятности попадали в одну корзину.
38. ImageMagick
39. Пайплайн тестирования 1. Прогон тестов и создание скриншотов ✅ 2. Получение скриншотов с девайса ❓ 3. Сравнение скриншотов с образцом ✅ 4. Генерация тест-репорта ❓
40. Пайплайн тестирования 1. Прогон тестов и создание скриншотов ✅ 2. Получение скриншотов с девайса ❓ 3. Сравнение скриншотов с образцом ✅ 4. Генерация тест-репорта ✅
41. Flank & Fladle
42. Пайплайн тестирования 1. Прогон тестов и создание скриншотов ✅ 2. Получение скриншотов с девайса ✅ 3. Сравнение скриншотов с образцом ✅ 4. Генерация тест-репорта ✅
43. open class BaseScreenshotTest { @get:Rule val permissionRule: GrantPermissionRule = GrantPermissionRule.grant( Manifest.permission.WRITE_EXTERNAL_STORAGE, Manifest.permission.READ_EXTERNAL_STORAGE ) } fun View.takeScreenshot() { disableFlakyComponentsAndWaitForIdle(this) Screenshot.capture(this).process() } fun Fragment.takeScreenshot() fun Activity.takeScreenshot() fun SemanticsNodeInteraction.takeScreenshot() fun takeScreenshot(bitmap: Bitmap, name: String) BaseScreenshotTest
44. class FirebaseScreenCaptureProcessor : BasicScreenCaptureProcessor() { init { mDefaultScreenshotPath = File("/sdcard/screenshots") } override fun getDefaultFilename(): String = getFileName() companion object { fun getFileName(): String { for (element in Thread.currentThread().stackTrace) { if (isTestMethod) { return «$element.className_$element.methodName" } } } } } FirebaseScreenshotCaptureProcessor
45. internal class FooterTest: BaseScreenshotTest() { @get:Rule val composeRule = createComposeRule() @Test fun testFooter() { composeRule.setContent { Footer( text = "Contact the dispatcher" ) } composeRule.onRoot().takeScreenshot() } } Пример теста
46. Конфигурация Fladle fladle { directoriesToPull = [".*/sdcard/screenshots/.*"] }
47. ./gradlew app:assembleDebug :app:assembleDebugAndroidTest ./gradlew runFlank запуск Fladle
48. запуск Fladle
49. class ScreenshotRecorder { fun recordScreenshots(project: Project) { if (hasRecordedScreenshots()) { recordedScreenshots() .filter { it.extension.equals("png", true) } .forEach { recordedFile -> val referenceFile = Path.of("$referenceDirectory/${recordedFile.fileName}") val copy = recordedFile.copyTo(referenceFile, true) } } else { Console.printWarning("Module :${project.name} doesn't have recorded screenshots. Skip") } } } Запись скриншотов
50. Верификация скриншотов
51. class ScreenshotVerifier{ fun processScreenshot(recorded: Screenshot): ScreenshotComparisonResult { val reference = recorded.getReference() return if (reference.notExists()) { nonExistingReference() } else { val recordedImageSize = imageMagick.getImageSize(recorded) val referenceImageSize = imageMagick.getImageSize(reference) when { recordedImageSize != referenceImageSize -> sizeHasChanged() imageMagick.screenshotsAreDifferent() -> screenshotInvalid() else -> screenshotValid() } } } } Screenshot verifier
52. Расстояние Хэмминга 0.0000089684
53. Расстояние Хэмминга 2.18014
54. Расстояние Хэмминга 0.0221292
55. Расстояние Хэмминга пороговое значение 0.0001
56. Генерация diff-изображения magick compare -metric AE -fuzz 15% dump1.png dump2.png dump3.png Эталон Diff Свежий скриншот
57. Что можно улучшить?
58. android { testOptions { managedDevices { devices { add(create<ManagedVirtualDevice>("shotter") { device = "Pixel" apiLevel = 28 systemImageSource = "aosp" require64Bit = false }) } } } } ./gradlew app:shotterCheck Gradle managed device
59. android { defaultConfig { testInstrumentationRunnerArguments += mapOf("useTestStorageService" to "true") } } dependencies { androidTestUtil("androidx.test.services:test-services:$servicesVersion" } Сохраняет скриншоты в папку: build/outputs/managed_device_android_test_additional_output TestStorageService
60. import androidx.test.espresso.screenshot.captureToBitmap import androidx.test.core.graphics.writeToTestStorage open class BaseScreenshotTest { @get:Rule val permissionRule: GrantPermissionRule = GrantPermissionRule.grant( Manifest.permission.WRITE_EXTERNAL_STORAGE, Manifest.permission.READ_EXTERNAL_STORAGE ) fun captureScreenshot() { onView(withId(android.R.id.content)) .captureToBitmap().writeToTestStorage(«name") } } BaseScreenshotTest
61. { "viewHierarchy": { "class": "android.widget.FrameLayout", "left": 0, "top": 0, "width": 1080, "height": 1794, "children": [ { "class": "android.widget.ImageView", "left": 455, "top": 801, "width": 170, "height": 191 } ] }, "version": 1, "axHierarchy": {} } Cоздание скриншотов в Shot
62. Cоздание скриншотов в Shot скриншот здорового человека скриншот курильщика
63. abstract class ScreenshotVerificationTask : DefaultTask() { @get:Incremental @get:InputDirectory abstract val referenceDirectory: DirectoryProperty @get:Incremental @get:InputDirectory abstract val recordedDirectory: DirectoryProperty @get:OutputDirectory abstract val reportDirectory: DirectoryProperty @TaskAction fun execute(inputChanges: InputChanges) { } } Инкрементальность
64. git lfs install git lfs track "*.png" git add .gitattributes Git LFS
65. Заключение
66. Новые библиотеки
67. Dropshots
68. Roborazzi Paparazzi is a great tool to see the actual display in the JVM. Paparazzi relies on LayoutLib, Android Studio's layout drawing tool. Robolectric 4.10 adds support for native Android graphics. When native graphics is enabled, interactions with Android graphics classes use real native Android graphics code and are much higher fidelity
69. Доклад Максима Теймурова
70. https://habr.com/ru/users/basnopisets/ https://medium.com/@olegosipenko Ciao!