ぼくのかんがえたさいきょうのE2Eフレームワーク with CodeceptJS

ぼくのかんがえた
さいきょうのE2E
フレームワーク
with CodeceptJS
with CodeceptJS
with CodeceptJS
with CodeceptJS
with CodeceptJS
with CodeceptJS
末村拓也 @
株式会社オープンロジ
末村拓也 @
末村拓也 @
末村拓也 @
末村拓也 @
末村拓也 @
1 / 25

View Slide

おまえ誰？
おまえ誰？
おまえ誰？
おまえ誰？
おまえ誰？
おまえ誰？
末村拓也(
すえむらたくや)
末村拓也(
末村拓也(
末村拓也(
末村拓也(
末村拓也(
物流スタートアップ OPENLOGI
で1
年半ほどQA
エンジニアを
で1
年半ほどQA
エンジニアを
で1
年半ほどQA
エンジニアを
で1
年半ほどQA
エンジニアを
で1
年半ほどQA
エンジニアを
で1
年半ほどQA
エンジニアを
しています
しています
しています
しています
しています
しています
新卒から5
年ぐらい倉庫でフォークリフト乗り回す生活→いろ
新卒から5
新卒から5
新卒から5
新卒から5
新卒から5
いろあってPHPer
に→いまはQA
エンジニアやってる
に→いまはQA
に→いまはQA
に→いまはQA
に→いまはQA
に→いまはQA


















2 / 25

View Slide

おまえ誰？
おまえ誰？
おまえ誰？
おまえ誰？
おまえ誰？
おまえ誰？
神龍に自動テストを作ってもらう記事で一瞬有名人になった
https://qiita.com/tsuemura/items/56ba9942565963858d8f
3 / 25

View Slide

マイクの存在を忘れがちなので、
マイク持つの忘れたらLT
中でもいいので
指摘してください
4 / 25

View Slide

何話すの？
何話すの？
何話すの？
何話すの？
何話すの？
何話すの？
ぼくのかんがえたさいきょうのE2E
フレームワークについて
話します
話します
話します
話します
話します
話します
現時点で一番理想に近いCodeceptJS
というフレームワークに
ついても話します












5 / 25

View Slide

CodeceptJS
とは？
CodeceptJS
とは？
CodeceptJS
とは？
CodeceptJS
とは？
CodeceptJS
とは？
CodeceptJS
とは？
NodeJS
製のE2E
テストフレームワーク
NodeJS
製のE2E
NodeJS
製のE2E
NodeJS
製のE2E
NodeJS
製のE2E
NodeJS
製のE2E
OSS
OSS
OSS
OSS
OSS
OSS
WebDriver
やPuppeteer
、Appium
などのブラウザ自動操作フ
WebDriver
やPuppeteer
、Appium
WebDriver
やPuppeteer
、Appium
WebDriver
やPuppeteer
、Appium
WebDriver
やPuppeteer
、Appium
WebDriver
やPuppeteer
、Appium
レームワークをラップして、単一のAPI
で操作できる
で操作できる
で操作できる
で操作できる
で操作できる
で操作できる
受け入れテスト（UAT
）をそのままテストコードにしたっぽい
雰囲気でテストが書ける
























6 / 25

View Slide

既存のテスティングフレームワークに
感じている不満
意味のないロケータ
安定しない
安定しない
安定しない
安定しない
安定しない
安定しない
メンテナンス・デバッグ効率が悪い


















7 / 25

View Slide

8 / 25

View Slide

意味のあるロケータを使いたい
//
こう書かざるを得ない
//
こう書かざるを得ない
$
$(
('button.btn-primary[type=submit]'
'button.btn-primary[type=submit]')
).
.click
click(
()
)
//
本当はこう書きたい
//
本当はこう書きたい
$
$(
('
送信'
'
送信')
).
.click
click(
()
)
クラスとかXPath
は要素へのパスでしかなく、テスト的には無意
味
味
味
味
味
味
ロケータ自身にきちんと意味をもたせたい
9 / 25

View Slide

どうしたいのか
文言でロケートしたい
click('
送信')
click('
送信')
click('
送信')
click('
送信')
click('
送信')
click('
送信')
で送信というテキストを持つボタンがクリ
ックされる
ックされる
ックされる
ックされる
ックされる
ックされる
byLinkText()
byLinkText()
byLinkText()
byLinkText()
byLinkText()
byLinkText()
に近いアプローチだが、リンク以外でもそう
したい
したい
したい
したい
したい
したい
テキストエリアは対応するラベルやプレースホルダでロケー
トしたい
トしたい
トしたい
トしたい
トしたい
トしたい
fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
で
で
で
で
で
で名前
名前
名前
名前
名前
名前というラベルのつい
というラベルのつい
たinput
に
たinput
に
たinput
に
たinput
に
たinput
に
たinput
にすえむら
すえむら
すえむら
すえむら
すえむら
すえむらが入力される
が入力される
が入力される
が入力される
が入力される
が入力される






























10 / 25

View Slide

CodeceptJS
でどこまでできてるか
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS

click('
送信')
click('
送信')
click('
送信')
click('
送信')
click('
送信')
click('
送信')
ックされる
ックされる
ックされる
ックされる
ックされる
ックされる

fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
fillField('
名前', '
すえむら')
で
で
で
で
で
で名前
名前
名前
名前
名前
名前というラベルのつい
たinput
に
たinput
に
たinput
に
たinput
に
たinput
に
たinput
にすえむら
すえむら
すえむら
すえむら
すえむら
すえむらが入力される
が入力される
が入力される
が入力される
が入力される
が入力される












11 / 25

View Slide

実装
実装
実装
実装
実装
実装
ndClickable
（クリック可能な要素の探索）の実装
ndClickable
ndClickable
ndClickable
ndClickable
ndClickable
リテラルから探索するために、XPath
の合成による泥臭いことを
やっている
やっている
やっている
やっている
やっている
やっている
Locator
Locator.
.clickable
clickable =
= {
{
narrow
narrow:
: literal
literal =>
=> xpathLocator
xpathLocator.
.combine
combine(
([
[
`.//a[normalize-space(.)=
`.//a[normalize-space(.)=${
${literal
literal}
}]`
]`,
,
`.//button[normalize-space(.)=
`.//button[normalize-space(.)=${
${literal
literal}
}]`
]`,
,
`.//a/img[normalize-space(@alt)=
`.//a/img[normalize-space(@alt)=${
${literal
literal}
}]/ancestor::a`
]/ancestor::a`,
,
`.//input[./@type = 'submit' or ./@type = 'image' or ./@type =
`.//input[./@type = 'submit' or ./@type = 'image' or ./@type =
'button'][normalize-space(@value)=
'button'][normalize-space(@value)=${
${literal
literal}
}]`
]`,
,
]
])
),
, 12 / 25

View Slide

夢
夢
夢
夢
夢
夢
画像も画像認識でセレクトできると最高だよね
click('
ゴリラ')
click('
ゴリラ')
click('
ゴリラ')
click('
ゴリラ')
click('
ゴリラ')
click('
ゴリラ')
でゴリラの画像をクリックしてくれるみ
たいな未来が欲しい
AI
とかでいいかんじにしてくれるといいね
AI
AI
AI
AI
AI
文言でのセレクトがもうちょっと賢いといいね
clickable
の対象はa, button, input, label
だけなので、div
と
clickable
と
clickable
と
clickable
と
clickable
と
clickable
と
かspan
とかはクリックしてくれない
かspan
かspan
かspan
かspan
かspan
AI
AI
AI
AI
AI
AI




































13 / 25

View Slide

安定しない(Flaky)
テスト
テスト
テスト
テスト
テスト
テスト
14 / 25

View Slide

安定性が悪い(Flaky)
DOM
的には存在するが、他の要素の下に隠れてたりして操作
DOM
DOM
DOM
DOM
DOM
できない要素との戦い
自動スクロールで要素を真ん中あたりに持ってきてほしい
デフォルトのスクロールはTop or Bottom
にしかできない
のでnavbar
との相性が悪い
のでnavbar
のでnavbar
のでnavbar
のでnavbar
のでnavbar
要素の表示待ちは適宜考慮してほしい
E2E
なのでデータの変更（たとえばブログの記事が増えたり減
E2E
E2E
E2E
E2E
E2E
ったり的なもの）に左右されやすい






























15 / 25

View Slide

CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS













データによって可変な領域とそうでない領域を区別してよ





しなにやってほしい


















16 / 25

View Slide

実装
実装
実装
実装
実装
実装
要素の表示待ちも含め、
要素の表示待ちも含め、失敗したらちょっと待ってリトライする
失敗したらちょっと待ってリトライする
失敗したらちょっと待ってリトライすると
と
と
と
と
と
いうアプローチ
Plugin
で実現
Plugin
で実現
Plugin
で実現
Plugin
で実現
Plugin
で実現
Plugin
で実現
plugins
plugins:
: {
{
retryFailedStep
retryFailedStep:
: {
{
enabled
enabled:
: true
true
}
}
}
}
17 / 25

View Slide

雑感
雑感
雑感
雑感
雑感
雑感
いままで多くのテスト自動化エンジニアを苦しめてきた
「Wait
書くの辛い問題」は、単純なAutoRetry
→Fallback
で解消
「Wait
→Fallback
で解消
「Wait
→Fallback
で解消
「Wait
→Fallback
で解消
「Wait
→Fallback
で解消
「Wait
→Fallback
で解消
できる
できる
できる
できる
できる
できる
データによって変化する領域をよしなにハンドリングする技
術はなんか出てきてほしい
スクロール周りはSelenium
側で直してくれるの期待してる
Capability
にScrollOption
的なの付けてほしいよね
Capability
にScrollOption
Capability
にScrollOption
Capability
にScrollOption
Capability
にScrollOption
Capability
にScrollOption
技術的にはCodeceptJS
のPlugin
としても実装可能なので令
のPlugin
のPlugin
のPlugin
のPlugin
のPlugin
和が終わるころまでにはPR
出したい
出したい
出したい
出したい
出したい
出したい






























18 / 25

View Slide

19 / 25

View Slide

夢
夢
夢
夢
夢
夢
タイムマシン
タイムマシン
タイムマシン
タイムマシン
タイムマシン
タイムマシン
ステップごとにDOM
のスナップショットをとってくれる
任意の場所からリスタートできる
動かなかったところはその場で修正して続きを実行できる
























20 / 25

View Slide

CodeceptJS
でどこまで出来てるか
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS

タイムマシン

タイムマシン

タイムマシン

タイムマシン

タイムマシン

タイムマシン






21 / 25

View Slide

Workaround
Workaround
Workaround
Workaround
Workaround
Workaround
Cypress
をつかう
Cypress
をつかう
Cypress
をつかう
Cypress
をつかう
Cypress
をつかう
Cypress
をつかう
CodeceptJS
とは無関係のE2E
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
のスナップショットを取ってくれる
リスタートとか編集とかはさすがにできない
クロスブラウザ要らない感じなら使いやすいよ






























22 / 25

View Slide

Workaround
Workaround
Workaround
Workaround
Workaround
Workaround
Allure Reporter
を使う
Allure Reporter
を使う
Allure Reporter
を使う
Allure Reporter
を使う
Allure Reporter
を使う
Allure Reporter
を使う
OSS
のレポート作成ツール
OSS
OSS
OSS
OSS
OSS
CodeceptJS
ももちろんサポートしている
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
ステップごとにスクリーンショットを取ってくれる
何をしたときにどう落ちたか分かりやすくて良い
普通にレポーターとして優秀なのでみんな使ってみてほし
い
い
い
い
い
い
http://allure.qatools.ru/
https://demo.qameta.io/allure/




































23 / 25

View Slide

あんな夢こんな夢いっぱいあるけど
みんなみんな誰かが叶えてくれるわけではない
欲しい機能があればコミットして世の中を良くしていこう
24 / 25

View Slide

おしまい
おしまい
おしまい
おしまい
おしまい
おしまい
25 / 25

View Slide

ぼくのかんがえたさいきょうのE2Eフレームワーク with CodeceptJS

ぼくのかんがえたさいきょうのE2Eフレームワーク with CodeceptJS

tsuemura

More Decks by tsuemura

Other Decks in Technology

Featured

Transcript