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

CodeceptJS is god

Transcript

1. CodeceptJS を使って 快適な E2E テストライフを送ろう！ 片野 潤一 伊藤忠テクノソリューションズ株式会社 アジャイル営業推進部 OutSystems Developer Conference 2021
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
3. 書いてるよ！！！ OutSystems プロジェクトで E2E テストを… 書いてないよ！！！ E2E しらんよ！！！ Zoom の ↓ の機能で枠内に✓とかつけてね！
4. 今日の話が響きそうな人 ⚫ E2E テストってなんだよ、な人 ⚫ E2E テストにこれから取り組むぞ！な人 ⚫ E2E テストの実装やメンテに大変な思いをしている人 4
5. CodeceptJS こーどせぷとじぇいえす
6. CodeceptJS https://codecept.io/ Node.js で実装された E2E フレームワーク ヘルパーとして Webdriver や Puppeteer などが選択でき、本体はそれらの Wrapper API を提供 https://codecept.io/basics/
7. E2E テスト いーつーいー/えんどつーえんど
8. E2E テスト “ エンドツーエンドテスト（E2Eテスト）とは、アプリケーションのワークフロー を最初から最後までテストすることを含むソフトウェアテスト方法を指します。こ の方法は基本的に、実際のユーザーシナリオを複製して、システムの統合とデータ の整合性を検証できるようにすることを目的としています。 https://www.browserstack.com/guide/end-to-end-testing
9. E2E テスト “ エンドツーエンドテスト（E2Eテスト）とは、アプリケーションのワークフロー を最初から最後までテストすることを含むソフトウェアテスト方法を指します。こ の方法は基本的に、実際のユーザーシナリオを複製して、システムの統合とデータ の整合性を検証できるようにすることを目的としています。 https://www.browserstack.com/guide/end-to-end-testing ブラウザや実機でぽちぽちするテスト
10. 積み重なった機能群 （インクリメント）を 継続的にデリバリーするために 事実上必須だから なぜ人類は E2E テストをプログラムで実装するのか
11. E2E が快適でなかった時代 あるいは OutSystems での E2E 実装の思い出
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
13. テストページに飛んでボタンを押してテキストを入力する with Puppeteer
14. テストページに飛んで テストページに飛んでボタンを押してテキストを入力する with Puppeteer
15. テストページに飛んで ボタンを押して テストページに飛んでボタンを押してテキストを入力する with Puppeteer
16. テストページに飛んで テキストを入力する ボタンを押して テストページに飛んでボタンを押してテキストを入力する with Puppeteer
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
18. E2E テストの突然死に対するアプローチ ⚫ 死ぬたびにメンテ ⚫ やがて実装者の精神も死ぬ諸刃の剣 ⚫ Page Object Pattern で影響範囲を狭める ⚫ E2E テスト実装の保守性を高める方法論 ⚫ DOM 検索をいい感じにする ⚫ CodeceptJS の Semantic Locator がいい感じに適合 18
19. Semantic Locator せまんてぃっく ろけーたー
20. Semantic Locator
21. Semantic Locator
22. Semantic Locator （速度はちょっぴり犠牲になるけど） Label とか文言でマッチすれば探し当ててくれる
23. Traditional Reactive
24. Traditional Reactive Semantic Locator 結果は等価
25. テストページに飛んでボタンを押してテキストを入力する with CodeceptJS
26. テストページに飛んでボタンを押してテキストを入力する with CodeceptJS テキスト（等）を入力する ボタンを押して テストページに飛んで
27. Semantic Locator でコードの可読性を高くできる（もちろんセレクタ指定も可能） 失敗時のスクショを自動的に保存 アクションごとにスクショを保存して簡易なレポートを作成（Allure と連携もできる） Translator でログがわかりやすい CodeceptJS の良いところ
28. 「画面に対してテストを行う」文脈で E2E テストが書ける CodeceptJS と OutSystems の相性の良いところ Semantic Locator の恩恵 Traditional と Reactive を区別することなくテストコードが書ける プロダクト実装と E2E 実装の密さを軽減できる ServiceStudio での UI 実装の一覧性があまり快適でないことへの対策
29. 書いてみたので Demo します！ ひゃくぶんはいっけんにしかず
31. URL 以外コードは同じ
32. まとめ ⚫ プロダクトのリリースサイクルを早めるためにはテスト自動化が必須 ⁻ ユニットテストは言わずもがな ⁻ E2E テストも例外ではない ⚫ E2E テスト実装はガラス細工のように脆く壊れやすい繊細さを持つ ⁻ 画面実装を変えると大体突然死 ⚫ 突然死の対抗手段の一つが Semantic Locator ⁻ CodeceptJS の実装が OutSystems と良相性 ⁻ 可読性やポータビリティが得られる代わりに速度は犠牲になる ⚫ CodeceptJS で快適な E2E テストライフを手に入れよう！！
33. CodeceptJS 使いたくなった？ なった！！！ いや… Zoom の ↓ の機能で枠内に✓とかつけてね！
34. ご清聴ありがとうございました ご質問があれば お願いします！
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