PlaybookSnapshot 0.3.3

PlaybookSnapshot 0.3.3

×

由 ra1028 维护。

PlaybookSnapshot 0.3.3

  • 由
  • ra1028

Playbook

一个用于独立开发 UI 组件并自动抓取它们的快照的库。

playbook

Playbook

Playbook

Swift5 CI Status Lincense
Release Swift Package Manager CocoaPods Carthage

Playbook 是一个库，提供了一个沙箱来构建无需担心应用特定依赖的 UI 组件，在 Web 前端开发中被强烈地启发于 Storybook。

使用 Playbook 构建的组件可以生成一个独立的 living styleguide 应用。
这允许您不仅快速审核 UI，而且通过将业务逻辑从组件中分离出来，交付更稳健的设计。

此外，可以通过单元测试自动生成每个组件的快照，并使用任意的第三方工具进行视觉回归测试。

对于复杂的现代应用开发，更敏感地捕获 UI 变化并快速改进它们非常重要。
有了 Playbook，您不需要奋战于准备数据，也不需要花费人力资源进行手动测试。


使用方法

Playbook

Playbook 是一个框架，提供管理组件的基本功能。它支持 SwiftUI 和 UIKit。
组件以场景方式唯一存储。一个 Scenario 在布局组件方面有特定的方法。请查阅 API 文档 以了解各种布局。

Playbook.default.addScenarios(of: "Home") {
    Scenario("CategoryHome", layout: .fill) {
        CategoryHome().environmentObject(UserData.stub)
    }

    Scenario("LandmarkList", layout: .fill) {
        NavigationView {
            LandmarkList().environmentObject(UserData.stub)
        }
    }

    Scenario("UIView red", layout: .fixed(length: 100)) {
        let view = UIView()
        view.backgroundColor = .red
        return view
    }
}

ScenarioProvider 允许您隔离额外的场景，并保持您的 Playbook 构建干净。

struct HomeScenarios: ScenarioProvider {
    static func addScenarios(into playbook: Playbook) {
        playbook.addScenarios(of: "Home") {
            Scenario("CategoryHome", layout: .fill) {
                CategoryHome().environmentObject(UserData.stub)
            }
        }
    }
}

struct AllScenarios: ScenarioProvider {
    static func addScenarios(into playbook: Playbook) {
        playbook.add(HomeScenarios.self)
    }
}

您可以使用传递给创建组件的闭包的 ScenarioContext 获取快照中的屏幕大小，或者等待生成快照。

Scenario("MapView", layout: .fill) { context in
    MapView(coordinate: landmarkData[10].locationCoordinate) {
        // This closure will called after the map has completed to render.
        context.snapshotWaiter.fulfill()
     }
     .onAppear(perform: context.snapshotWaiter.wait)
}

PlaybookUI

PlaybookUI是一个提供由 SwiftUI 生成的用户界面的框架，用于浏览场景列表。

PlaybookGallery

组件外观被列出并展示。
顶屏显示的并非实际上布局，而是显示在运行时高效生成的快照。

浏览器 详情
Gellery LightGellery Dark Gellery Content LightGellery Content Dark

PlaybookCatalog

在抽屉中搜索和选择场景的UI。它更类似于 Storybook。
如果场景过多，这可能会比 PlaybookCatalog 更有效率。

浏览器 详情
Catalog Drawer LightCatalog Drawer Dark Catalog LightCatalog Dark

如何保存快照图像

要从每个UI的分享按钮将快照图像保存到照片库，必须支持 NSPhotoLibraryAddUsageDescription。有关更多信息，请参阅官方文档。

PlaybookSnapshot

可以通过符合 TestTool 协议的类型的实例来测试场景。
Snapshot 是其中之一，可以生成所有场景的快照，并模拟给定设备的屏幕尺寸和安全区域。
由于Playbook不依赖XCTest，因此它不一定需要在单元测试中运行。

final class SnapshotTests: XCTestCase {
    func testTakeSnapshot() throws {
        let directory = ProcessInfo.processInfo.environment["SNAPSHOT_DIR"]!

        try Playbook.default.run(
            Snapshot(
                directory: URL(fileURLWithPath: directory),
                clean: true,
                format: .png,
                keyWindow: UIApplication.shared.windows.first { $0.isKeyWindow },
                devices: [.iPhone11Pro(.portrait)]
            )
        )
    }
}

generate images

PlaybookAccessibilitySnapshot

Playbook的扩展，使用AccessibilitySnapshot生成带有活动点和标签等无障碍信息的快照。

accessibility-snapshot

与第三方工具的集成

生成的快照图像可以与各种第三方工具结合使用，以进行更高级的视觉回归测试。

percy

percy

reg-viz/reg-suit

reg-suit

要求

  • Swift 5.1+
  • Xcode 11.0+
  • iOS
    • Playbook: 11.0+
    • PlaybookSnapshot: 11.0+
    • PlaybookUI: 13.0+

安装

Playbook的功能分为以下框架。

  • Playbook: 组件管理的核心系统。
  • PlaybookSnapshot: 生成所有组件的快照。
  • PlaybookUI: 为Playbook管理的组件生成浏览UI。

CocoaPods

以下内容添加到您的 Podfile

target 'YourPlaybook' do
  pod 'Playbook'
  pod 'PlaybookUI'

  target 'YourPlaybookTests' do
    inherit! :search_paths

    pod 'PlaybookSnapshot'
  end
end

Carthage

以下内容添加到您的 Cartfile

github "playbook-ui/playbook-ios"

Swift Package Manager

选择 Xcode 菜单项 文件 > Swift 包 > 添加包依赖... 并使用图形用户界面输入仓库 URL。

Repository: https://github.com/playbook-ui/playbook-ios

注意：目前，SwiftPM 不支持为每个库指定操作系统版本，因此只支持 iOS13。

许可

Playbook 在 Apache 2.0 许可证 下发布。


Playbook