Facebook的Screenshot Tests for Android：高效预防视觉回归的自动化测试-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangkexin_z/article/details/145675706

Screenshot Tests for Android简介

Screenshot Tests for Android是Facebook开源的一款自动化测试工具，核心功能是在Android设备测试过程中生成快速且确定的截图。截图可用于追踪应用界面的变化，从而有效预防视觉回归。视觉回归是指应用界面在更新后出现的不期望的视觉变化，如布局错乱、颜色不一致等问题。通过Screenshot Tests for Android，可以更容易地捕捉这些问题，确保应用界面的稳定性和一致性。

Screenshot Tests for Android的原理

Screenshot Tests for Android的原理基于确定性截图的生成。所谓确定性截图，是指在每次测试运行时都能生成像素级别的完美截图。工具能够模拟Android的measure()、layout()和draw()方法，在测试线程上执行这些操作，从而避免由于线程和时序问题导致的截图不一致。

Screenshot Tests for Android利用了Android的测试框架和图形渲染机制。在测试过程中，它会对目标视图进行渲染，并捕获渲染结果作为截图。由于所有渲染操作都在测试线程上执行，因此可以确保每次测试生成的截图都是一致的。

Screenshot Tests for Android的功能

Screenshot Tests for Android主要功能介绍：

截图生成：在测试过程中自动生成目标视图的截图。

报告生成：提供工具生成包含所有截图的报告，便于开发者查看和分析。

布局层次插件：支持为截图报告添加额外的布局层次信息，以便开发者更深入地了解界面布局问题。

权限管理：截图库需要WRITE_EXTERNAL_STORAGE权限，工具提供了在测试APK中添加该权限的便利方法。

自定义测试运行器：支持开发者使用自定义的测试运行器，以适应不同的测试需求。

Screenshot Tests for Android的使用方法

设置Gradle插件

要使用Screenshot Tests for Android，首先需要设置Gradle插件。在项目的build.gradle文件中添加以下依赖项：

dependencies {
    classpath 'com.facebook.testing.screenshot:plugin:x.y.z' // 替换为最新版本号
}

然后在应用的build.gradle文件中应用该插件：

apply plugin: 'com.facebook.testing.screenshot'

创建截图测试

创建截图测试：

public class MyTests {
    @Test
    public void doScreenshot() {
        // 创建和设置视图
        View view = mLayoutInflater.inflate(R.layout.my_layout, null);
        // 执行其他必要的设置操作
 
        // 生成截图
        Screenshot.snap(view).record();
    }
}

Screenshot.snap(view).record();语句用于生成并记录视图的截图。

运行和验证截图测试

Screenshot Tests for Android提供了多个Gradle任务来运行和验证截图测试：

clean<AppVariant>Screenshots：清理上次生成的截图报告。
pull<AppVariant>Screenshots：从设备中拉取截图。
record<AppVariant>ScreenshotTest：安装并运行截图测试，然后记录它们的输出以供后续验证。
run<AppVariant>ScreenshotTest：安装并运行截图测试，然后生成报告。
verify<AppVariant>ScreenshotTest：安装并运行截图测试，然后验证它们是否与基准截图匹配。

要运行截图测试并生成报告，可以使用以下命令：

./gradlew runDebugAndroidTestScreenshotTest

生成的报告将保存在一个临时目录中，可以查看报告来检查截图的差异和变化。

使用布局层次插件

Screenshot Tests for Android提供了布局层次插件，为截图报告添加额外的布局层次信息。在测试类中使用这些插件可以获取更详细的布局信息：

@Test
public void doScreenshotWithLayoutHierarchy() {
    // 创建和设置视图
    View view = mLayoutInflater.inflate(R.layout.my_layout, null);
    // 执行其他必要的设置操作
 
    // 使用布局层次插件生成截图并记录
    Screenshot.snap(view)
        .addPlugin(new LayoutHierarchyDumperPlugin())
        .record();
}

LayoutHierarchyDumperPlugin插件可以生成包含布局层次信息的截图。

实践示例与代码分析

使用Screenshot Tests for Android测试一个简单的Android布局。

示例布局（`res/layout/my_layout.xml`）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, Screenshot Tests!"
        android:textSize="18sp" />
 
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />
</LinearLayout>

截图测试类（`MyTests.java`）：

import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.test.ext.junit.runners.AndroidJUnit4;
import androidx.test.rule.ActivityTestRule;
import org.junit.Rule;
import org.junit.Test;
import org.junit.runner.RunWith;
import com.facebook.testing.screenshot.Screenshot;
import com.facebook.testing.screenshot.core.ScreenshotImpl;
 
@RunWith(AndroidJUnit4.class)
public class MyTests {
 
    @Rule
    public ActivityTestRule<MainActivity> activityRule =
        new ActivityTestRule<>(MainActivity.class);
 
    @Test
    public void testMyLayout() {
        // 获取Activity的根视图
        View rootView = activityRule.getActivity().getWindow().getDecorView().findViewById(android.R.id.content);
 
        // 查找目标视图：TextView和Button
        TextView textView = rootView.findViewById(R.id.textView);
        Button button = rootView.findViewById(R.id.button);
 
        // 确保视图已经渲染完成
        ScreenshotImpl.waitForIdleSync();
 
        // 生成并记录TextView的截图
        Screenshot.snap(textView).record();
 
        // 生成并记录Button的截图
        Screenshot.snap(button).record();
    }
}