Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Selenium勉強会

arm4
October 13, 2017

 Selenium勉強会

10/12社内で開催したSelenium勉強会で使用したスライド

arm4

October 13, 2017
Tweet

More Decks by arm4

Other Decks in Programming

Transcript

  1. Selenium
    勉強会
    arm4

    View Slide

  2. 今日、話すこと
    そもそもテストって何?
    Laravel
    のテスト
    Selenium
    概要&環境構築手順
    テスト実行デモンストレーション
    Selenium
    コード実装時の注意事項
    Laravel
    でPHPUnit
    を書く時の注意事項
    PHPUnit
    (Laravel
    テスト)との比較

    View Slide

  3. そもそもテストって
    何?

    View Slide

  4. 単体テスト
    クラスや関数といった単位のプログラムのテスト
    結合テスト
    単体テストで検証したプログラムを組みわせて行う
    テスト
    機能テスト
    結合したプログラムを1
    つの機能として行うテスト
    システムテスト
    個々のプログラムや機能を結合したプログラムが仕
    様通りに動くかを検証するためのテスト
    https://qiita.com/ktarow/items/8c3d94d6c21a0c86b79

    View Slide

  5. いきなりいっぱいある!!
    難しい専門用語ばっかり!!
    正直、面倒くさそうwww
    テストばっか書いてられないし。。
    こんなに大それたテストじゃなくていいか
    ら、普通に人間がテストしてるようなのを自
    動でやってくれないかな。

    View Slide

  6. たとえば、面倒なテストって言えば....
    広範囲に影響がある共通メソッドをいじったから全
    ページ落ちてないか確認。
    GET
    のパラメによって表示する内容が変わる系ペー
    ジの全パターン網羅。
    とりあえず一通りの保存編集削除が壊れてないか確
    認。

    View Slide

  7. だいたいこういうテストは何パターンかやったら、
    「うん。よさそうだな。」になる。
    だいたいバグ報告は、こういう「うん。よさそうだ
    な。」から漏れてる箇所。
    だいたい「え?そこ?」みたいな斜め上からやって
    くる。
    あーーーこんな簡単で面倒な
    テスト誰か代わりにやってく
    れないかなー。

    View Slide

  8. それ、あるよ!
    E2E
    テスト

    View Slide

  9. E2E
    テスト
    E2E
    とはEnd to End
    の略。Face to Face
    の友達。
    端から端までテストするよという意味。

    View Slide

  10. より狭義的に言うと
    コードを使ってブラウザを操作し、ユーザが実際に操
    作するのと同じことを再現するテストのこと。
    ブラウザテストとも呼ばれる。
    要するに私たちが普段、手で
    やってるテスト!!!!

    View Slide

  11. ブラウザテストツールはこんなにっ★
    ブラウザテストツール総まとめ・2016
    年夏版
    https://qiita.com/cognitom/items/6cce719b57341769c

    View Slide

  12. ベル子の優しいまとめ
    ヘッドレスブラウザを使ったテスト
    Selenium
    を使ったテスト
    この2種類があるって覚えて
    おけばおk

    View Slide

  13. ヘッドレスブラウザを使った
    テスト
    リアルなブラウザとは違うので挙動がちょっと違う
    こともある
    GUI
    がないからテストの実行速度が速い
    GUI
    がないからLinux
    でも安心

    View Slide

  14. Selenium
    を使ったテスト
    リアルなブラウザのエンジンを使うので挙動での差
    がない
    GUI
    があるからテストの実行速度がやたら遅い
    GUI
    があるからLinux
    では頑張らないと使えない

    View Slide

  15. 現状では、挙動での差がないSelenium
    を選択する現
    場が多いようです。

    View Slide

  16. Laravel
    のテスト

    View Slide

  17. PHPUnit
    というテスティングフレームワークをベー
    スにLaravel
    が使いやすいように、いろいろ施したや
    つ。
    PHPUnit
    を使う上で押さえておきたい知識
    PHPUnit
    の主なAssert
    メソッド一覧
    http://www.dn-
    web64.com/archives/web/phpunit_knowledge/
    https://qiita.com/rev84/items/12fbd16d210d6a86eff9

    View Slide

  18. 実は、Laravel
    のテストを使えば、
    単体テスト、結合テスト、機能テスト、システムテス
    トをひと通り書ける。
    と、思う。
    ↓詳しくはこちら
    https://laravel.com/docs/5.2/testing

    View Slide

  19. こんな感じでページのクローリングもできる。
    //
    public function testTimeline()
    {
    $this->visit('/timeline')
    ->seePageIs('/timeline')
    ->see(' ');
    }

    View Slide

  20. あれ?それなら
    Selenium
    必要ないん
    じゃね?

    View Slide

  21. ただ、Laravel
    のテ
    ストには致命的な問
    題が存在してい
    た!!

    View Slide

  22. JavaScript
    が理解で
    きないお(´
    ・ω
    ・`)

    View Slide

  23. JavaScript
    が理解できない
    イコール、Vue.js
    が書き出すhtml
    が読めない
    イコール、Vue.js
    が死んでて何も表示されな
    くても分からない
    イコール、モーダルで何かやってるやつ系全
    部ムリ
    イコール、ajax
    で何かやってるやつもムリ

    View Slide

  24. Selenium
    概要&環境構築手順

    View Slide

  25. 超訳Selenium
    概要
    https://www.kaitoy.xyz/2017/07/12/2017-selenium-
    headless-browsers/
    ブラウザテスト創世記にはこうある。
    神は「光あれ」と言われた。するとSelenium
    があった。
    神はその光を見て、良しとされた。神はその光と闇とを分けられ
    た。
    神は光をSelenium RC (aka Selenium 1)
    と名づけ、闇を Selenium
    WebDriver (aka Selenium 2)
    と名づけられた。

    View Slide

  26. ちゃんとしたSelenium
    概要
    Selenium
    の原型は2004
    年に誕生し、いろいろな経
    緯があってSelenium RC
    (Selenium 1
    )が誕生。
    Selenium RC
    はJava
    やPython
    などの言語で書いたス
    クリプトを元に、 JavaScript
    を生成しそれをテスト
    ページに埋め込んでブラウザを操作するという仕組
    みだったので、 ブラウザのセキュリティ制限によ
    って多くの動作制約を受けた。
    そこで、すごい人がネイティブなブラウザ機能ある
    いはブラウザ拡張を用いてブラウザを直接操作する
    仕組みを模索し始める。

    View Slide

  27. 2007
    年、WebDriver
    の開発が始動。
    2011
    年7
    月、Selenium RC
    とWebDriver
    を統合し
    た、Selenium WebDriver
    (Selenium 2
    )がリリー
    ス。
    現在、Selenium
    のバージョンは3

    3
    は2
    の単なるバグフィックス。
    3
    ではSelenium RC
    のAPI
    はサポートされなくなっ
    た。
    現在、WebDriver
    のAPI
    はW3C
    で標準化が進められ
    ている。

    View Slide

  28. ドライバを使ってブラウザを
    動かす方法
    RESTful API(JSON Wire Protocol)
    に従いHTTP
    リクエ
    ストを発行し、返って来たレスポンスを解釈して用途
    に合わせてまたHTTP
    リクエストを発行するというよ
    うな仕組みになっている。
    https://app.codegrid.net/entry/selenium-1

    View Slide

  29. そんな難しいこと知
    ったこっちゃない。
    大丈夫、Selenium
    公式がサポートしているクライア
    ントのライブラリがあるYO

    View Slide

  30. 対応言語
    Java
    Ruby
    Python
    C#
    JavaScript(Node.js)

    View Slide

  31. でたーーwww
    PHP
    がないwwww

    View Slide

  32. 大丈夫!!
    Facebook
    様がライブラリ作っ
    てくれたよ!
    でも、非公式言語だから、Selenium Server Standalone
    という別言
    語からでもアレできる何かを入れる必要があるの☆メンゴ

    View Slide

  33. Selenium WebDriver
    はAPI
    を介してブラウザを直接操
    作するため、ブラウザ毎にドライバーが用意されてい
    る。
    使いたいドライバーが複数あれば全てインストールし
    なければならない。
    Firefox, GeckoDriver
    Chrome, ChromeDriver
    MS Edge, Microsoft WebDriver

    View Slide

  34. すごくてうれしいまとめ
    Selenium
    とは...
    ある特定の単体ライブラリの名称ではない。
    WebDriver
    を使ったブラウザを自動操作して行うテ
    スト環境(エコシステム)全体のこと。

    View Slide

  35. 詳しい導入手順(お手製)
    https://qiita.com/Arm4/items/92ef786378b544c7ffe4

    View Slide

  36. Laravel
    に自力で
    facebook/php-webdriver
    (以
    下phpdriver
    )を入れるコツ

    View Slide

  37. phpdriver
    はphpunit
    のバージョンをrequire
    してい
    るため、各OSS
    のgithub
    ページのcomposer.json

    確認し、全員に怒られないバージョンを特定し記述
    する必要がある。
    Laravel
    以外のフレームワークもComposer.json
    を使
    用していれば、だいたい要領は同じ。

    View Slide

  38. Laravel
    のcomposer.json
    これのbranch
    を切り替えればそれぞれの
    composer.json
    の確認ができる。
    https://github.com/laravel/laravel/blob/master/com

    View Slide

  39. phpdriver
    のcomposer.json
    phpdriver
    のほうはTag
    でバージョン管理してるよう
    なので、タブをTags
    にしてそちらで切り替えて確認。
    https://github.com/facebook/php-
    webdriver/blob/community/composer.json

    View Slide

  40. 参考
    Composer
    のバージョン指定方法でのチルダ(~
    )と
    キャレット(^
    )の違い
    http://blog.a-way-
    out.net/blog/2015/06/19/composer-version-tilde-
    and-caret/

    View Slide

  41. テスト実行デモンストレーシ
    ョン

    View Slide

  42. selenium-server
    はデフォルトでポート4444
    で立ち上
    がるので、コード内でlocalhost:4444
    と指定している
    人はポートを指定する必要はない。
    selenium-server

    View Slide

  43. アプリルートで実行
    ./vendor/bin/phpunit tests/BrowserTest.php

    View Slide

  44. Selenium
    コード実装時の注意
    事項

    View Slide

  45. 操作したいHTML
    要素がロードされるまで待って
    から操作を始めないといけない
    ファーストビューで見えない位置にある要素をクリ
    ックしようとするとエラーが出るので、コードでス
    クロールさせないといけない
    Laravel
    のDebug Bar
    がじゃまで一番下の要素のク
    リックができないのでテストの前には
    APP_DEBUG=false

    View Slide

  46. 本当にブラウザを立ち上げて自動で操作しているだ
    けなので、コード上でAPP_ENV=testing
    にしても
    効いてくれない
    テスト時のみサブドメインを設定して
    config/app.php
    で判定させてみたが、テスト実行時
    にエラーが出てしまう。
    うまい解決法が見つかっていない。
    'env' => strpos(url('/'), 'http://testing.') !== false ? 'test

    View Slide

  47. Chrome
    だとgetText
    だとうまくテキストが取得でき
    ない場合があるのでgetAttribute("innerText")
    でテ
    キストを取得する
    $element = $this->driver->findElement(WebDriverBy::cssSel
    return $element->getAttribute("innerText");

    View Slide

  48. Select2
    の入力時などinput
    入力にJS
    が絡んでくる場
    合、最後にenter
    を付け加えてやるとうまくいく
    // 選択
    $element = $this->findBySelector('.visions-group-member-s
    $action->moveToElement($element)->click()->perform();
    $this->driver->findElement(WebDriverBy::cssSelector(".vis

    View Slide

  49. Ajax
    を使ったDB
    へのデータ追加を伴う処理のあ
    と、リダイレクトでページが表示されてすぐに、ま
    たDB
    操作をしたりするとデータがないと怒られる
    ため、sleep
    させるなどして適度に待ってやらない
    といけない

    View Slide

  50. Laravel
    でPHPUnit
    を書く時の
    注意事項

    View Slide

  51. Laravel
    でsetUp
    を使う場合は継承の関係上、このよう
    に書かないといけない。
    public function setUp(){
    parent::setUp();
    }

    View Slide

  52. PHPUnit
    (Laravel
    テスト)と
    の比較

    View Slide

  53. PHPUnit Selenium
    テストコードが何をやっ
    てるか
    分かりに
    くい
    分かりや
    すい
    Vue.js
    のコンポーネント
    テスト ×

    ajax
    を使った保存テスト △ ○
    モーダルを使ったUI
    のテ
    スト ×

    View Slide

  54. PHPUnit Selenium
    .env.testing
    の利用 ○ ×
    API
    の返すjson
    レスポンス
    の検証
    ○ ×
    メソッド単位のテスト ○ ×
    数値比較テスト ○ △
    バリデーションのテスト ○ △

    View Slide

  55. 参考
    【Laravel
    】フォームリクエストバリデーションのテ
    ストコード作成
    https://qiita.com/n_mogi/items/57a946205df2a69889c

    View Slide

  56. ここまで話しておい
    て何ですが....

    View Slide

  57. Laravel 5.4
    からLaravel
    のテス
    ト仕様が大幅に変更になりま
    した。

    View Slide

  58. Why?
    いくらページのクロールができたとしても、
    JavaScript
    が理解できないとJS
    フレームワークを利
    用したサイトでのテストは難しい。
    Selenium
    環境を構築するのって面倒
    Selenium
    でテストできたら、
    事実上、PHPUnit
    のほうでアプリケーションテス
    ト(システムテスト)をする必要がない。

    View Slide

  59. Laravel
    の出した結論
    単体テスト
    PHPUnit
    でやりましょう。(Unit)
    結合テスト
    PHPUnit
    でやりましょう。(Laravel
    では定義されて
    ないが、Unit
    に入れるのがよさげ)
    機能テスト
    PHPUnit
    でやりましょう。(Feature)

    View Slide

  60. システムテスト
    Selenium
    でやりましょう。
    Laravel
    が使いやすいライブラリを作っておきまし
    た。
    https://laravel.com/docs/5.5/dusk

    View Slide

  61. API
    テスト
    PHPUnit
    でやりましょう。
    Laravel
    が使いやすいメソッドを作っておきまし
    た。
    https://laravel.com/docs/5.5/http-tests

    View Slide

  62. 詳しくはこちらをどうぞ
    https://laravel.com/docs/5.5/testing

    View Slide

  63. ご清聴ありがとうご
    ざいました★

    View Slide