Save 37% off PRO during our Black Friday Sale! »

Cypressでサクッと始めるE2Eテスト / Start E2E Test easily using Cypress

Cypressでサクッと始めるE2Eテスト / Start E2E Test easily using Cypress

オールインワンE2EテストツールのCypressの紹介です。
experimental(実験的機能)のCypress Studioを使って簡単にブラウザ操作記録とアサーション作成する手順を説明しています。

自動化大好きエンジニアLT会 - vol.4で発表した内容です。
https://rakus.connpass.com/event/217909/

TVISION INSIGHTS株式会社ではエンジニア大募集中です!
https://www.wantedly.com/companies/tvisioninsights
https://www.tvisioninsights.co.jp/

927c73032f5858d8cab8f4b0513c4de8?s=128

Motoi Kataoka

August 12, 2021
Tweet

Transcript

  1. Cypressでサクッと始める E2Eテスト 2021.8.12 自動化大好きエンジニアLT会 - vol.4

  2.   自己紹介  片岡 基 Kataoka Motoi   テクノロジーとサッカーを愛するエンジニア    TVISION INSIGHTS株式会社所属     SIer →

    スポーツデータ会社 → テレビデータ会社      フルサイクルエンジニア(企画-要件定義-設計-実装-テスト-運用)       AWS大好き、浦和レッズ大好き(iOS/Androidアプリ出してます) ティービジョン インサイツ
  3. Cypressとは  ・オールインワンのE2Eテストツール   ・エンドツーエンド = 端から端まで = ブラウザからサーバサイドまで    ・設定したシナリオ通りにブラウザを自動操作してテストできる      ・Chrome、Firefox、Edgeでテスト可能       ・Mac、Windows、Linuxにインストールして使用

           ・OSS、フリー、活発な開発
  4. 特徴  ① 内部的にSeleniumを使用していない  ② エンドツーエンドのテストを本当にうまく行うことに焦点を当てている  ③ あらゆるフロントエンドフレームワークまたはWebサイトで動作する  ④ テストはJavaScriptでのみ記述される  ⑤

    オールインワン  ⑥ 開発者とQAエンジニア向け  ⑦ 非常に高速に動作 https://www.cypress.io/how-it-works/
  5. オールインワン  ああああ https://www.cypress.io/how-it-works/

  6. % yarn add cypress --dev ←インストール yarn add v1.22.10 info No

    lockfile found. [1/4] 🔍 Resolving packages... warning cypress > @cypress/request > har-validator@5.1.5: this library is no longer supported warning cypress > @cypress/request > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. warning cypress > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Saved lockfile. success Saved 149 new dependencies. info Direct dependencies └─ cypress@8.2.0 info All dependencies ├─ @cypress/request@2.88.5 ├─ @cypress/xvfb@1.2.4 ├─ @types/node@14.17.9 ├─ @types/sinonjs__fake-timers@6.0.3 ・・・中略・・・ ├─ verror@1.10.0 ├─ which@2.0.2 └─ wrap-ansi@7.0.0 ✨ Done in 8.55s. % npx cypress open ←起動 インストール & 起動
  7. サンプルのテストファイル integrationディレクトリに サンプルのテストファイル cypressディレクトリが作成さ れる

  8. テスト実行 - GUI テストファイルをクリック ブラウザが起動して 自動テスト

  9. Cypress Studio  ブラウザ上で簡単にテストコード作成できる機能。  v8.2現在、experimental(実験的)扱い。  cypress.jsonで有効化して使用。{ "experimentalStudio": true }  ブラウザ操作とアサーションのテストコードを生成してくれる。  実演。

    STUDIO
  10. シナリオ作成 新規テストファイル作成

  11. シナリオ作成 作成されたファイルをクリック

  12. シナリオ作成 Cypress Studioでテスト作成へ

  13. シナリオ作成 テスト対象URLを入力して 「Go→」

  14. シナリオ作成 右の画面で行った操作が記録され る 保存

  15. シナリオ作成 生成されたテストコード

  16. テスト実行 - CUI npx cypress run 実行の様子が動画として 自動的に保存される(便利!)

  17. 小ネタ:テスト時のシステム時刻を固定化 テストコード内で上記を実行することで固定化できる。 あくまでクライアント側(ブラウザ側)のみ。 サーバサイドはlibfaketime等で対応。 const now = new Date(2021, 7,

    23).getTime() cy.clock(now);
  18. 豊富な機能  ① テスト実行の様子をスクリーンショット・動画で出力  ② クラウド上に結果を保存・共有できるDashboard(有償サービス)  ③ CI対応(GitHub Actions、CircleCI、GitLab CI、etc)  ④

    Gitホスティング対応(GitHub、GitLab、BitBucket)  ⑤ スクリーンショット前後比較テスト  ⑥ コンポーネントテスト(Angular、Vue、React対応。experimental)
  19. 活発な開発 2020.8 2020.11 2021.4 2021.7

  20. Enjoy your E2E Life!!

  21. 参考 https://www.cypress.io/ https://user-first.ikyu.co.jp/entry/2019/04/23/090000 https://future-architect.github.io/articles/20200115/ https://blog.ecbeing.tech/entry/2021/04/08/114500 https://www.testim.io/blog/puppeteer-selenium-playwright-cypress-how-to-choose/

  22. TVISION INSIGHTS ではエンジニアを大募集中です! ティービジョン  インサイツ 自社サービスをフルサイクルに開発したい方、是非! https://www.wantedly.com/companies/tvisioninsights