美文网首页
iOS 使用fastlane screenshots 自动化截图

iOS 使用fastlane screenshots 自动化截图

作者: GloryMan | 来源:发表于2018-03-07 16:46 被阅读171次

    **# fastlane screenshots **

    图片失效请去 博客 查看

    文中使用到的文件都在这里

    ## 截屏使用

    官方使用文档

    ### 准备条件

    1. 项目中使用 UI Tests ,新项目可以直接勾选,老项目点击addTarget 找到 UITests 添加之后 会生成两个文件

    2. 在项目名UITests.swift 中添加测试代码 想要截图就要选择截取的位置

    
    func testLoginToLogOut() {
    
      // Use recording to get started writing UI tests.
    
      // Use XCTAssert and related functions to verify your tests produce the correct results.
    
     let ex = expectation(description: "等待启动完成")
    
     ex.fulfill()
    
     waitForExpectations(timeout: 2) { (error) in
    
     snapshot("0SignIn")
    
     }
    
     let textField = app.textFields["请输入手机号码"]
    
     textField.tap()
    
     textField.typeText("15311569523")
    
     let secureTextField = app.secureTextFields["输入密码"]
    
     secureTextField.tap()
    
     secureTextField.typeText("wwwwww")
    
     app.buttons["登  录"].tap()
    
     let ex1 = expectation(description: "首页显示")
    
     ex1.fulfill()
    
     waitForExpectations(timeout: 2) { (error) in
    
     snapshot("1SignIn")
    
     }
    
     tabBarsQuery.children(matching: .other).element(boundBy: 1).tap()
    
     let ex2 = expectation(description: "通讯录")
    
     ex2.fulfill()
    
     waitForExpectations(timeout: 3) { (error) in
    
     snapshot("2SignIn")
    
     }
    
     app.buttons["xy address add"].tap()
    
     let xyCommonBlackBackArrowButton = app.buttons["xy common black back arrow"]
    
     xyCommonBlackBackArrowButton.tap()
    
      // 查询当前tab的所有cell 选择第一个cell 点击
    
     app.tables.element.cells.allElementsBoundByIndex[0].tap()
    
     xyCommonBlackBackArrowButton.tap()
    
     app.tabBars.children(matching: .other).element(boundBy: 1).tap()
    
     app.tables.cells.containing(.staticText, identifier:"我的暴风设备").buttons["xy address call"].tap()
    
     app.buttons["xy videocall hangup"].tap()
    
     let ex3 = expectation(description: "拨打视频通话")
    
     ex3.fulfill()
    
     waitForExpectations(timeout: 2) { (error) in
    
     snapshot("3SignIn")
    
     }
    
     app.tabBars.children(matching: .other).element(boundBy: 2).tap()
    
     app.buttons["编辑"].tap()
    
     xyCommonBlackBackArrowButton.tap()
    
     let ex4 = expectation(description: "个人")
    
     ex4.fulfill()
    
     waitForExpectations(timeout: 2) { (error) in
    
     snapshot("4SignIn")
    
     }
    
     let tablesQuery2 = app.tables
    
     let tablesQuery = tablesQuery2
    
     tablesQuery/*@START_MENU_TOKEN@*/.staticTexts["修改密码"]/*[[".cells.staticTexts[\"修改密码\"]",".staticTexts[\"修改密码\"]"],[[[-1,1],[-1,0]]],[0]]@END_MENU_TOKEN@*/.tap()
    
     xyCommonBlackBackArrowButton.tap()
    
     tablesQuery/*@START_MENU_TOKEN@*/.staticTexts["使用帮助"]/*[[".cells.staticTexts[\"使用帮助\"]",".staticTexts[\"使用帮助\"]"],[[[-1,1],[-1,0]]],[0]]@END_MENU_TOKEN@*/.tap()
    
     xyCommonBlackBackArrowButton.tap()
    
     tablesQuery/*@START_MENU_TOKEN@*/.staticTexts["关于"]/*[[".cells.staticTexts[\"关于\"]",".staticTexts[\"关于\"]"],[[[-1,1],[-1,0]]],[0]]@END_MENU_TOKEN@*/.tap()
    
     xyCommonBlackBackArrowButton.tap()
    
     tablesQuery/*@START_MENU_TOKEN@*/.staticTexts["联系我们"]/*[[".cells.staticTexts[\"联系我们\"]",".staticTexts[\"联系我们\"]"],[[[-1,1],[-1,0]]],[0]]@END_MENU_TOKEN@*/.tap()
    
     xyCommonBlackBackArrowButton.tap()
    
     tablesQuery2.buttons["退出登录"].tap()
    
     }
    
    

    snapshot("0SignIn") 这个方法你可能吊用不了 是因为你还没有安装 snapshot

    ### 配置 snapshot

    
    fastlane snapshot init
    
    

    执行完成会在Fastlane 文件下生成 Snapfile 文件打开如下 还会有一个 SnapshotHelper.swift 文件

    SnapshotHelper.swift 这个文件需要添加到项目中以便下面使用

    屏幕快照 2018-03-06 下午6.57.49
    
    # Uncomment the lines below you want to change by removing the # in the beginning
    
    # A list of devices you want to take the screenshots from
    
    devices([
    
      "iPhone 8 Plus",
    
      "iPhone X"
    
    ])
    
    languages([
    
      "en-US"
    
      # "it-IT",
    
      # ["pt", "pt_BR"] # Portuguese with Brazilian locale
    
    ])
    
    # The name of the scheme which contains the UI Tests
    
    # scheme("SchemeName")
    
    # Where should the resulting screenshots be stored?
    
    # output_directory("./screenshots")
    
    # remove the '#' to clear all previously generated screenshots before creating new ones
    
    # clear_previous_screenshots(true)
    
    # Arguments to pass to the app on launch. See https://docs.fastlane.tools/actions/snapshot/#launch-arguments
    
    # launch_arguments(["-favColor red"])
    
    # For more information about all available options run
    
    # fastlane action snapshot
    
    

    成功之后需要在你项目中 xxxUITests.swift 文件方法 setUp 中添加

    
    let app = XCUIApplication()
    
    setupSnapshot(app)
    
    

    现在你可以在需要截屏的位置使用 snapshot("截屏图片的名字")

    现在打开你的终端在项目的根目录下执行

    ### 执行截屏操作得到结果

    
    fastlane snapshot
    
    
    完成后会在Fastlane 目录下生成一个文件名为 "screenshots"里面就是你截图的文件 如图 html文件 会自动打开 屏幕快照 2018-03-06 下午6.55.07 屏幕快照 2018-03-06 下午6.55.24

    使用 fastlane action snapshot 查看更详细的操作功能

    ## 为截屏的图片加上手机框****使用 frameit

    使用 frameit 需要安装依赖库 ImageMagick

    
    brew install libpng jpeg imagemagick
    
    

    如果你已经安装了imagemagick,但看到如下错误消息:

    
    mogrify: no decode delegate for this image format `PNG'
    
    

    您可能需要重新安装并从源代码构建。运行:

    
    brew uninstall imagemagick; brew install libpng jpeg; brew install imagemagick --build-from-source
    
    

    更新frameit fastlane frameit setup

    屏幕快照 2018-03-07 上午10.15.27

    ### 使用

    在截屏根目录使用执行 frameit 会得到一组套黑色手机边框的图片,可以使用 frameit silver 得到白色边框的图片

    
    frameit
    
    

    支持的手机框颜色

    
    white
    
    silver
    
    rose_gold
    
    gold
    
    // 查询更多用法
    
    fastlane action frameit 
    
    

    ## 为截图自定义标题和背景

    官方文档

    屏幕快照 2018-03-07 下午3.32.37

    ### 第一步****创建 Framefile.json 文件

    在 screenshots文件目录下 创建 Framefile.json,cd 到终端 touch Framefile.json

    
    {
    
      "default": {
    
      "keyword": {
    
     "fonts": [
    
     {
    
      "font": "./fonts/Sauce Code Powerline Light.otf",
    
      "supported": ["en-US"]
    
     },
    
     {
    
      "font": "./fonts/Sauce Code Powerline Light.otf",
    
      "supported": ["zh-Hans"]
    
     }
    
     ]
    
     },
    
     "title": {
    
     "fonts": [
    
     {
    
      "font": "./fonts/Sauce Code Powerline Light.otf",
    
      "supported": ["en-US"]
    
     },
    
     {
    
      "font": "./fonts/Sauce Code Powerline Light.otf",
    
      "supported": ["zcmn-Hans"]
    
     },
    
     {
    
      "font": "./fonts/Sauce Code Powerline Light.otf",
    
      "supported": ["ja-JP"]
    
     }
    
     ],
    
      "color": "#545454"
    
     },
    
      # 自定义背景图片
    
      "background": "./background.jpeg",
    
      # 是否完全显示手机框、false 为底部会被隐藏部分视图
    
      "show_complete_frame": false,
    
      # 关键字是否在标题上面
    
      "stack_title" : true,
    
      "padding": 50,
    
      # 标题在屏幕下方还是上方 false 为上方
    
      "title_below_image": false,
    
     },
    
      "data": [
    
     {
    
      "filter": "iPhone 8 Plus-0Snapshot",
    
     "keyword": {
    
      "color": "#d21559"
    
     }
    
     },
    
     {
    
      "filter": "iPhone 8 Plus-1Snapshot",
    
     "keyword": {
    
      "color": "#feb909"
    
     }
    
     },
    
     {
    
      "filter": "iPhone 8-0Snapshot",
    
     "keyword": {
    
      "color": "#feb909"
    
     }
    
     },
    
     {
    
      "filter": "iPhone 8-1Snapshot",
    
     "keyword": {
    
      "color": "#feb909"
    
     }
    
     },
    
     {
    
      "filter": "iPhone X-0Snapshot",
    
     "keyword": {
    
      "color": "#feb909"
    
     }
    
     },
    
     {
    
      "filter": "iPhone X-1Snapshot",
    
     "keyword": {
    
      "color": "#feb909"
    
     }
    
     }
    
     ]
    
    }
    
    

    ### 创建 keyword.strings title.strings 文件

    keyword 关键字 title 标题文件

    要使用自定义标题和关键字的前提是需要 将两个 .strings文件放入 语言文件夹中 示例项目

    报错提示这两个文件有问题去 这里查看

    文件编码必须为 utf-16 编码

    屏幕快照 2018-03-07 下午4.14.42 屏幕快照 2018-03-07 下午4.14.51

    配置工作已经完成

    ### 运行 fastlane frameit 这里是在****en-US 目录下执行的****在根目录执行还睡将生成的图片添加到项目的****Assets

    可以指定颜色的手机框,执行结果如图

    屏幕快照 2018-03-07 下午4.20.17

    完整结构目录:

    屏幕快照 2018-03-07 下午4.22.12

    到这里已经完成从 自动截图 -- 自动添加手机边框 -- 自定义背景 --- 自定义标题、关键字

    参考文档

    fastlane 官方文档

    Screenshots 文档

    frameit 文档

    相关文章

      网友评论

          本文标题:iOS 使用fastlane screenshots 自动化截图

          本文链接:https://www.haomeiwen.com/subject/sqtsfftx.html