E2E テスト入門

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

#Zli_DMM_LT

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