XUtils

Playbook

📘A library for isolated developing UI components and automatically snapshots of them.


PlaybookUI

PlaybookUI is a framework that provides user interfaces made by SwiftUI for browsing a list of scenarios.

PlaybookGallery

The component visuals are listed and displayed.
Those that are displayed on the top screen are not actually doing layout, but rather display the snapshots that are efficiently generated at runtime.

Browser Detail
Gellery LightGellery Dark Gellery Content LightGellery Content Dark

PlaybookCatalog

The UI that search and select a scenario in a drawer. It’s more similar to Storybook.
If you have too many scenarios, this may be more efficient than PlaybookCatalog.

Browser Detail
Catalog LightCatalog Dark Catalog Detail LightCatalog Detail Dark

PlaybookSnapshot

Scenarios can be tested by the instance of types conform to TestTool protocol.
Snapshot is one of them, which can generate the snapshots of all scenarios with simulate the screen size and safe area of the given devices.
Since Playbook doesn’t depend on XCTest, it doesn’t necessarily need to be run on Unit-test.

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,
                devices: [.iPhone15Pro(.portrait)]
            )
        )
    }
}

Generated Images


PlaybookAccessibilitySnapshot

An extension to Playbook that uses AccessibilitySnapshot to produce snapshots with accessibility information such as activation points and labels.

Accessibility Snapshot


Integration with Third-party Tools

The generated snapshot images can be used for more advanced visual regression testing by using a variety of third party tools.

percy

percy

reg-viz/reg-suit

reg-suit


Requirements

  • Swift 5.9+
  • Xcode 15.2+
  • iOS 13.0+ (PlaybookUI: iOS 15.0+)


Articles

  • coming soon...