[OutSystems] CodeceptJS で快適な E2E ライフを送ろう！

CodeceptJS is god

Transcript

1. CodeceptJS を使って
   快適な E2E テストライフを送ろう！
   片野 潤一
   伊藤忠テクノソリューションズ株式会社
   アジャイル営業推進部
   OutSystems Developer Conference 2021
   

   View Slide

2. Java
   Struts/Spring/MyBATIS
   2005 2014
   OutSystems
   Developer@3人（6か月）
   Developer && TL@約10人（24か月）
   OutSystems 推進
   2019 2020
   Scrum on AWS
   Role：Developer
   TypeScript
   Serverless
   Dynamo, Lambda, S3, SQS, Kinesis,
   Athena
   Angular
   認定スクラムマスター（CSM）
   AWS Certified DevOps Engineer - Professional
   OutSystems Expert Traditional Web Developer
   OutSystems Architecture Specialist
   好き：リアル脱出ゲーム、低温調理、スパイス、モブプロ、DQW、ゼルダ
   20%
   OutSystems
   OutSystems 推進
   Expert Service
   BootCamp 講師
   PoC 提案＋実施
   now!!
   2
   片野 潤一（かたじゅん） Twitter：@kata_junn
   

   View Slide

3. 書いてるよ！！！
   OutSystems プロジェクトで E2E テストを…
   書いてないよ！！！ E2E しらんよ！！！
   Zoom の ↓ の機能で枠内に✓とかつけてね！
   

   View Slide

4. 今日の話が響きそうな人
   ⚫ E2E テストってなんだよ、な人
   ⚫ E2E テストにこれから取り組むぞ！な人
   ⚫ E2E テストの実装やメンテに大変な思いをしている人
   4
   

   View Slide

5. CodeceptJS
   こーどせぷとじぇいえす
   

   View Slide

6. CodeceptJS https://codecept.io/
   Node.js で実装された E2E フレームワーク
   ヘルパーとして Webdriver や Puppeteer などが選択でき、本体はそれらの Wrapper API を提供
   https://codecept.io/basics/
   

   View Slide

7. E2E テスト
   いーつーいー/えんどつーえんど
   

   View Slide

8. E2E テスト
   “
   エンドツーエンドテスト（E2Eテスト）とは、アプリケーションのワークフロー
   を最初から最後までテストすることを含むソフトウェアテスト方法を指します。こ
   の方法は基本的に、実際のユーザーシナリオを複製して、システムの統合とデータ
   の整合性を検証できるようにすることを目的としています。
   https://www.browserstack.com/guide/end-to-end-testing
   

   View Slide

9. E2E テスト
   “
   エンドツーエンドテスト（E2Eテスト）とは、アプリケーションのワークフロー
   を最初から最後までテストすることを含むソフトウェアテスト方法を指します。こ
   の方法は基本的に、実際のユーザーシナリオを複製して、システムの統合とデータ
   の整合性を検証できるようにすることを目的としています。
   https://www.browserstack.com/guide/end-to-end-testing
   ブラウザや実機でぽちぽちするテスト
   

   View Slide

10. 積み重なった機能群
    （インクリメント）を
    継続的にデリバリーするために
    事実上必須だから
    なぜ人類は E2E テストをプログラムで実装するのか
    

    View Slide

11. E2E が快適でなかった時代
    あるいは
    OutSystems での E2E 実装の思い出
    

    View Slide

12. OutSystems での E2E 実装の思い出
    ⚫ [Traditional] ID が自動生成されるので後方一致検索する
    ⚫ Input_Hoge, Select_Hoge を “Hoge” で検索すると混ざるので注意
    ⚫ XPath やら CSS セレクタで特定する
    ⚫ HTML に独自属性（data-*）を付けて頑張って一意にする
    12
    参考：
    https://success.outsystems.com/Documentation/How-to_Guides/DevOps/How_to_do_UI_testing_with_Selenium
    

    View Slide

13. テストページに飛んでボタンを押してテキストを入力する
    with Puppeteer
    

    View Slide

14. テストページに飛んで
    テストページに飛んでボタンを押してテキストを入力する
    with Puppeteer
    

    View Slide

15. テストページに飛んで
    ボタンを押して
    テストページに飛んでボタンを押してテキストを入力する
    with Puppeteer
    

    View Slide

16. テストページに飛んで
    テキストを入力する
    ボタンを押して
    テストページに飛んでボタンを押してテキストを入力する
    with Puppeteer
    

    View Slide

17. OutSystems での E2E 実装の思い出
    ⚫ [Traditional] ID が自動生成されるので後方一致検索する
    ⚫ Input_Hoge, Select_Hoge を “Hoge” で検索すると混ざるので注意
    ⚫ XPath やら CSS セレクタで特定する
    ⚫ HTML に独自属性（data-*）を付けて頑張って一意にする
    ⚫ 上記の事情から、画面実装を変更すると大体のテストは死ぬ
    ※ OutSystems に限らない話であり、OutSystems でもこういった問題は避けられないよ、という意味
    17
    参考：
    https://success.outsystems.com/Documentation/How-to_Guides/DevOps/How_to_do_UI_testing_with_Selenium
    

    View Slide

18. E2E テストの突然死に対するアプローチ
    ⚫ 死ぬたびにメンテ
    ⚫ やがて実装者の精神も死ぬ諸刃の剣
    ⚫ Page Object Pattern で影響範囲を狭める
    ⚫ E2E テスト実装の保守性を高める方法論
    ⚫ DOM 検索をいい感じにする
    ⚫ CodeceptJS の Semantic Locator がいい感じに適合
    18
    

    View Slide

19. Semantic Locator
    せまんてぃっく ろけーたー
    

    View Slide

20. Semantic Locator
    

    View Slide

21. Semantic Locator
    

    View Slide

22. Semantic Locator
    （速度はちょっぴり犠牲になるけど）
    Label とか文言でマッチすれば探し当ててくれる
    

    View Slide

23. Traditional Reactive
    

    View Slide

24. Traditional Reactive
    Semantic Locator 結果は等価
    

    View Slide

25. テストページに飛んでボタンを押してテキストを入力する
    with CodeceptJS
    

    View Slide

26. テストページに飛んでボタンを押してテキストを入力する
    with CodeceptJS
    テキスト（等）を入力する
    ボタンを押して
    テストページに飛んで
    

    View Slide

27. Semantic Locator でコードの可読性を高くできる（もちろんセレクタ指定も可能）
    失敗時のスクショを自動的に保存
    アクションごとにスクショを保存して簡易なレポートを作成（Allure と連携もできる）
    Translator でログがわかりやすい
    CodeceptJS の良いところ
    

    View Slide

28. 「画面に対してテストを行う」文脈で E2E テストが書ける
    CodeceptJS と OutSystems の相性の良いところ
    Semantic Locator の恩恵
    Traditional と Reactive を区別することなくテストコードが書ける
    プロダクト実装と E2E 実装の密さを軽減できる
    ServiceStudio での UI 実装の一覧性があまり快適でないことへの対策
    

    View Slide

29. 書いてみたので Demo します！
    ひゃくぶんはいっけんにしかず
    

    View Slide

30. View Slide

31. URL 以外コードは同じ
    

    View Slide

32. まとめ
    ⚫ プロダクトのリリースサイクルを早めるためにはテスト自動化が必須
    ⁻ ユニットテストは言わずもがな
    ⁻ E2E テストも例外ではない
    ⚫ E2E テスト実装はガラス細工のように脆く壊れやすい繊細さを持つ
    ⁻ 画面実装を変えると大体突然死
    ⚫ 突然死の対抗手段の一つが Semantic Locator
    ⁻ CodeceptJS の実装が OutSystems と良相性
    ⁻ 可読性やポータビリティが得られる代わりに速度は犠牲になる
    ⚫ CodeceptJS で快適な E2E テストライフを手に入れよう！！
    

    View Slide

33. CodeceptJS 使いたくなった？
    なった！！！ いや…
    Zoom の ↓ の機能で枠内に✓とかつけてね！
    

    View Slide

34. ご清聴ありがとうございました
    ご質問があれば
    お願いします！
    

    View Slide

35. 参考になる CodeceptJS 関連の記事たち
    CodeceptJSで、非エンジニアでも読みやすいテストコードを書く
    https://qiita.com/tsuemura/items/70b156baecfbcffb03fb
    E2Eテストの面倒くさいことはCodeceptJSにお願いしよう
    https://qiita.com/Kesin11/items/11da1b4cf9d58e4dd9af
    エンジニア視点で見たCodeceptJSのよさ
    https://qiita.com/tsuemura/items/fc0c74884cb3c6760a75
    我が名は神龍……どんなテストもひとつだけ自動化してやろう
    https://qiita.com/tsuemura/items/56ba9942565963858d8f
    CodeceptJSのfuzzy locatorは若干遅いことがある
    https://qiita.com/jyunji_watanabe/items/c4c9d31397c7e0f4372d
    

    View Slide