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

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

tsuemura
December 05, 2020

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

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

tsuemura

December 05, 2020
Tweet

More Decks by tsuemura

Other Decks in Technology

Transcript

  1. CodeceptJSで書くと Scenario('ログインする', ({I}) => { // https://hotel.testplanisphere.dev/ja/ にアクセスする I.amOnPage('https://hotel.testplanisphere.dev/ja/') //

    "ログイン" をクリックする I.click('ログイン') // "メールアドレス" に "[email protected]" と⼊⼒する I.fillField('メールアドレス', '[email protected]') // "パスワード" に "password" と⼊⼒する I.fillField('パスワード', 'password') // "Enter" キーを押す I.pressKey('Enter') })
  2. Email Password Type [email protected] password Admin [email protected] P@ssword! Manager [email protected]

    1234 Editor [email protected] !jkdsaiDcbhz Reader Go To "/login" Input Email Input Password See Type データドリブンテスト ⼀つのテストシナリオを複数の データで繰り返し実⾏ ログインやユーザー登録などの テストで良く使われる
  3. データドリブンテスト let accounts = new DataTable(['メールアドレス', 'パスワード']); // ⾒出しの定義 accounts.add(['[email protected]',

    'password']); // 登録 accounts.add(['[email protected]', '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') });
  4. データドリブンテスト応⽤: 操作を切り替える 前提: ⼀般ユーザーとプレミアムユーザーで実⾏する https://hotel.testplanisphere.dev/ja/ にアクセスする "ログイン" をクリックする "メールアドレス" に

    "[email protected]" と⼊⼒する "パスワード" に "password" と⼊⼒する "Enter" キーを押す "宿泊予約" をクリックする プランの表⽰確認をする プレミアム会員には "プレミアムプラン" が表⽰されている ⼀般会員には "プレミアムプラン" が表⽰されていない 単純なデータの変更だけでなく、アサーションタイプの切り替えが必要になる
  5. データドリブンテスト応⽤: 操作を切り替える const accounts = [ { 'メールアドレス': '[email protected]', 'パスワード':

    'password', 'ログイン後の処理': (I) => { I.see('プレミアムプラン') } }, { 'メールアドレス': '[email protected]', 'パスワード': 'pass1234', 'ログイン後の処理': (I) => { I.dontSee('プレミアムプラン') } }, ]
  6. データドリブンテスト応⽤: 操作を切り替える 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) // データテーブル内で定義した処理 });
  7. テストコード Scenario('Auto Login', ({ I, login }) => { login('ichiro')

    I.click('宿泊予約') I.see('プレミアムプラン') }) Scenario('Auto Login2', ({ I, login }) => { login('ichiro') I.click("宿泊予約"); I.see("プレミアムプラン"); })
  8. autoLoginの設定(前半) login: 実際にログインする際に使う⼿順 check: ログインされているかどうかの判定の⼿順 // codecept.conf.js autoLogin: { enabled:

    true, users: { ichiro: { login: (I) => { I.amOnPage("https://hotel.testplanisphere.dev/ja/login.html"); I.fillField("メールアドレス", "[email protected]"); I.fillField("パスワード", "password"); I.pressKey('Enter'); }, check: (I) => { I.amOnPage("https://hotel.testplanisphere.dev/ja/login.html"); I.see("ログアウト"); },
  9. 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); }, }, }, },
  10. 例)ユーザー登録時のメールアドレス確認をする 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); })
  11. Helperの開発は超簡単 コマンド⼀発でboilerplateが出来る $ npx codeceptjs gh const Helper = require('@codeceptjs/helper');

    class MyHelper extends Helper { doAwesomeThings() { console.log('Hello from MyHelpr'); } }