ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • UITest에서 accessibilityIdentifier 활용하기
    iOS 2023. 12. 18. 19:46

    안녕하세요. 그린입니다 🍏

    이번 포스팅에서는 UITest에서 accessibilityIdentifier를 활용하는 방법에 대해 학습해보겠습니다 🙋🏻

     

    우선 accessibility 접두사가 붙은 모디파이어들이 낯설지는 않은데요!

    이전 포스팅이였던 VoiceOver 적용하기에서 많이 소개가 되었어요 😃

     

    SwiftUI에서 VoiceOver 사용하기

    안녕하세요. 그린입니다 🍏 이번 포스팅에서는 SwiftUI에서 VoiceOver를 적용하고 사용하는 방법에 대해 알아보려합니다 🙋🏻 이번 포스팅에서는 VoiceOver가 무엇이고 SwiftUI에서 어떻게 적용 및 사

    green1229.tistory.com

     

    여기서 각 UI 컴포넌트들에 보이스오버를 적용하는 방법으로 accessibilityLabel이라는 메서드가 사용되었는데요.

    해당 메서드와 오늘 알아볼 accessibilityIdentifier의 차이를 알기 위해서는 accessibilityLabel가 무엇인지 간략하게라도 알아야되니 이전 포스팅을 선행으로 참고해보시는걸 권장하긴 합니다!

     

    그래도~ accessibilityLabel에 대해 간략히 짚고 넘어가볼께요.


    accessibilityLabel이 뭐였더라? 🤔

    보이스오버 관련 모디파이어로 읽혀질 해당 UI 컴포넌트의 설명을 지정하여 보이스오버를 사용할때, 음성으로 해당 UI 컴포넌트를 읽어줍니다.

    즉, 예시로 아래 코드를 보시죠!

     

    import SwiftUI
    
    struct ContentView: View {
      var body: some View {
        Text("보이스 오버 기능")
          .accessibilityLabel("보이스 오버 기능 입니다.")
      }
    }

     

    이렇게 Text에 "보이스 오버 기능입니다" String을 accessibilityLabel로 설정하고 보이스오버를 사용한다면, 해당 "보이스 오버 기능" 텍스트에 위치시키면 정해둔 String으로 음성으로 읽어줍니다.

     

    결국 우리가 이전 포스팅에서 다뤘던 accessibilityLabel와 같은 모디파이어들은 사용자 입장에서의 보이스오버 기능과 관련이 있습니다.

     

    그럼 오늘 학습해볼 accessibilityIdentifier는 어떤것인지 접근성과는 관련이 있는지 등을 알아보겠습니다!


    accessibilityIdentifier?

    공식문서를 살펴보면 요소를 식별하는 문자열입니다.

     

    var accessibilityIdentifier: String? { get set }

     

    이렇게 구성되어 있고 요소를 문자열로 식별해야하니 String 타입이죠.

     

    그리고 또한 이 식별자를 UI 컴포넌트에서 사용하기 위해서는 accessibility(identifier:) 메서드를 이용해줘야 합니다.

    해당 메서드는 지정된 문자열을 사용해 뷰 즉, UI 컴포넌트를 식별하게 만들어줍니다.

     

    func accessibility(identifier: String) -> ModifiedContent<Self, AccessibilityAttachmentModifier>

     

    위와 같은 정의를 가지게 됩니다.

    즉, identifier 인자에 해당 UI 컴포넌트를 식별할 문자열을 담아 설정해줄수가 있습니다.

     

    위 메서드는 사실 iOS 14부터 아래 메서드로 대체되었어요!

    iOS 17.2까지는 사용할 수 있지만, 그 이상은 디프리케이트 되었으니 참고해주세요ㅎㅎ

     

    func accessibilityIdentifier(_ identifier: String) -> ModifiedContent<Self, AccessibilityAttachmentModifier>

     

    그래서 accessibilityIdentifier를 정리해볼께요 😃

     

    accessibilityIdentifier는 UI 테스트를 하는 동안에 특정 UI 컴포넌트를 식별하는데 사용됩니다.

     

    다만 accessibilityLabel은 사용자에게 실제로 작동하고 밀접한 관련이 있지만, accessibilityIdentifier는 사용자에게는 보이지 않고 보이스오버나 다른 접근성 기능에 영향을 주지 않습니다.

     

    딱, 개발자를 위한 기능으로 코드 상에서 해당 UI 컴포넌트를 테스트할 수 있도록 해줍니다.

     

    그렇기에 accessibilityLabel과 혼용하면 안됩니다!! 🙋🏻

     

    accessibilityLabel는 지역화에 따라 지정해둔 값이 실제 음성으로 읽힐때 다르고 변경될 수도 있지만,

    accessibilityIdentifier는 식별자이기에 지역화를 적용할 필요도 없습니다.

    정말 개발단에서를 위한것이니 가급적 변경되지 않도록 해야될것 같아요.

     

    그럼 이 accessibilityIdentifier를 실제로 UITest에서 사용해볼까요?


    UITest에서 accessibilityIdentifier 활용하기 😀

     

    코드로 먼저 보시죠!

     

    import SwiftUI
    
    struct ContentView: View {
      var body: some View {
        Button(
          action: {
            print("Tapped!")
          },
          label: {
            Text("Tap Tap")
          }
        )
        .accessibilityLabel("Tap")
        .accessibilityIdentifier("tapButton")
      }
    }

     

    이런 코드가 있다고 가정해볼께요.

     

    우선 accessibilityLabel로 Tap을 주었기에 보이스오버를 적용하여 해당 버튼을 선택하면 "Tap 버튼"이라고 음성으로 말해줍니다.

    여기서 Tap Button으로 지정하지 않은 이유는 SwiftUI에서 보이스오버가 동작할때 버튼은 Label로 지정한 문자열을 읽고 버튼임을 자동으로 버튼이라고 붙여서 말해주기에 Tap Button으로 하게 되면 Tap Button Button이라고 읽기에 중복입니다.

     

    그래서 이름만 지정해줘도 되는것이죠!

     

    그 후 오늘의 포인트인 accessibilityIdentifier 모디파이어를 이용해 tapButton이라는 식별자를 부여했습니다.

    이제 이 버튼의 식별자는 tapButton이 되는것이죠!

    이건 보이스오버와 관련이 없습니다~

     

    그럼 이제 해당 뷰의 버튼이 동작하는지 UITest를 해볼까요?

     

    우선 UITest를 위해서 UITest 파일과 메서드를 만들어야합니다.

     

    우선 Xcode에서 File > New > Target...을 선택하고 iOS 섹션에서 UI Testing Bundle을 선택하여 만듭니다.

     

     

    요 파일입니다!

     

    그리고 UITest를 수행할 앱 타겟을 선택합니다.

     

    그 후, 이제 원하는 UITest를 위한 메서드를 작성하면 됩니다ㅎㅎ

     

    한번 메서드를 작성해볼께요!

     

    func testTapButton() throws {
      // 앱 인스턴스 생성
      let app = XCUIApplication()
      // 앱 실행
      app.launch()
      
      // accessibilityIdentifier를 지정한 버튼 찾기 및 지정
      let button = app.buttons["tapButton"]
      
      // 버튼 존재 여부 및 활성화 유무 테스트
      XCTAssertTrue(button.exists && button.isEnabled)
      
      // 버튼 탭 테스트 및 결과 테스트
      button.tap()
      ...
    }

     

    이런식으로 앱 인스턴스를 만들고 실행하도록 먼저 코드를 구성해줍니다.

    그리고 accessibilityIdentifier로 지정한 버튼들을 어레이로 담아서 app 인스턴스의 버튼들로 찾고 지정해줍니다.

    그 후, XCTAssertTrue를 이용해 해당 버튼들이 존재하는지와 활성화 되어 있는지 테스트 해주죠.

    만약, 버튼이 탭되었을때 어떠한 상태값이 변화하는등의 UI 테스트를 추가로 하고 싶으면 구성해줄 수 있습니다.

     

    요렇게 작성하고 테스트를 실행시켜볼까요?

     

     

    짜잔~ 테스트가 성공적으로 완료되었습니다 🚀

     

    이렇게 간단히 UITest에서 accessibilityIdentifier를 활용할 수 있습니다 😄


    마무리

    보이스오버와 UITest를 모두 하고 계신다면, accessibilityLabel과 accessibilityIdentifier 사용이 거의 필수적이라 느껴집니다.

    저도 UITest를 거의 하지 않고 있던 1인으로써... 할말은 없지만 ㅎㅎ..

    이런 차이를 알고 도입해봐야겠어요!

     


    레퍼런스

     

    accessibilityIdentifier | Apple Developer Documentation

    A string that identifies the element.

    developer.apple.com

     

    accessibilityIdentifier(_:) | Apple Developer Documentation

    Uses the string you specify to identify the view.

    developer.apple.com

Designed by Tistory.