断言图像存在于 UITest 中的按钮上答案

【问题标题】：Assert that Image exists on button in UITest断言图像存在于 UITest 中的按钮上
【发布时间】：2021-03-05 06:08:09
【问题描述】：

我在 ZStack 中有一个带有前景图像的按钮：

Button(action: {
    self.highlighted = !self.highlighted
}) {
    ZStack {
        Text("Text")
        if self.highlighted {
            Image("highlighted").resizable()
        }
    }
}

前景图像（“突出显示”）仅在变量为真时可见。单击按钮可翻转突出显示的变量。因此，如果单击按钮，它将突出显示，如果再次单击，则不再突出显示。我现在想要一个 UiTest，其中单击按钮并测试检查“突出显示”的图像是否存在。这就是我作为 UiTest 所拥有的，但它在最后一个断言中失败了：

func test_highlight() {
    let app = XCUIApplication()
    let button = app.buttons["my_button"]
    XCTAssertTrue(button.exists)
    button.tap()
    XCTAssertTrue(button.images["highlighted"].exists) // <-- Fails here
}

这在 UiTests 中是否可行。如果是，如何？如果没有，还有什么办法？

【问题讨论】：

标签： xcode swiftui xctest xcode-ui-testing xcuitest

【解决方案1】：

辅助功能引擎看不到按钮的内部结构，但如果你改变喜欢

Button(action: {
    self.highlighted = !self.highlighted
}) {
    if self.highlighted {
        Image("highlighted").resizable()
    } else {
       Text("Text")
    }
}

然后您可以通过 UT 验证切换（使用 Xcode 12.1 / iOS 14.1 测试）

func test_highlight() {
    let app = XCUIApplication()
    app.launch()
    let button = app.buttons["Text"]     // << fits button label
    XCTAssertTrue(button.exists)
    button.tap()

    let highlighted_button = app.buttons["highlighted"] // fits button image name
    XCTAssertTrue(highlighted_button.exists)
}

更新：透明图像的可能变体

struct DemoView: View {
    @State private var highlighted = false
    var body: some View {
        Button(action: {
             self.highlighted = !self.highlighted
        }) {
             ZStack {
                  Text("Text")
                  if self.highlighted {
                        Image("flag-1").resizable()
                  }
             }
        }
        .accessibility(identifier: highlighted ? "highlighted" : "button" )
    }
}

func test_highlight() {
     let app = XCUIApplication()
     app.launch()
     let button = app.buttons["button"]
     XCTAssertTrue(button.exists)
     button.tap()

     let highlighted = app.buttons["highlighted"]
     XCTAssertTrue(highlighted.exists)
}

【讨论】：

好的，但是文本不再可见，对吧？如果引擎看不到内部，还有其他方法可以测试它（使用正常的单元测试？）。我无法想象我是唯一一个遇到这种情况的人。
你没有说你有透明图像。好的，查看更新可能的变体 - 根据其状态识别按钮。
好的，可以。但老实说，我真的不喜欢在项目文件中编写代码只是为了让测试工作。很遗憾，如果这是唯一的测试方法。

【解决方案2】：

好的，这行得通。但老实说，我真的不喜欢在项目文件中编写代码只是为了让测试工作。很遗憾，如果这是唯一的测试方法

我同意并且我不会使用该标识符。然而，公平地说，我认为你所要求的不是你通常在 UI 测试级别测试的东西 ? 吗？

也许通过单元测试资源和业务逻辑（即您的布尔值）并通过快照测试来测试 UI-looks-good？

我个人会在这里通过用户集成流程中元素的可访问性/值/标签等来验证 UI。

示例

如果您将按钮配置为可正常访问，则可以验证按钮的“选定”状态。

let localisedstring = “localised-text”

Button(action: {
    self.highlighted = !self.highlighted
}) {
    ZStack {
        Text(localisedstring)
        if self.highlighted {
            Image("highlighted").resizable()
        }
    }
}
.accessibilityTraits(isHighlighted ? [.button, .selected] : [.button])
.accessibilityLabel(localisedString)

那么在测试中你可以这样做：

// Given base button 
let button = app.buttons[“button-id”]
XCTAssertFalse(button.isSelected) 

// When user taps 
button.tap()

// Then button should be selected
XCTAssertTrue(button.isSelected) 

// And whatever-else that button should do

以与使用标识符类似的方式，您使其可测试，并且还更好地支持辅助功能用户，例如配音！

编辑：写在我的 iPad 上，所以请当作伪?‍♂️

【讨论】：