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

GTXiLibで小さく始めるAccessibility Testing

F05557f473bac91b5bdc6c2e8a95c6f2?s=47 satoshin21
December 16, 2019

GTXiLibで小さく始めるAccessibility Testing

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

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

F05557f473bac91b5bdc6c2e8a95c6f2?s=128

satoshin21

December 16, 2019
Tweet

Transcript

  1. 年末だよ Android/iOS Test Night - 2019 at. DeNA Co, Ltd.

    @satoshin21 GTXiLibで⼩さく始める Accessibility Testing
  2. whoami - @satoshin21 - eureka/Pairs -> DeNA/MOV(2019/11) - Bitrise User

    Group Meetup ‧明後⽇にBitrise User Group Meetup #3を⾏います!! ‧みんな来てね!!!
  3. Accessibility

  4. What is Accessibility? - ⾼齢者や障害者なども含めたあらゆる⼈が、どのような環 境においても柔軟に利⽤できるかどうかの指標 - iOSでもアプリにてVoice OverやVoice Controlなどをサ

    ポートする事ができる - 実際の対応⽅法については今回は割愛 https://support.apple.com/en-us/HT210417
  5. Accessibility対応の優先順位 - 重要性は認識しつつも、優先順位的には下がりがち - デザイナーサイドとも認識合わせて対応が必要な部分も

  6. Accessibility Inspector - Appleの提供するAccessibility Inspectorでかんたんに Accessibility Checkができる - デザイナーに⽴ち上げてもらう? -

    リリースの都度実⾏してチェックする?
  7. ⾃動化したい

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

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

  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() { // ... } }
  11. google/GTXiLib - `func setup()`でGTXiLib.install()を実⾏するだけで各 testで実⾏されているUITestを解析、Accessibility Test を実⾏する - GTXChecksCollectionにいくつかAccessibility Testが⽤意

    されている - ⾃前でTest Caseを書くことも可能
  12. ⾃前のGTXChecking let check = GTXiLib.check(withName: "Customized Accessibility Test") { (element,

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

  14. え?UITest書いてない?

  15. それ@t_(ry

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

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

  18. 独⾃定義したUI Component public class CustomizedButton: UIButton { public override init(frame:

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

    CGRect) { super.init(frame: frame) self.isAccessibilityElement = true } // .. }
  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 } }
  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 } }
  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 } }
  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 } }
  24. UI Component Accessibility Test - `GTXiLib.check()`のように実際のプロダクトベースのテス トではないので完璧ではない ‧背景⾊が透明なUI Componentsで背景⾊によってコントラ ストが変わったり

    等 - ボタンサイズが適切か?UIButtonのtitleと背景⾊のコント ラストは適切か?など、簡易的なチェックには有効 - SwiftUIには未対応だが、GTXCheckingを作れば対応可能
  25. Accessibility改善を 少しずつ進めていきましょう

  26. END