全部乗せフレームワーク CodeceptJS でE2Eテストを楽にしよう

ソフトウェアテスト自動化カンファレンス2020
https://testautomationresearch.connpass.com/event/191996/

Transcript

1. "全部乗せ" フレームワーク CodeceptJS で E2Eテストを楽にしよう Takuya Suemura @ Autify, Inc.
2. 今⽇話すこと フレームワーク選定についての話 CodeceptJSの機能の紹介 （おまけで）OSS貢献についてちょっとだけ 話さないこと 細かいインストール⼿順など 公式サイトが超分かりやすいので省略します https://codecept.io/ その他 スライドは公開します サンプルコードも公開予定です
3. ⾃⼰紹介 末村 拓也 (すえむら たくや) Twitter: @tsueeemura Autify テスト⾃動化スペシャリスト 開発者 兼 サポート 兼 エバンジェリスト CodeceptJS コントリビュータ
4. 書いたもの SoftwareDesign誌 6〜8⽉号『はじめよ う，⾼速E2Eテスト』 Autify Blog - なぜE2Eテストでidを使うべ きではないのか Qiita記事いろいろ
5. Autifyについて WebアプリのE2Eテスト⾃動化の ためのツール AIによるシナリオの⾃動修復 （セルフヒーリング） リアルデバイス & Dockerコンテ ナでの実⾏に対応 コーディング不要で 誰でもすぐ使える https://autify.com
6. "全部乗せ" フレームワーク CodeceptJS で E2Eテストを楽にする https://unsplash.com/photos/YnbJwNXy0YQ
7. E2Eテストは「やりたいこと」だらけ ブラウザやモバイルデバイスを使ってリアルなテストをしたい メールやファイルダウンロードなどアプリ外のテストをしたい APIのテストもしたい
8. 慣れてくるとやりたいことは更に増える SPAでのテスト実⾏を安定させたい マニュアルテスト⽤のテストスクリプトを流⽤したい 様々なデータセットを使って効率よくテストケースを作成したい ⾼速にテストを実⾏したい
9. 今⽇の話が響きそうな⼈ E2Eテストについての経験が無い、または浅い⼈ 適切な技術選定が出来るほどの知識はないが、 将来に渡って⻑く使い続けられそうなものを選びたい⼈ とにかくスタートを切りたい⼈ 幅広いユースケースに対応できる、裾屋が広いツールをおすすめします
10. 「全部乗せ」の提案 様々なツール、ライブラリを ⼀つのフレームワーク上で 統⼀されたAPIで操作できる
11. CodeceptJSについて
12. CodeceptJSについて ウクライナの Michael Bodnarchuk ⽒が作成した NodeJS製のOSS E2Eテストのためのフルスタック なフレームワーク BDD（振る舞い駆動開発）を強 く意識したインターフェース 様々なツール・ライブラリ群を ラップし、切り替えて使うこと ができる https://codecept.io/
13. 実際に書いてみよう テストケース: ログイン https://hotel.testplanisphere.dev/ja/ にアクセスする "ログイン" をクリックする "メールアドレス" に "ichiro@example.com" と⼊⼒する "パスワード" に "password" と⼊⼒する "Enter" キーを押す
14. CodeceptJSで書くと Scenario('ログインする', ({I}) => { // https://hotel.testplanisphere.dev/ja/ にアクセスする I.amOnPage('https://hotel.testplanisphere.dev/ja/') // "ログイン" をクリックする I.click('ログイン') // "メールアドレス" に "ichiro@example.com" と⼊⼒する I.fillField('メールアドレス', 'ichiro@example.com') // "パスワード" に "password" と⼊⼒する I.fillField('パスワード', 'password') // "Enter" キーを押す I.pressKey('Enter') })
15. 他にどんなことが出来るのか いろいろできるけど代表的なものを紹介 データドリブンテスト ログイン処理の省略 メールのテスト 要素の表⽰待ち
16. Email Password Type foo@example.com password Admin bar@example.com P@ssword! Manager baz@example.com 1234 Editor foobar@example.com !jkdsaiDcbhz Reader Go To "/login" Input Email Input Password See Type データドリブンテスト ⼀つのテストシナリオを複数の データで繰り返し実⾏ ログインやユーザー登録などの テストで良く使われる
17. データドリブンテスト let accounts = new DataTable(['メールアドレス', 'パスワード']); // ⾒出しの定義 accounts.add(['ichiro@example.com', 'password']); // 登録 accounts.add(['sakura@example.com', 'pass1234']); // 登録 // Data() に利⽤したいデータを格納する // Use special param `current` to get current data set Data(accounts).Scenario('Test Login', ({ I, current }) => { I.amOnPage('https://hotel.testplanisphere.dev/ja/') I.click('ログイン') I.fillField('メールアドレス', current['メールアドレス']); // I.fillField('パスワード', current['パスワード']); I.pressKey('Enter') });
19. データドリブンテスト応⽤: 操作を切り替える
20. ⼀般会員はプレミアムプランがない
21. プレミアム会員はプレミアムプランがある
22. データドリブンテスト応⽤: 操作を切り替える 前提: ⼀般ユーザーとプレミアムユーザーで実⾏する https://hotel.testplanisphere.dev/ja/ にアクセスする "ログイン" をクリックする "メールアドレス" に "ichiro@example.com" と⼊⼒する "パスワード" に "password" と⼊⼒する "Enter" キーを押す "宿泊予約" をクリックする プランの表⽰確認をする プレミアム会員には "プレミアムプラン" が表⽰されている ⼀般会員には "プレミアムプラン" が表⽰されていない 単純なデータの変更だけでなく、アサーションタイプの切り替えが必要になる
23. データドリブンテスト応⽤: 操作を切り替える const accounts = [ { 'メールアドレス': 'ichiro@example.com', 'パスワード': 'password', 'ログイン後の処理': (I) => { I.see('プレミアムプラン') } }, { 'メールアドレス': 'sakura@example.com', 'パスワード': 'pass1234', 'ログイン後の処理': (I) => { I.dontSee('プレミアムプラン') } }, ]
24. データドリブンテスト応⽤: 操作を切り替える Data(accounts).Scenario('Test Login', ({ I, current }) => { I.amOnPage('https://hotel.testplanisphere.dev/ja/') I.click('ログイン') I.fillField('メールアドレス', current['メールアドレス']); I.fillField('パスワード', current['パスワード']); I.pressKey('Enter') I.click('宿泊予約') current['ログイン後の処理'](I) // データテーブル内で定義した処理 });
25. 他にどんなことが出来るのか いろいろできるけど代表的なものを紹介 データドリブンテスト ログイン処理の省略 メールのテスト 要素の表⽰待ち
26. ログイン処理の省略 基本的にE2Eテストでは毎回ブラウザのCookieやキャッシュなどをクリアした状態 でテストを始めている 前回実⾏したテストから影響を受けることを防ぐためなのでこれ⾃体は良い こと しかし、毎回ログインの処理が⾛るとテスト実⾏の時間がかかりすぎる 必要に応じてログイン処理をスキップできる autoLogin プラグインがある ログイン直後のセッション情報（Cookieなど）を⾃動で保存、復元できる 復元したセッション情報でログイン出来ていない場合は⾃動で再度ログインを試 みる
27. テストコード Scenario('Auto Login', ({ I, login }) => { login('ichiro') I.click('宿泊予約') I.see('プレミアムプラン') }) Scenario('Auto Login2', ({ I, login }) => { login('ichiro') I.click("宿泊予約"); I.see("プレミアムプラン"); })
28. autoLoginの設定（前半） login: 実際にログインする際に使う⼿順 check: ログインされているかどうかの判定の⼿順 // codecept.conf.js autoLogin: { enabled: true, users: { ichiro: { login: (I) => { I.amOnPage("https://hotel.testplanisphere.dev/ja/login.html"); I.fillField("メールアドレス", "ichiro@example.com"); I.fillField("パスワード", "password"); I.pressKey('Enter'); }, check: (I) => { I.amOnPage("https://hotel.testplanisphere.dev/ja/login.html"); I.see("ログアウト"); },
29. autoLoginの設定（後半） fetch: ログインが完了した後、どのようにセッション情報を取得するかの⼿順 restore: セッションを復元する⼿順 fetch: async (I) => { return await I.grabCookie(); }, restore: (I, cookie) => { I.amOnPage("https://hotel.testplanisphere.dev/ja/index.html"); I.setCookie(cookie); }, }, }, },
31. 他にどんなことが出来るのか いろいろできるけど代表的なものを紹介 データドリブンテスト ログイン処理の省略 メールのテスト 要素の表⽰待ち
32. メールのテストもできる MailSlurp(https://www.mailslurp.com/)と連携してメールのテストが出来る MailSlurpはメールテストのためのSaaS テスト⽤のメールアドレスを作成できる WebのUIやAPIを使って届いたメールを確認できる
33. 事前準備 MailSlurpのアカウントを作る APIトークンを設定する // codecept.conf.js helpers: { MailSlurp: { require: '@codeceptjs/mailslurp-helper', apiKey: '<apiKeyFromMailSlurp>' } }
34. 例）ユーザー登録時のメールアドレス確認をする Scenario('create new account', async ({ I }) => { // 新しいメールアドレスを MailSlurpに登録する const mailbox = await I.haveNewMailbox(); // Webブラウザ側でユーザー登録処理をする I.fillField("メールアドレス", mailbox.emailAddress); I.click("送信"); // 条件に合うメールが届くまで待つ const email = await I.waitForEmailMatching({ subject: "メールアドレスの確認" }); // メール本⽂からURLを抽出する const url = email.body.match(/http(s):\/\/(.*?)\s/)[0]; // ブラウザでURLを開く I.amOnPage(url); })
35. 他にどんなことが出来るのか いろいろできるけど代表的なものを紹介 データドリブンテスト ログイン処理の省略 メールのテスト 要素の表⽰待ち
36. 要素の表⽰を勝⼿に待ってくれる デフォルトで retryFailedStep がONになっている retryFailedStep: { enabled: true, }, 操作対象の要素が存在しなかった場合などに⾃動的にリトライしてくれる ステップが対象 シナリオ単位のリトライは別に存在する
37. 他のフレームワークとの違い 厳密には 要素の表⽰ ではなく 操作の成功 を条件にリトライをするため 次のようなパターンにも対応できる 検証対象の⽂字列が動的に変更される 「処理中です……」から「処理が完了しました」に変わるようなイメージ 操作対象の要素がクリックできない 要素の上に別の要素が覆いかぶさっている 要素が⾮表⽰になっている button要素などに disabled 属性が付いている
38. その他の細かい機能たち 並列実⾏ ファイルシステムのテスト APIのテスト いい感じのテスト結果表⽰ TypeScriptサポート Page Objectのサポート 柔軟で読みやすいロケータ 詳しく聞きたい⼈はAsk the speakerで︕
39. ⾜りない機能があったら︖
40. こんなことがありました テストデータ作成のためにステージングサーバ内のコマンドを実⾏したかった // こんなのや $ artisan createTestUser 100 // こんなの $ bundle exec rake createTestUser 100 メールのテストに使っていた mailhog に対応するヘルパーがなかった
41. 作りました
42. Helperの開発は超簡単 コマンド⼀発でboilerplateが出来る $ npx codeceptjs gh const Helper = require('@codeceptjs/helper'); class MyHelper extends Helper { doAwesomeThings() { console.log('Hello from MyHelpr'); } }
43. Helperを作るとCommunity Helperとして載せてもらえる
44. まとめ E2Eテストはやりたいことだらけ フルスタックなフレームワークを使うと後からやりたいことが変わっても対応し やすい CodeceptJSはとても良い選択肢 無いものは⾃分で作ろう（思ったより簡単だよ︕）
45. Enjoy Testing! ご清聴ありがとうございました