Swift快照测试简介

因此,我正在制作一个新的应用程序,我很乐意在进行过程中分享自己的所有经验,以便保持自己的积极性并分享一些知识,希望您可以自己使用应用。

为什么要测试UI?

很简单,您要确保每次触摸任何UI元素时,一切都保持原样,这种集成测试还可以帮助您实现像素完美的视图并通过设计使设计师满意他们甚至在您的拉取请求中也可以看到的参考图像

怎么样

我将尝试描述如何使用坚如磐石的facebook lib`FBSnapshotTestCase`测试所有UI组件和视图。

正如lib参考资料所述:

“快照测试用例”采用已配置的UIViewCALayer并使用renderInContext:方法获取其内容的图像快照。 它将快照与存储在源代码存储库中的“参考图像”进行比较,如果两个图像不匹配,则测试失败。

为了安装库,我们将使用Cocoapods安装依赖项

将以下行添加到您的Podfile中

之后,使用终端在项目根文件夹上进行Pod安装 ,然后打开生成的工作区以配置应用程序架构,如下所示

之后,您可以进入运行方案并将此环境变量添加到项目中

FB_REFERENCE_IMAGE_DIR = $(SOURCE_ROOT)/$(PROJECT_NAME)Tests/ReferenceImages

IMAGE_DIFF_DIR = $(SOURCE_ROOT)/$(PROJECT_NAME)Tests/FailureDiffs

看起来像这样

完成所有这些设置之后,我们将实际构成测试部分,您需要记住,我们可以测试任何UIViewCALayer因此,要检查的任何视图在添加新的测试用例 (包括UIViewController)时都比较容易

要测试什么?

就像我说过的,您可以测试要从UIViewCALayer继承的任何内容之前, 所以在这种情况下,我将测试设计师设计的新按钮组件

在这种情况下,我们要测试每个按钮的状态,以便当我们意外更新或更改任何GenericButton代码时,如果出现错误,则测试将失败

因此,让我们开始添加一个新的单元测试用例

然后更新代码,以便我们可以开始使用FBSnapshotTestCase。 为了使用该库,我们需要导入FBSnapshotTestCase ,然后将XCTestCase更改为FBSnapshotTestCase ,更改后将如下所示:

首先,让我尝试向您解释这个概念,以便您了解其工作原理。 为了进行快照测试,我们应该首先拍摄当前视图组件,此后,库将存储参考图像,以便以后每次运行此测试套件时,可以将其与新更改进行比较。 为了拍摄第一个快照,我们应该添加一些测试用例,然后在设置方法中将recordMode变量激活为true

按下测试操作后,您将看到所有UI测试失败的原因,请不要担心这是该过程的一部分,因为您会看到一条消息,告诉您现在所有参考图像都已保存,您可以打开recordMode为false并再次运行测试

如果要验证是否创建了参考图像,则可以检查测试文件夹,如果一切正常,则应看到一些具有实际组件状态的图像,在这种情况下,所有按钮状态均作为设计标记

但是我们还没有完成,我们想检查一下它是否有效,因此每当发生任何变化时,测试目标上都会出现红灯,因此我们应该从设置中删除recordMode行,然后再次击中测试目标

从现在开始,每次更改GenericButton组件中的某些会影响设计状态的警告时,都会警告您并且测试将失败,此技术可用于视图控制器,因此根据视图的状态,您可以查看元素是否到位一切正常,您还可以与设计人员共享参考图像,以便他们检查像素是否完美。

尾注

还有其他方法可以通过使用诸如KIF或Google的EarlGrey之类的库来测试UI元素,但我认为这种快照测试更易于维护,其中一个FBSnapshotTestCase可能与许多其他框架相同。

如果您有任何疑问或疑问,可以通过Twitter与我联系,我会尽力帮助您。 这是我的第一篇英文书面文章,请原谅我的错字🤓