Let's Get Started Integration Testing With Cypress

Transcript

1. Let's Get Started Integration Testing With Cypress Let's Get Started Integration Testing With Cypress Quipper Engineering Knowledge Sharing Session @ohbarye
2. Let's Get Started Integration Testing With Cypress 話すこと ➔ ReactNativeからPWAに移ったことでテストツールの選択肢が変わった。 Cypressというツールを検討しているのでその話 ➔ 今回の聴衆イメージ ◆ フロントエンドのE2E、Integrationテストに興味があるがやったことがな いので雰囲気を知りたい ◆ QA EngineerやProduct Managerとして外部仕様からテスト自動化に 取り組みたい 2
3. Let's Get Started Integration Testing With Cypress Agenda | 01 02 03 What’s Cypress? Demo Impression 3
4. Let's Get Started Integration Testing With Cypress What’s Cypress? 01 4
5. Let's Get Started Integration Testing With Cypress What’s Cypress? ➔ Cypress.io社が開発するオープンソースの自動テストツール（MIT License） ◆ 実行結果の集積・分析を行うDashboard Serviceは有料 ➔ Chromium, Chrome, Electron上でテストが実行可能 ◆ クロスブラウザ対応はあまり期待しないほうが良さそう https://github.com/cypress-io/cypress/issues/310 5
6. Let's Get Started Integration Testing With Cypress ➔ For E2E test, Integration test, Unit test ◆ ネットワークを介したリクエストはバイパスすることもできるし、スタブす ることもできる ➔ JavaScriptやTypeScriptでテストケースを書く ➔ 基本的にはCypressとは別プロセスで立ち上がっているアプリケーションに 対するテストを行う What’s Cypress? 6
7. Let's Get Started Integration Testing With Cypress Demo 02 7
8. Let's Get Started Integration Testing With Cypress https://github.com/ohbarye/cypress-demo
9. Let's Get Started Integration Testing With Cypress CircleCI with orb 9 ※実際は自分のアプリケーションを立ち上げるコマンドなどが必要
10. Let's Get Started Integration Testing With Cypress CircleCI 10
11. Let's Get Started Integration Testing With Cypress Impression 03 11
12. Let's Get Started Integration Testing With Cypress ➔ 公式ドキュメントが充実している（API理解もサンプルもほぼ足りる） ➔ 外部仕様しか知らない人でも振る舞いに関してそれなりのテストケースが書 ける（E2E, integration test全般に言えること） ➔ mocha, chai, sinonあたりのフロントエンドテストツールに馴染みがある人な らほぼ迷わず書ける ➔ should, expectが入り混じりクセがある面も テストの書き味 12
13. Let's Get Started Integration Testing With Cypress ➔ 公式のガイドに従えばさほど詰まることはない ◆ https://docs.cypress.io/guides/guides/continuous-integration.html ◆ 実行環境入りのDocker imageがあるがNode versionがかなり限定さ れている ➔ CI上にscreenshot, videoを保存できるようになるとワクワクする ◆ Visual regression testは非公式のpluginでできるが… ◆ https://github.com/meinaart/cypress-plugin-snapshots CI Integration 13
14. Let's Get Started Integration Testing With Cypress ➔ 今回レベルのテストはどのツールでもできるのでもう少し深堀りたい ➔ Selenium, WebdriverIO に比べて... 直接ブラウザを操作する、テストに 特化している ➔ puppeteer に比べて... npm installしてすぐテストを書ける (test runner, assertion, 全てall in one) ➔ testcafe に比べて... documentが充実、コミュニティが活発、会社が新しめ （DevExpress: found 1998, Cypress.io founded 2015） 他ツールとの比較 14
15. Let's Get Started Integration Testing With Cypress 15 なぜE2E testや Integration testを やっていくのか
16. Let's Get Started Integration Testing With Cypress https://kentcdodds.com/blog/write-tests 16
17. Let's Get Started Integration Testing With Cypress This world needs more integration tests
18. Let's Get Started Integration Testing With Cypress Enjoy your test life! 18