Let's Get Started Integration Testing With Cypress

Slide 1

Slide 1 text

Let's Get Started Integration Testing With Cypress Let's Get Started Integration Testing With Cypress Quipper Engineering Knowledge Sharing Session @ohbarye

Slide 2

Slide 2 text

Let's Get Started Integration Testing With Cypress 話すこと ➔ ReactNativeからPWAに移ったことでテストツールの選択肢が変わった。 Cypressというツールを検討しているのでその話 ➔ 今回の聴衆イメージ ◆ フロントエンドのE2E、Integrationテストに興味があるがやったことがないので雰囲気を知りたい ◆ QA EngineerやProduct Managerとして外部仕様からテスト自動化に取り組みたい 2

Slide 3

Slide 3 text

Let's Get Started Integration Testing With Cypress Agenda | 01 02 03 What’s Cypress? Demo Impression 3

Slide 4

Slide 4 text

Let's Get Started Integration Testing With Cypress What’s Cypress? 01 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Let's Get Started Integration Testing With Cypress ➔ For E2E test, Integration test, Unit test ◆ ネットワークを介したリクエストはバイパスすることもできるし、スタブすることもできる ➔ JavaScriptやTypeScriptでテストケースを書く ➔ 基本的にはCypressとは別プロセスで立ち上がっているアプリケーションに対するテストを行う What’s Cypress? 6

Slide 7

Slide 7 text

Let's Get Started Integration Testing With Cypress Demo 02 7

Slide 8

Slide 8 text

Let's Get Started Integration Testing With Cypress https://github.com/ohbarye/cypress-demo

Slide 9

Slide 9 text

Let's Get Started Integration Testing With Cypress CircleCI with orb 9 ※実際は自分のアプリケーションを立ち上げるコマンドなどが必要

Slide 10

Slide 10 text

Let's Get Started Integration Testing With Cypress CircleCI 10

Slide 11

Slide 11 text

Let's Get Started Integration Testing With Cypress Impression 03 11

Slide 12

Slide 12 text

Let's Get Started Integration Testing With Cypress ➔ 公式ドキュメントが充実している（API理解もサンプルもほぼ足りる） ➔ 外部仕様しか知らない人でも振る舞いに関してそれなりのテストケースが書ける（E2E, integration test全般に言えること） ➔ mocha, chai, sinonあたりのフロントエンドテストツールに馴染みがある人ならほぼ迷わず書ける ➔ should, expectが入り混じりクセがある面もテストの書き味 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Let's Get Started Integration Testing With Cypress 15 なぜE2E testや Integration testをやっていくのか

Slide 16

Slide 16 text

Let's Get Started Integration Testing With Cypress https://kentcdodds.com/blog/write-tests 16

Slide 17

Slide 17 text

Let's Get Started Integration Testing With Cypress This world needs more integration tests

Slide 18

Slide 18 text

Let's Get Started Integration Testing With Cypress Enjoy your test life! 18