Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GTXiLibで小さく始めるAccessibility Testing

satoshin21
December 16, 2019

GTXiLibで小さく始めるAccessibility Testing

年末だよ Android/iOS Test Night - 2019
https://testnight.connpass.com/event/155429/

GTXiLibを使ったUI Component Testingをご紹介します。

satoshin21

December 16, 2019
Tweet

More Decks by satoshin21

Other Decks in Programming

Transcript

  1. 年末だよ Android/iOS Test Night - 2019 at. DeNA Co, Ltd.
    @satoshin21
    GTXiLibで⼩さく始める
    Accessibility Testing

    View full-size slide

  2. whoami
    - @satoshin21
    - eureka/Pairs -> DeNA/MOV(2019/11)
    - Bitrise User Group Meetup
    ‧明後⽇にBitrise User Group Meetup #3を⾏います!!
    ‧みんな来てね!!!

    View full-size slide

  3. Accessibility

    View full-size slide

  4. What is Accessibility?
    - ⾼齢者や障害者なども含めたあらゆる⼈が、どのような環
    境においても柔軟に利⽤できるかどうかの指標
    - iOSでもアプリにてVoice OverやVoice Controlなどをサ
    ポートする事ができる
    - 実際の対応⽅法については今回は割愛
    https://support.apple.com/en-us/HT210417

    View full-size slide

  5. Accessibility対応の優先順位
    - 重要性は認識しつつも、優先順位的には下がりがち
    - デザイナーサイドとも認識合わせて対応が必要な部分も

    View full-size slide

  6. Accessibility Inspector
    - Appleの提供するAccessibility Inspectorでかんたんに
    Accessibility Checkができる
    - デザイナーに⽴ち上げてもらう?
    - リリースの都度実⾏してチェックする?

    View full-size slide

  7. ⾃動化したい

    View full-size slide

  8. google/GTXiLib
    https://opensource.googleblog.com/2018/03/open-sourcing-gtxilib-accessibility.html

    View full-size slide

  9. google/GTXiLib
    - googleの提供するオープンソースのアクセシビリティテス
    ト⾃動化ツール
    - 既存のXCTestでUIテストが作られている場合、簡単に統合
    できる
    ‧XCUITestは⾮対応
    ‧google/EarlGreyはXCTestベースのテストフレームワーク
    なので利⽤可能

    View full-size slide

  10. google/GTXiLib
    import GTXiLib
    class ExampleTests: XCTestCase {
    override func setUp() {
    GTXiLib.install(
    on: GTXTestSuite(allTestsIn: ExampleTests.self),
    checks: GTXChecksCollection.allGTXChecks()
    , elementBlacklists: []
    )
    }
    // UIApplication.shared.windowϕʔεͷUITest
    func testExampleSceneWithUIApplication() {
    // ...
    }
    }

    View full-size slide

  11. google/GTXiLib
    - `func setup()`でGTXiLib.install()を実⾏するだけで各
    testで実⾏されているUITestを解析、Accessibility Test
    を実⾏する
    - GTXChecksCollectionにいくつかAccessibility Testが⽤意
    されている
    - ⾃前でTest Caseを書くことも可能

    View full-size slide

  12. ⾃前のGTXChecking
    let check = GTXiLib.check(withName: "Customized Accessibility Test")
    { (element, error: UnsafeMutablePointer?) -> Bool in
    guard let label = element as? UILabel else {
    return false
    }
    if label.frame.height <= 44 {
    error?.pointee = NSError(domain: kGTXErrorDomain, code:
    999, userInfo: [
    NSLocalizedDescriptionKey: "Suggest label's height
    is to be at least over 44.0.",
    kGTXErrorFailingElementKey: element
    ])
    return false
    } else {
    return true
    }
    }

    View full-size slide

  13. google/GTXiLib
    - フックの⽅法はGTXLibCore.mを参照
    ‧testCaseの開始‧終了をフック
    ‧UIApplication.sharedからkeyWindowを取得、ぶら下がっ
    ているViewに対してGTXCheckingを実⾏
    - あれ?テスト通っちゃう?って時はソースコード⾒た⽅が
    早い

    View full-size slide

  14. え?UITest書いてない?

    View full-size slide

  15. それ@t_(ry

    View full-size slide

  16. ⼩さい所から
    UI Componentだけでも
    Accessibility Test

    View full-size slide

  17. GTXiLib - GTXToolKit
    - 実際にAccessibility Testを実⾏するクラス
    - 他のテストフレームワークに組み込む際に利⽤
    - 直接element(UIViewなど)を渡してチェックができる

    View full-size slide

  18. 独⾃定義したUI Component
    public class CustomizedButton: UIButton {
    public override init(frame: CGRect) {
    super.init(frame: frame)
    self.isAccessibilityElement = true
    }
    // ..
    }

    View full-size slide

  19. 独⾃定義したUI Component
    public class CustomizedButton: UIButton {
    public override init(frame: CGRect) {
    super.init(frame: frame)
    self.isAccessibilityElement = true
    }
    // ..
    }

    View full-size slide

  20. 独⾃定義したUI Componentをテスト
    class CustomizedButtonTests: XCTestCase {
    func testA11y() {
    let button = CustomizedButton()
    button.sizeToFit()
    button.accessibilityFrame = button.frame
    let toolKit = GTXToolKit()
    GTXChecksCollection.allGTXChecks()?.forEach({
    toolKit.registerCheck($0)
    })
    var error: NSError? = nil
    let result = toolKit.checkElement(button, error:
    &error)
    // ..handling result or error
    }
    }

    View full-size slide

  21. 独⾃定義したUI Componentをテスト
    class CustomizedButtonTests: XCTestCase {
    func testA11y() {
    let button = CustomizedButton()
    button.sizeToFit()
    button.accessibilityFrame = button.frame
    let toolKit = GTXToolKit()
    GTXChecksCollection.allGTXChecks()?.forEach({
    toolKit.registerCheck($0)
    })
    var error: NSError? = nil
    let result = toolKit.checkElement(button, error:
    &error)
    // ..handling result or error
    }
    }

    View full-size slide

  22. 独⾃定義したUI Componentをテスト
    class CustomizedButtonTests: XCTestCase {
    func testA11y() {
    let button = CustomizedButton()
    button.sizeToFit()
    button.accessibilityFrame = button.frame
    let toolKit = GTXToolKit()
    GTXChecksCollection.allGTXChecks()?.forEach({
    toolKit.registerCheck($0)
    })
    var error: NSError? = nil
    let result = toolKit.checkElement(button, error:
    &error)
    // ..handling result or error
    }
    }

    View full-size slide

  23. 独⾃定義したUI Componentをテスト
    class CustomizedButtonTests: XCTestCase {
    func testA11y() {
    let button = CustomizedButton()
    button.sizeToFit()
    button.accessibilityFrame = button.frame
    let toolKit = GTXToolKit()
    GTXChecksCollection.allGTXChecks()?.forEach({
    toolKit.registerCheck($0)
    })
    var error: NSError? = nil
    let result = toolKit.checkElement(button, error:
    &error)
    // ..handling result or error
    }
    }

    View full-size slide

  24. UI Component Accessibility Test
    - `GTXiLib.check()`のように実際のプロダクトベースのテス
    トではないので完璧ではない
    ‧背景⾊が透明なUI Componentsで背景⾊によってコントラ
    ストが変わったり 等
    - ボタンサイズが適切か?UIButtonのtitleと背景⾊のコント
    ラストは適切か?など、簡易的なチェックには有効
    - SwiftUIには未対応だが、GTXCheckingを作れば対応可能

    View full-size slide

  25. Accessibility改善を
    少しずつ進めていきましょう

    View full-size slide