退屈なブラウザテストはCodeceptJSにやらせよう

退屈なブラウザテストは
CodeceptJS
にやらせよう
CodeceptJS
にやらせよう
CodeceptJS
にやらせよう
CodeceptJS
にやらせよう
CodeceptJS
にやらせよう
CodeceptJS
にやらせよう
末村拓也 @
株式会社オープンロジ
末村拓也 @
末村拓也 @
末村拓也 @
末村拓也 @
末村拓也 @
1 / 72

View Slide

はじめまして
はじめまして
はじめまして
はじめまして
はじめまして
はじめまして
末村拓也（すえむらたくや）
物流スタートアップ「OPENLOGI
」のQA
エンジニア
」のQA
エンジニア
」のQA
エンジニア
」のQA
エンジニア
」のQA
エンジニア
」のQA
エンジニア
です
です
です
です
です
です
まんがとヒトカラがすきです


















2 / 72

View Slide

エンジニア歴短めです
新卒から5
年間ぐらいフォークリフト乗ってました
新卒から5
新卒から5
新卒から5
新卒から5
新卒から5
エンジニアを名乗り始めたのはここ3
年ぐらい
年ぐらい
年ぐらい
年ぐらい
年ぐらい
年ぐらい
3 / 72

View Slide

バズりました
バズりました
バズりました
バズりました
バズりました
バズりました
https://qiita.com/tsuemura/items/56ba9942565963858d8f
4 / 72

View Slide

今日はこの記事で登場した技術を使って
ブラウザテスト自動化を
圧倒的に効率化していきます
（記事を読んでいない方もお楽しみいただけます）
5 / 72

View Slide

記事ではPuppeteer
を使いましたが
このセッションではSelenium
を使います
を使います
を使います
を使います
を使います
を使います
6 / 72

View Slide

突然ですが
突然ですが
突然ですが
突然ですが
突然ですが
突然ですが
7 / 72

View Slide

皆さん
皆さん
皆さん
皆さん
皆さん
皆さん
ブラウザテスト
自動化してますか？
8 / 72

View Slide

ブラウザテスト書くの
めんどくさくないですか？
9 / 72

View Slide

例えば
例えば
例えば
例えば
例えば
例えば
10 / 72

View Slide

セレクタを書くのがめんどくさい
11 / 72

View Slide

12 / 72

View Slide

13 / 72

View Slide

たかがボタンひとつクリックするために
めんどくさいこと考えたくないですね
14 / 72

View Slide

それから
それから
それから
それから
それから
それから
15 / 72

View Slide

要素の表示待ちを
考えるのが面倒
16 / 72

View Slide

17 / 72

View Slide

18 / 72

View Slide

言わなくても待ってて欲しいですね
(Implicitly Wait
でもいいんだけど有効範囲が限定的なイメージ)
(Implicitly Wait
(Implicitly Wait
(Implicitly Wait
(Implicitly Wait
(Implicitly Wait
19 / 72

View Slide

さらにさらに
さらにさらに
さらにさらに
さらにさらに
さらにさらに
さらにさらに
20 / 72

View Slide

デバッグがめんどくさい
21 / 72

View Slide

22 / 72

View Slide

23 / 72

View Slide

デバッグなんてしなくてもすむように
最初から動くコードを書きたいですね！！
24 / 72

View Slide

どうすれば簡単に書けるんでしょうか
25 / 72

View Slide

＿_.. -
―─ ､__
＿_.. -
―─ ､__
／｀三ﾐーﾍ､_
／｀三ﾐーﾍ､_
ゝ' ;; ,, , ,,
ミﾐ , il
ﾞＺ,
ゝ' ;; ,, , ,,
ミﾐ , il
ﾞＺ,
_
〉,.. ////, ,
彡ff
ｯｨ彡从j
彡
_
〉,.. ////, ,
彡ff
ｯｨ彡从j
彡
〉,
ｨiiif , ,, '
ノ川j
ﾉ川; :.
｀ﾌ公)
了
〉,
ｨiiif , ,, '
ノ川j
ﾉ川; :.
｀ﾌ公)
了
＼.:.:.:i=
珍／二''=
く､ !
ノ一ヾﾞ;.;.;
）
＼.:.:.:i=
珍／二''=
く､ !
ノ一ヾﾞ;.;.;
）
く:.:.:.:l
ﾑj
ｲ rf
ﾓﾃ〉ﾞ} ij
ｨt
ｹ 1
ｲ'´
く:.:.:.:l
ﾑj
ｲ rf
ﾓﾃ〉ﾞ} ij
ｨt
ｹ 1
ｲ'´
〕:.:.|,Y!:!
､ﾆ '
､ ; |
｀ﾆｲj'
逆に考えるんだ
〕:.:.|,Y!:!
､ﾆ '
､ ; |
｀ﾆｲj'
逆に考えるんだ
{:.:.:j {: :}
｀､_{__} /
ﾉ
{:.:.:j {: :}
｀､_{__} /
ﾉ
〉ｲ､ﾞ! ,
ィ__
三ｰ､ j
′ 「これらをやらなければテストは楽に書けるはずさ」
〉ｲ､ﾞ! ,
ィ__
三ｰ､ j
′ 「これらをやらなければテストは楽に書けるはずさ」
,{
＼ﾐ＼ゝ'
ｪｪ'
｀' /
,{
＼ﾐ＼ゝ'
ｪｪ'
｀' /
-‐'
＼＼ヽ＼彡ｲ-
､と考えるんだ
-‐'
＼＼ヽ＼彡ｲ-
､と考えるんだ
＼＼.
ヽゝ‐‐‐
升ﾄ､ヽ､__
＼＼.
ヽゝ‐‐‐
升ﾄ､ヽ､__
＼ヽ-
､./
／ j!:.}
｀ｰ､
＼ヽ-
､./
／ j!:.}
｀ｰ､
ヽ＼厶_r__
ﾊ/!:.{
ヽ＼厶_r__
ﾊ/!:.{
´ / !
ヽ
´ / !
ヽ
26 / 72

View Slide

裏を返せば
裏を返せば
裏を返せば
裏を返せば
裏を返せば
裏を返せば
これらをやらなければ
テストは楽に書ける（はず）
27 / 72

View Slide

ブラウザテストを楽に書くコツ
CSS
セレクタやXPath
を（なるべく）使わない
CSS
CSS
CSS
CSS
CSS
動かなかったら自動でリトライさせる
一行ずつ動かしながら書く


















28 / 72

View Slide

これ全部できます。
そう、CodeceptJS
ならね
そう、CodeceptJS
ならね
そう、CodeceptJS
ならね
そう、CodeceptJS
ならね
そう、CodeceptJS
ならね
そう、CodeceptJS
ならね
29 / 72

View Slide

CodeceptJS
ってなんなの？
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
https://codecept.io
https://codecept.io
https://codecept.io
https://codecept.io
https://codecept.io
https://codecept.io
NodeJS
製のブラウザテストフレームワーク
NodeJS
NodeJS
NodeJS
NodeJS
NodeJS
他のブラウザ操作フレームワークと組み合わせる
ことでブラウザやモバイル実機を操作できる
受け入れテストを直感的に分かりやすく書くこと
に注力している


















30 / 72

View Slide

同じ文法で複数のドライバを利用できる
31 / 72

View Slide

CodeceptJS
の様々な機能の中から
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
CodeceptJS
ブラウザテスト記述を特に楽にしてくれる
3
つの機能を紹介します
3
3
3
3
3
Semantic Locator
Semantic Locator
Semantic Locator
Semantic Locator
Semantic Locator
Semantic Locator
retryFailedStep Plugin
Debugger
Debugger
Debugger
Debugger
Debugger
Debugger


















32 / 72

View Slide

さっそく使ってみましょう
33 / 72

View Slide

まずは準備
まずは準備
まずは準備
まずは準備
まずは準備
まずは準備
34 / 72

View Slide

必要なもの
必要なもの
必要なもの
必要なもの
必要なもの
必要なもの
NodeJS v8.9
以上
NodeJS v8.9
以上
NodeJS v8.9
以上
NodeJS v8.9
以上
NodeJS v8.9
以上
NodeJS v8.9
以上
npm
npm
npm
npm
npm
npm
Javascript
チョットデキル
Javascript
Javascript
Javascript
Javascript
Javascript
UNIX
系OS
前提で話しますが
UNIX
系OS
UNIX
系OS
UNIX
系OS
UNIX
系OS
UNIX
系OS
Windows
でも普通に動く（はず）
Windows
Windows
Windows
Windows
Windows


















35 / 72

View Slide

インストールは簡単です
$
$ mkdir
mkdir sample
sample &&
&& cd
cd sample
sample
$
$ npm
npm init
init
# Enter
連打!!!!!
# Enter
連打!!!!!
$
$ npm
npm install
install codeceptjs webdriverio
codeceptjs webdriverio
$ npx codeceptjs init
$ npx codeceptjs init
# Enter
連打!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
# Enter
連打!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
36 / 72

View Slide

Selenium Server
Selenium Server
Selenium Server
Selenium Server
Selenium Server
Selenium Server
別途インストールし起動しておいてください
やりかたがわからない方向け
$
$ sudo
sudo npm
npm install
install -g selenium-standalone
-g selenium-standalone
$ selenium-standalone
$ selenium-standalone install
install
$ selenium-standalone start
$ selenium-standalone start
37 / 72

View Slide

準備完了
準備完了
準備完了
準備完了
準備完了
準備完了
38 / 72

View Slide

ここでもういちどおさらい
CSS
CSS
CSS
CSS
CSS
CSS


















39 / 72

View Slide

書く時は
書く時は
書く時は
書く時は
書く時は
書く時は
一行ずつ動かしながら
CSS
やXPath
をなるべく使わず
CSS
やXPath
CSS
やXPath
CSS
やXPath
CSS
やXPath
CSS
やXPath
動かす時は
動かす時は
動かす時は
動かす時は
動かす時は
動かす時は
動かない時は適宜リトライさせる
という方針でやってみましょう


















40 / 72

View Slide

例として
例として
例として
例として
例として
例として
Github
のユーザー登録フォームをテストします
Github
Github
Github
Github
Github
41 / 72

View Slide

$ npx codeceptjs shell
$ npx codeceptjs shell
→ 対話型コンソールが起動します
42 / 72

View Slide

次のコードを入力していきます
>
> I
I.
.amOnPage
amOnPage(
('https://github.com'
'https://github.com')
)
>
> I
I.
.fillField
fillField(
('Username'
'Username',
, 'shen-long1234'
'shen-long1234')
)
>
> I
I.
.fillField
fillField(
('Email'
'Email',
, '[email protected]'
'[email protected]')
)
>
> I
I.
.fillField
fillField(
('Password'
'Password',
, 'P@ssword1234'
'P@ssword1234')
)
>
> I
I.
.click
click(
('Sign up for GitHub'
'Sign up for GitHub')
)
43 / 72

View Slide

動きましたね
動きましたね
動きましたね
動きましたね
動きましたね
動きましたね
44 / 72

View Slide

動いたのでそのままコピペして
再実行しましょう
Feature
Feature(
('Github'
'Github')
)
Scenario
Scenario(
('Can Sign Up'
'Can Sign Up',
, async
async (
(I
I)
) =>
=> {
{
I
I.
.amOnPage
amOnPage(
)
I
I.
.fillField
fillField(
('Username'
'Username',
, 'shen-long1234'
'shen-long1234')
)
I
I.
.fillField
fillField(
('Email'
'Email',
)
I
I.
.fillField
fillField(
('Password'
'Password',
, 'P@ssword1234'
'P@ssword1234')
)
I
I.
.click
click(
)
}
})
)
→
→
→
→
→
→ github_test.js
github_test.js
github_test.js
github_test.js
github_test.js
github_test.js
として保存
として保存
として保存
として保存
として保存
として保存
45 / 72

View Slide

実行
実行
実行
実行
実行
実行
$ npx codeceptjs run github_test.js --steps
$ npx codeceptjs run github_test.js --steps
Github --
Github --
Can Sign Up
Can Sign Up
I am on page "https://github.com"
I fill field "Username", "shen-long1234"
I fill field "Username", "shen-long1234"
I fill field "Email", "[email protected]"
I fill field "Email", "[email protected]"
I fill field "Password", "P@ssword1234"
I fill field "Password", "P@ssword1234"
I click "Sign up for GitHub"
I click "Sign up for GitHub"
✔ OK in 5593ms
✔ OK in 5593ms
46 / 72

View Slide

ここでもう一度コードを見てみます
Feature
Feature(
('Github'
'Github')
)
Scenario
Scenario(
('Can Sign Up'
'Can Sign Up',
, async
async (
(I
I)
) =>
=> {
{
I
I.
.amOnPage
amOnPage(
)
I
I.
.fillField
fillField(
('Username'
'Username',
, 'shen-long1234'
'shen-long1234')
)
I
I.
.fillField
fillField(
('Email'
'Email',
)
I
I.
.fillField
fillField(
('Password'
'Password',
, 'P@ssword1234'
'P@ssword1234')
)
I
I.
.click
click(
)
}
})
)
CSS
セレクタの類は全然出てきませんね
CSS
CSS
CSS
CSS
CSS
47 / 72

View Slide

なぜセレクタを書かずに動くの？
秘密は Semantic Locator
48 / 72

View Slide

Semantic Locator
とは
Semantic Locator
とは
Semantic Locator
とは
Semantic Locator
とは
Semantic Locator
とは
Semantic Locator
とは
アクションにCSS
でもXPath
でもない文字列を渡すと
でもXPath
でもXPath
でもXPath
でもXPath
でもXPath
なんか良い感じにその文字列を持つ要素を
探索してくれる機能
https://codecept.io/locators#semantic-locators
49 / 72

View Slide

例えば
例えば
例えば
例えば
例えば
例えば
クリックなら
クリックなら
クリックなら
クリックなら
クリックなら
クリックなら

のうち指定されたテキストを持つものを探索します


















50 / 72

View Slide

例えば
例えば
例えば
例えば
例えば
例えば
文字入力なら
文字入力なら
文字入力なら
文字入力なら
文字入力なら
文字入力なら

などのうち、
などのうち、
などのうち、
などのうち、
などのうち、
などのうち、 label
label
label
label
label
label
や
や
や
や
や
や placeholder
placeholder
placeholder
placeholder
placeholder
placeholder
や
や
や
や
や
や name
name
name
name
name
name
などに
などに
などに
などに
などに
などに
指定されたテキストを含むものを
自動的に探索します












51 / 72

View Slide

最高
最高
最高
最高
最高
最高
52 / 72

View Slide

もちろんSemantic Locator
で
で
で
で
で
で
対応できないケースはあります
そういうときは割り切って
CSS
セレクタとか使っていきましょう
CSS
CSS
CSS
CSS
CSS
I
I.
.click
click(
('#submit'
'#submit')
)
53 / 72

View Slide

CSS
を使わざるを得ない時も
CSS
CSS
CSS
CSS
CSS
locate
locate
locate
locate
locate
locate
関数を使えば可読性を保ったまま書けます
const
const checkBox
checkBox =
= locate
locate(
('input'
'input')
)
.
.withAttr
withAttr(
({
{type
type:
: 'checkbox'
'checkbox'}
})
)
.
.inside
inside(
('form#register'
'form#register')
)
const
const submit
submit =
= locate
locate(
('button'
'button')
).
.withText
withText(
('
送信する'
'
送信する')
)
I
I.
.checkOption
checkOption(
(checkBox
checkBox)
)
I
I.
.click
click(
(submit
submit)
)
withText()
withText()
withText()
withText()
withText()
withText()
を使えばSemantic Locator
がなくても
がなくても
がなくても
がなくても
がなくても
がなくても
分かりやすく書けますね
54 / 72

View Slide

locate
locate
locate
locate
locate
locate
を使う場合、
を使う場合、
を使う場合、
を使う場合、
を使う場合、
を使う場合、as
as
as
as
as
as
メソッドを使うと
ロケータに別名を持たせることができます
const
const submit
submit =
= locate
locate(
('button'
'button')
)
.
.withText
withText(
('
送信する'
'
送信する')
)
.
.as
as(
('
送信ボタン'
'
送信ボタン')
)
I
I.
.click
click(
(submit
submit)
)
//
レポートでは `I click
送信ボタン`
のように表示される
//
レポートでは `I click
送信ボタン`
のように表示される
55 / 72

View Slide

特定の要素の内側でのみ探索することもできます
const
const dialog
dialog =
= locate
locate(
('div'
'div')
)
.
.withText
withText(
('
送信してよろしいですか？'
'
送信してよろしいですか？')
)
.
.as
as(
('
送信確認ダイアログ'
'
送信確認ダイアログ')
)
//
送信確認ダイアログの中のみを探索
//
送信確認ダイアログの中のみを探索
with
with(
(dialog
dialog,
, (
()
) =>
=> {
{
I
I.
.click
click(
('
送信'
'
送信')
)
}
})
)
56 / 72

View Slide

locate
locate
locate
locate
locate
locate
の話は
の話は
の話は
の話は
の話は
の話は
永遠に続けられるので
いったんここまで！
（興味のある方は終了後
またはTwitter
等でお声がけください）
またはTwitter
またはTwitter
またはTwitter
またはTwitter
またはTwitter
57 / 72

View Slide

ここまでの説明で
動かしながら書くのでデバッグ不要
CSS
を考えずに記述できる
CSS
CSS
CSS
CSS
CSS
ようになりました












58 / 72

View Slide

まだ大事な課題が残っていますね
59 / 72

View Slide

方針のおさらい
書く時は
書く時は
書く時は
書く時は
書く時は
書く時は
CSS
やXPath
CSS
やXPath
CSS
やXPath
CSS
やXPath
CSS
やXPath
CSS
やXPath
動かす時は
動かす時は
動かす時は
動かす時は
動かす時は
動かす時は
動かない時は適宜リトライさせる ←未解決


















60 / 72

View Slide

例えば
例えば
例えば
例えば
例えば
例えば
Github
のユーザー登録フォームで、
Github
Github
Github
Github
Github
すでに登録済みのユーザー名を入れると
エラーが表示されます
「このエラーが表示されること」をテストします
61 / 72

View Slide

コンソールから書いてみます
> I.amOnpage('https://github.com')
> I.amOnpage('https://github.com')
> I.fillField('Username', 'tsuemura')
> I.fillField('Username', 'tsuemura')
> I.see('Something went wrong') //
エラーが表示されているこ
> I.see('Something went wrong') //
エラーが表示されているこ
とを確認
とを確認
これは成功します
62 / 72

View Slide

このコードを自動実行させてみます
Feature
Feature(
('Github'
'Github')
)
Scenario
Scenario(
('Username must be unique'
'Username must be unique',
, async
async (
(I
I)
) =>
=> {
{
I
I.
.amOnPage
amOnPage(
)
I
I.
.fillField
fillField(
('Username'
'Username',
, 'tsuemura'
'tsuemura')
)
I
I.
.see
see(
('Something went wrong'
'Something went wrong')
)
}
})
)
→
→
→
→
→
→ github2_test.js
github2_test.js
github2_test.js
github2_test.js
github2_test.js
github2_test.js
として保存
として保存
として保存
として保存
として保存
として保存
$ npx codeceptjs run github2_test.js --steps
$ npx codeceptjs run github2_test.js --steps
63 / 72

View Slide

失敗しました
失敗しました
失敗しました
失敗しました
失敗しました
失敗しました
バリデーションメッセージが出る前に
アサーションしてしまったからですね
64 / 72

View Slide

ここで登場するのが
retryFailedStep
retryFailedStep
retryFailedStep
retryFailedStep
retryFailedStep
retryFailedStep
プラグイン
プラグイン
プラグイン
プラグイン
プラグイン
プラグイン
文字通り「失敗したらリトライする」機能です
（デフォルトでは1
秒ごとに最大5
回リトライ）
秒ごとに最大5
回リトライ）
秒ごとに最大5
回リトライ）
秒ごとに最大5
回リトライ）
秒ごとに最大5
回リトライ）
秒ごとに最大5
回リトライ）
WebDriver
の
WebDriver
の
WebDriver
の
WebDriver
の
WebDriver
の
WebDriver
の implicitly wait
implicitly wait
implicitly wait
implicitly wait
implicitly wait
implicitly wait
に似てますが
に似てますが
に似てますが
に似てますが
に似てますが
に似てますが
implicitly wait
implicitly wait
implicitly wait
implicitly wait
implicitly wait
implicitly wait
が要素の表示待ちにのみ適用されるのに対し
こちらはアサーション含め全アクションにも適用されます
65 / 72

View Slide

インストールは超簡単
codecept.conf.js
codecept.conf.js
codecept.conf.js
codecept.conf.js
codecept.conf.js
codecept.conf.js
に以下を追記
に以下を追記
に以下を追記
に以下を追記
に以下を追記
に以下を追記
plugins
plugins:
: {
{
retryFailedStep
retryFailedStep:
: {
{
enabled
enabled:
: true
true,
,
}
},
,
}
},
,
66 / 72

View Slide

改めて実行してみます
$ npx codeceptjs run github2_test.js
$ npx codeceptjs run github2_test.js
Github --
Github --
Can Sign Up
Can Sign Up
I fill field "Username", "tsuemura"
I fill field "Username", "tsuemura"
I see "Something went wrong"
I see "Something went wrong"
✔ OK in 4039ms
✔ OK in 4039ms
今度は成功！
今度は成功！
今度は成功！
今度は成功！
今度は成功！
今度は成功！
67 / 72

View Slide

設定ファイルにたった5
行追加するだけで
テストコードが
SPA
対応になってしまいました！！！！
SPA
SPA
SPA
SPA
SPA
68 / 72

View Slide

おわかりいただけただろうか……
(CodeceptJS
の便利さを)
(CodeceptJS
の便利さを)
(CodeceptJS
の便利さを)
(CodeceptJS
の便利さを)
(CodeceptJS
の便利さを)
(CodeceptJS
の便利さを)
69 / 72

View Slide

他にもいろんな機能が盛り沢山
ビジュアルテスト（画像比較）
テスト失敗時に自動でスクリーンショット撮影
Allure Reporter
によるキレイなレポート
Allure Reporter
Allure Reporter
Allure Reporter
Allure Reporter
Allure Reporter
テストコードとレポートの翻訳
Appium
によるネイティブアプリのテスト
Appium
Appium
Appium
Appium
Appium
BDD(Gherkin)
記法のサポート
BDD(Gherkin)
BDD(Gherkin)
BDD(Gherkin)
BDD(Gherkin)
BDD(Gherkin)
...etc
...etc
...etc
...etc
...etc
...etc




































70 / 72

View Slide

質問等あれば遠慮なくどうぞ！
Twitter: @tsueeemura
Teratail: @tsuemura
Teratail: @tsuemura
Teratail: @tsuemura
Teratail: @tsuemura
Teratail: @tsuemura
Teratail: @tsuemura
71 / 72

View Slide

おわり
おわり
おわり
おわり
おわり
おわり
72 / 72

View Slide

退屈なブラウザテストはCodeceptJSにやらせよう

退屈なブラウザテストはCodeceptJSにやらせよう

tsuemura

More Decks by tsuemura

Other Decks in Technology

Featured

Transcript