首先, 看到snapshot部分,想必你已经对FastLane已经有了解。如果你对 Fastlane 还不太了解,那么可以先看我上一篇对于 Fastlane基础介绍《24. 自动化工具Fastlane笔记一: 安装, 打包,上传(testFlight,app store)》,再回来阅读此篇文章。
前言
Fastlane中和截图相关的有两部分,snapshot
和frameit
。 snapshot
负责对应用截图,frameit
对图片再加工修饰。
本文这里只针对snapshot
,以示例项目的形式给大家尽可能详细的说明。
UI Test
在Fastlane-snapshot部分,介绍了snapshot是基于UI Test来实现的。UI Test是苹果在Xcode7上推出的一个自动化测试模块。
snapshot uses the capabilities of Apple's UI Tests to drive interactions with your app.
如果想要对UI Test进行了解,大家可以在Fastlane doc中的snapshot部分中的《Getting Started Using UI Tests》小结找到官方推荐的文档。
好了,下面开始示例
项目示例及步骤
官方的步骤可以在都可以在Fastlane doc中查看, 文档格式要比在github中的markdown形式好的多。 《Setting Up snapshot》小结, 如下图:
- step0: 执行
sudo gem install snapshot
,安装snapshot模块
- step1: 正常创建项目(我的示例项目是之前的一个仿写项目JiKeScrollView)
- step2: 执行
fastlane init
创建fastlane文件夹(上一篇文章中有详细介绍)
fastlane init
- step3: 执行
fastlane snapshot init
,创建出Snapfile和SnapshotHelper.swift文件。
fastlane snapshot init之后
上边三步还是比较简单的,如果你fastlane配置的没有问题,很快就执行成功。
下边的步骤主要分为两部分:
- 一是导入SnapshotHelper.swift(Swift)文件,也就是在OC项目中引入和使用Swift代码
- 二是UI Test录制手势,和开始截图
- step4:
Add the ./SnapshotHelper.swift file to your UI Test target (You can move the file anywhere you want)
把SnapshotHelper.swift
文件向平常一样拖入项目,选择加入哪个target的时候, 选择加入到JiKeScrollViewUITests(自己的项目名字UITests)
就可以了,千万不要勾选其他两个,否则会报错import XCTest找不到
。
选择加入的target, 点击 [确定] 以后. 会询问你是否创建桥接文件(只有第一次拖入的时候SnapshotHelper.swift 才会提示, 你如果删除了SnapshotHelper.swift之后, 再次向工程中拖入SnapshotHelper.swift就不会提示了让你创建桥接文件了, 正常现象)。 这个桥接文件对于在OC项目中引用Swift代码, 创建与否都可以。但是反过来就不行了, 如果不提示创建桥接文件, 你可以尝试手动创建该文件。 我们的示例项目是OC项目!
- step5: 选中
target—JiKeScrollViewUITests-> Build Settings -> Defines Module
设置为YES。不设置这一项的话,你会在第六步中发现,引用文件JiKeScrollViewUITests-Swift.h(MYUITests-Swift.h)的时候, 会出现报红色警告。 这个警告虽然出现, 但是com+R依然能正常启动和运行。但是Defines Module这一步在我们平常的OC引入Swift文件时候也是必须要有的,我们还是需要设置为YES, 如下图:
- step6:
(Objective C only) Add the bridging header to your test class. (1) #import "MYUITests-Swift.h" 引入头文件 (2)The bridging header is named after your test target with -Swift.h appended.
头文件的名字是 “项目名+ -Swift.h”
回到示例项目,在JiKeScrollViewUITests.m
文件中,我们需要引入"JiKeScrollViewUITests-Swift.h"头文件。(注意: 这个头文件是系统默认生成的,不用我们手动创建,我们在拖入Siwft文件之后,直接引用就可以。 没有智能提示,所以不必惊慌,保证#import'target名称-Swift.h'
正确就可以了。)
到这里,com+R一下项目,是不是没有任何报错,直接运行了呢?这里关于OC引入Swift代码的部分就完成了
移步到JiKeScrollViewUITests.m文件中,简单介绍一下文件中的三个方法(其实文件中英文注释已经说明了):
- (void)setUp: 方法在XCTestCase的测试方法调用之前调用,可以在测试之前创建在test case方法中需要用到的一些对象等
- (void)tearDown: 当测试全部结束之后调用tearDown方法,法则在全部的test case执行结束之后清理测试现场,释放资源删除不用的对象等
- (void)testExample: 测试代码执行性能
(引用和更新自 《 Xcode7 UITest UnitTest 自动化测试学习》)
- step7: 在
- (void)setUp
方法中初始化Snapshot对象代码, 如下:
XCUIApplication *app = [[XCUIApplication alloc] init];
[Snapshot setupSnapshot:app];
[app launch];
可点击
- step8: 录入UI Test操作,
In your UI Test class, click the Record button on the bottom left and record your interaction
,官方说点击录制按钮直接录制就可以了,这个地方需要注意的是,你可能发现录制红色按钮是灰色不可点击状态,这就尴尬了。这可怎么办?
正确的操作是我们把鼠标放到
- (void)testExample {
// Use recording to get started writing UI tests.
}
这个方法中。这个时候录制按钮才可以点击! 点击,自动启动模拟器,愉快的开始录制我们的手势操作。
不可点击
关于录制手势,我们每次点击事件,都会在testExample在这个方法中自动生成测试代码,我们要做的是在我们把下边的代码:
- Swift: snapshot("01LoginScreen")
- Objective C: [Snapshot snapshot:@"01LoginScreen" waitForLoadingIndicator:YES];
放到你需要截图的点击事件对应的测试代码位置。
如下图:
以上八步都完成以后,我们com+B一下,看看有没有报警号,如果没有,那么大功快要告成了。
- step9: 在工程文件家中找到
Snapfile
文件,打开按照我们需要的编辑。 英文注释很简明详细,我只要快速提醒你, #号是注释就可以了。下边是我的配置:
- step10: 最后一步,在控制台执行
fastlane snapshot
,根据上边指定的截图输入位置,我们可以看到截图,并且在浏览器中自动生成html文件了。
到这里,snapshot部分就结束了。
等等,还有点问题
-
题目是浅析,本来我打算�用这个当做App Store的展示图片的,但是发现还是挺麻烦的,而且
frameit
还没有弄,还是交给美工同志实在一点。
这篇文章并不完美,比如而且遇到一个问题就是对录制一个手势操作,即一个地方加入[Snapshot snapshot:@"01LoginScreen" waitForLoadingIndicator:YES];
成功。 这个显然是存在问题的,肯定是可以对很多的手势进行操作的,但是我也没有找出具体的原因。希望有知道的朋友,一定要告诉我一下,不胜感激~! -
执行第十步,会遇到一个错误
Incomplete universal character name
导致snapshot操作不成功。具体原因现在查到的是因为UTF转码的问题,需要把@"\U5373\U523b\U9996\U9875\U6eda\U52a8\U6548\U679c
中的大写U替换成小写U,就可以了。 具体可以看《UITests Incomplete universal character name》 -
这里强调一下: OC引入Swift的桥接文件,如果你之前点击了取消,后期再拖入和创建Swift文件是不会再次提示创建的,你需要做的是手动创建。 步骤《OC引入Swift,混编》和 《在Swift项目中使用OC,在OC项目中使用Swift》
参考文章
《fastlane screenshots for iOS and tvOS》
《fastlane 之截图自动化》
交流
希望能和大家交流技术
Blog:http://www.lilongcnc.cc
网友评论