E2E テスト入門

E2E テスト入門

Demo動画は後日追加します!

#Zli_DMM_LT

1b863be3048c82d20ea84abcce33dc36?s=128

Tajima Sachiko

July 18, 2020
Tweet

Transcript

  1. e2eテスト入門 2020/7/17 Zli x DMM 合同LT

  2. 1.自己紹介 ﹡ Sachiko Tajima ◦ twitter @schktjm ◦ github @schktjm

    ﹡ 会津大学 B4 DB研(AOJ) ﹡ フロントエンド / デザイン ﹡ AtCoder 緑 2
  3. 1. Demo Launching Browser

  4. E2E (End-to-End)テストです! あれは何? 4

  5. ﹡ End-to-End Tesing ﹡ e2eテストとはアプリケーションフローが期待 通りに動くかどうかを確認するためにソフト ウェア全体を最初から最後までテストする手 法。 5 E2Eテストとは

  6. 1. ログイン画面を表示 2. メールアドレスを入力 3. パスワードを入力 4. ログインボタンをクリック 5. トップページに遷移

    6 たとえばログインページだと を自動でテストします
  7. ﹡ テスト対象の、コンポーネントの統合やデータ の整合性を実際のユーザーシナリオ(ユーザー が新規登録をするなど)をシミュレーションし たうえで確認ができます。 7 なぜE2Eテストをするの?

  8. ﹡ テスト対象の、コンポーネントの統合やデータ の整合性を実際のユーザーシナリオ(ユーザー が新規登録をするなど)をシミュレーションし たうえで確認ができます。 → 手動でテストするのがめんどくさい! → 複雑になればなるほど期待した状態とは?? 8 なぜE2Eテストをするの?

  9. 2. E2Eテストツール iikanjinotext

  10. Webフロントエンドにおける種類 ﹡ WebDriver 系 ◦ Selenium (Geb, Selenium WebDriver with

    Concordion), WebdriverIO, Nightwatch.js, Testium, Protractor ﹡ (ヘッドレス) ブラウザ自動化系 ◦ Puppeteer, jsdom, Nightmare ﹡ (ヘッドレス) ブラウザ自動化 + テスト系 ◦ Cypress.io, TestCafe, Intern ﹡ Chrome 拡張 ◦ Ghost Inspector 10 E2E テスト自動化ツールをざっと調べたまとめ-Qiita ﹡ 調べたところ一番有名 ﹡ フロントエンドの非同期 処理やSPAには不向き
  11. Webフロントエンドにおける種類 ﹡ WebDriver 系 ◦ Selenium (Geb, Selenium WebDriver with

    Concordion), WebdriverIO, Nightwatch.js, Testium, Protractor ﹡ (ヘッドレス) ブラウザ自動化系 ◦ Puppeteer, jsdom, Nightmare ﹡ (ヘッドレス) ブラウザ自動化 + テスト系 ◦ Cypress.io, TestCafe, Intern ﹡ Chrome 拡張 ◦ Ghost Inspector 11 E2E テスト自動化ツールをざっと調べたまとめ-Qiita ﹡ ヘッドレスでChromeや Chromiumを操作できる ﹡ SPAのe2eのテストツー ルとして有名 ﹡ テストをするならテスト ツールを導入する必要が ある
  12. Webフロントエンドにおける種類 ﹡ WebDriver 系 ◦ Selenium (Geb, Selenium WebDriver with

    Concordion), WebdriverIO, Nightwatch.js, Testium, Protractor ﹡ (ヘッドレス) ブラウザ自動化系 ◦ Puppeteer, jsdom, Nightmare ﹡ (ヘッドレス) ブラウザ自動化 + テスト系 ◦ Cypress.io, TestCafe, Intern ﹡ Chrome 拡張 ◦ Ghost Inspector 12 E2E テスト自動化ツールをざっと調べたまとめ-Qiita ﹡ テストツールを導入す る必要がない ﹡ 最近ブームっぽい ﹡ ドキュメントが親切で 良かった
  13. 3. テストしてみる! コード解説

  14. Cypress.ioを使いました 14

  15. ToDos.tsx(JSXの部分だけ) 15

  16.  todos_spec.ts 16 describe(“The todos”, function(){ it("Assertion Text", () => {

    const typeText = "texttexttext" cy.visit("/todos") .get("#text-field") .type(typeText) .should("have.value", typeText) }) ... })
  17. cypress.json 17 { “baseUrl”: “http://localhost:3000” } baseUrl を設定しない場合テスト実行時に localhost+ランダムなポート番号でブラウザを開 き、テスト内部の

    cy.visit() に当たってから指定されたURLに切り替えるため、テスト開 始時にフラッシュやリロードが入る。
  18. CypressのIDEを立ち上げる 18 $ npx cypress open

  19. テストが実行される 19

  20. 所感 20

  21. 驚くべき学習コストの低さ 21 ﹡ Cypress.io は Mocha, Chai, jQueryなどの人気で あり有名なツールや フレームワークで構

    成されていて学習コ ストが低い
  22. ﹡ Canary ﹡ Chrome ﹡ Chromium ﹡ Edge ﹡ Edge

    Beta ﹡ Edge Canary 22 Browsers対応すごい ﹡ Edge Dev ﹡ Electron ﹡ Firefox (Beta support) ﹡ Firefox Developer Edition (Beta support) ﹡ Firefox Nightly (Beta support) https://docs.cypress.io/guides/guides/launching-browsers.html#Browsers
  23. スナップショットを撮ってくれる DOM操作の度にスナップショットをとってくれるため、デ バッグがしやすくなっている。 23

  24. 簡単だった!!!

  25. Thanks! Twitter: schktjm Code: https://github.com/schktjm/e2e-test 25 Credit: https://www.cypress.io/ E2E テスト自動化ツールをざっと調べたまとめ-Qiita

    cypressを触ってみた-Qiita