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