$30 off During Our Annual Pro Sale. View Details »

Let's Get Started Integration Testing With Cypress

Masato Ohba
September 30, 2019

Let's Get Started Integration Testing With Cypress

Masato Ohba

September 30, 2019
Tweet

More Decks by Masato Ohba

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. Let's Get Started Integration Testing With Cypress
    CircleCI
    10

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide