Selenium勉強会
by
arm4
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Selenium 勉強会 arm4
Slide 2
Slide 2 text
今日、話すこと そもそもテストって何? Laravel のテスト Selenium 概要&環境構築手順 テスト実行デモンストレーション Selenium コード実装時の注意事項 Laravel でPHPUnit を書く時の注意事項 PHPUnit (Laravel テスト)との比較
Slide 3
Slide 3 text
そもそもテストって 何?
Slide 4
Slide 4 text
単体テスト クラスや関数といった単位のプログラムのテスト 結合テスト 単体テストで検証したプログラムを組みわせて行う テスト 機能テスト 結合したプログラムを1 つの機能として行うテスト システムテスト 個々のプログラムや機能を結合したプログラムが仕 様通りに動くかを検証するためのテスト https://qiita.com/ktarow/items/8c3d94d6c21a0c86b79
Slide 5
Slide 5 text
いきなりいっぱいある!! 難しい専門用語ばっかり!! 正直、面倒くさそうwww テストばっか書いてられないし。。 こんなに大それたテストじゃなくていいか ら、普通に人間がテストしてるようなのを自 動でやってくれないかな。
Slide 6
Slide 6 text
たとえば、面倒なテストって言えば.... 広範囲に影響がある共通メソッドをいじったから全 ページ落ちてないか確認。 GET のパラメによって表示する内容が変わる系ペー ジの全パターン網羅。 とりあえず一通りの保存編集削除が壊れてないか確 認。
Slide 7
Slide 7 text
だいたいこういうテストは何パターンかやったら、 「うん。よさそうだな。」になる。 だいたいバグ報告は、こういう「うん。よさそうだ な。」から漏れてる箇所。 だいたい「え?そこ?」みたいな斜め上からやって くる。 あーーーこんな簡単で面倒な テスト誰か代わりにやってく れないかなー。
Slide 8
Slide 8 text
それ、あるよ! E2E テスト
Slide 9
Slide 9 text
E2E テスト E2E とはEnd to End の略。Face to Face の友達。 端から端までテストするよという意味。
Slide 10
Slide 10 text
より狭義的に言うと コードを使ってブラウザを操作し、ユーザが実際に操 作するのと同じことを再現するテストのこと。 ブラウザテストとも呼ばれる。 要するに私たちが普段、手で やってるテスト!!!!
Slide 11
Slide 11 text
ブラウザテストツールはこんなにっ★ ブラウザテストツール総まとめ・2016 年夏版 https://qiita.com/cognitom/items/6cce719b57341769c
Slide 12
Slide 12 text
ベル子の優しいまとめ ヘッドレスブラウザを使ったテスト Selenium を使ったテスト この2種類があるって覚えて おけばおk
Slide 13
Slide 13 text
ヘッドレスブラウザを使った テスト リアルなブラウザとは違うので挙動がちょっと違う こともある GUI がないからテストの実行速度が速い GUI がないからLinux でも安心
Slide 14
Slide 14 text
Selenium を使ったテスト リアルなブラウザのエンジンを使うので挙動での差 がない GUI があるからテストの実行速度がやたら遅い GUI があるからLinux では頑張らないと使えない
Slide 15
Slide 15 text
現状では、挙動での差がないSelenium を選択する現 場が多いようです。
Slide 16
Slide 16 text
Laravel のテスト
Slide 17
Slide 17 text
PHPUnit というテスティングフレームワークをベー スにLaravel が使いやすいように、いろいろ施したや つ。 PHPUnit を使う上で押さえておきたい知識 PHPUnit の主なAssert メソッド一覧 http://www.dn- web64.com/archives/web/phpunit_knowledge/ https://qiita.com/rev84/items/12fbd16d210d6a86eff9
Slide 18
Slide 18 text
実は、Laravel のテストを使えば、 単体テスト、結合テスト、機能テスト、システムテス トをひと通り書ける。 と、思う。 ↓詳しくはこちら https://laravel.com/docs/5.2/testing
Slide 19
Slide 19 text
こんな感じでページのクローリングもできる。 // public function testTimeline() { $this->visit('/timeline') ->seePageIs('/timeline') ->see(' '); }
Slide 20
Slide 20 text
あれ?それなら Selenium 必要ないん じゃね?
Slide 21
Slide 21 text
ただ、Laravel のテ ストには致命的な問 題が存在してい た!!
Slide 22
Slide 22 text
JavaScript が理解で きないお(´ ・ω ・`)
Slide 23
Slide 23 text
JavaScript が理解できない イコール、Vue.js が書き出すhtml が読めない イコール、Vue.js が死んでて何も表示されな くても分からない イコール、モーダルで何かやってるやつ系全 部ムリ イコール、ajax で何かやってるやつもムリ
Slide 24
Slide 24 text
Selenium 概要&環境構築手順
Slide 25
Slide 25 text
超訳Selenium 概要 https://www.kaitoy.xyz/2017/07/12/2017-selenium- headless-browsers/ ブラウザテスト創世記にはこうある。 神は「光あれ」と言われた。するとSelenium があった。 神はその光を見て、良しとされた。神はその光と闇とを分けられ た。 神は光をSelenium RC (aka Selenium 1) と名づけ、闇を Selenium WebDriver (aka Selenium 2) と名づけられた。
Slide 26
Slide 26 text
ちゃんとしたSelenium 概要 Selenium の原型は2004 年に誕生し、いろいろな経 緯があってSelenium RC (Selenium 1 )が誕生。 Selenium RC はJava やPython などの言語で書いたス クリプトを元に、 JavaScript を生成しそれをテスト ページに埋め込んでブラウザを操作するという仕組 みだったので、 ブラウザのセキュリティ制限によ って多くの動作制約を受けた。 そこで、すごい人がネイティブなブラウザ機能ある いはブラウザ拡張を用いてブラウザを直接操作する 仕組みを模索し始める。
Slide 27
Slide 27 text
2007 年、WebDriver の開発が始動。 2011 年7 月、Selenium RC とWebDriver を統合し た、Selenium WebDriver (Selenium 2 )がリリー ス。 現在、Selenium のバージョンは3 。 3 は2 の単なるバグフィックス。 3 ではSelenium RC のAPI はサポートされなくなっ た。 現在、WebDriver のAPI はW3C で標準化が進められ ている。
Slide 28
Slide 28 text
ドライバを使ってブラウザを 動かす方法 RESTful API(JSON Wire Protocol) に従いHTTP リクエ ストを発行し、返って来たレスポンスを解釈して用途 に合わせてまたHTTP リクエストを発行するというよ うな仕組みになっている。 https://app.codegrid.net/entry/selenium-1
Slide 29
Slide 29 text
そんな難しいこと知 ったこっちゃない。 大丈夫、Selenium 公式がサポートしているクライア ントのライブラリがあるYO ★
Slide 30
Slide 30 text
対応言語 Java Ruby Python C# JavaScript(Node.js)
Slide 31
Slide 31 text
でたーーwww PHP がないwwww
Slide 32
Slide 32 text
大丈夫!! Facebook 様がライブラリ作っ てくれたよ! でも、非公式言語だから、Selenium Server Standalone という別言 語からでもアレできる何かを入れる必要があるの☆メンゴ
Slide 33
Slide 33 text
Selenium WebDriver はAPI を介してブラウザを直接操 作するため、ブラウザ毎にドライバーが用意されてい る。 使いたいドライバーが複数あれば全てインストールし なければならない。 Firefox, GeckoDriver Chrome, ChromeDriver MS Edge, Microsoft WebDriver
Slide 34
Slide 34 text
すごくてうれしいまとめ Selenium とは... ある特定の単体ライブラリの名称ではない。 WebDriver を使ったブラウザを自動操作して行うテ スト環境(エコシステム)全体のこと。
Slide 35
Slide 35 text
詳しい導入手順(お手製) https://qiita.com/Arm4/items/92ef786378b544c7ffe4
Slide 36
Slide 36 text
Laravel に自力で facebook/php-webdriver (以 下phpdriver )を入れるコツ
Slide 37
Slide 37 text
phpdriver はphpunit のバージョンをrequire してい るため、各OSS のgithub ページのcomposer.json を 確認し、全員に怒られないバージョンを特定し記述 する必要がある。 Laravel 以外のフレームワークもComposer.json を使 用していれば、だいたい要領は同じ。
Slide 38
Slide 38 text
Laravel のcomposer.json これのbranch を切り替えればそれぞれの composer.json の確認ができる。 https://github.com/laravel/laravel/blob/master/com
Slide 39
Slide 39 text
phpdriver のcomposer.json phpdriver のほうはTag でバージョン管理してるよう なので、タブをTags にしてそちらで切り替えて確認。 https://github.com/facebook/php- webdriver/blob/community/composer.json
Slide 40
Slide 40 text
参考 Composer のバージョン指定方法でのチルダ(~ )と キャレット(^ )の違い http://blog.a-way- out.net/blog/2015/06/19/composer-version-tilde- and-caret/
Slide 41
Slide 41 text
テスト実行デモンストレーシ ョン
Slide 42
Slide 42 text
selenium-server はデフォルトでポート4444 で立ち上 がるので、コード内でlocalhost:4444 と指定している 人はポートを指定する必要はない。 selenium-server
Slide 43
Slide 43 text
アプリルートで実行 ./vendor/bin/phpunit tests/BrowserTest.php
Slide 44
Slide 44 text
Selenium コード実装時の注意 事項
Slide 45
Slide 45 text
操作したいHTML 要素がロードされるまで待って から操作を始めないといけない ファーストビューで見えない位置にある要素をクリ ックしようとするとエラーが出るので、コードでス クロールさせないといけない Laravel のDebug Bar がじゃまで一番下の要素のク リックができないのでテストの前には APP_DEBUG=false に
Slide 46
Slide 46 text
本当にブラウザを立ち上げて自動で操作しているだ けなので、コード上でAPP_ENV=testing にしても 効いてくれない テスト時のみサブドメインを設定して config/app.php で判定させてみたが、テスト実行時 にエラーが出てしまう。 うまい解決法が見つかっていない。 'env' => strpos(url('/'), 'http://testing.') !== false ? 'test
Slide 47
Slide 47 text
Chrome だとgetText だとうまくテキストが取得でき ない場合があるのでgetAttribute("innerText") でテ キストを取得する $element = $this->driver->findElement(WebDriverBy::cssSel return $element->getAttribute("innerText");
Slide 48
Slide 48 text
Select2 の入力時などinput 入力にJS が絡んでくる場 合、最後にenter を付け加えてやるとうまくいく // 選択 $element = $this->findBySelector('.visions-group-member-s $action->moveToElement($element)->click()->perform(); $this->driver->findElement(WebDriverBy::cssSelector(".vis
Slide 49
Slide 49 text
Ajax を使ったDB へのデータ追加を伴う処理のあ と、リダイレクトでページが表示されてすぐに、ま たDB 操作をしたりするとデータがないと怒られる ため、sleep させるなどして適度に待ってやらない といけない
Slide 50
Slide 50 text
Laravel でPHPUnit を書く時の 注意事項
Slide 51
Slide 51 text
Laravel でsetUp を使う場合は継承の関係上、このよう に書かないといけない。 public function setUp(){ parent::setUp(); }
Slide 52
Slide 52 text
PHPUnit (Laravel テスト)と の比較
Slide 53
Slide 53 text
PHPUnit Selenium テストコードが何をやっ てるか 分かりに くい 分かりや すい Vue.js のコンポーネント テスト × ○ ajax を使った保存テスト △ ○ モーダルを使ったUI のテ スト × ○
Slide 54
Slide 54 text
PHPUnit Selenium .env.testing の利用 ○ × API の返すjson レスポンス の検証 ○ × メソッド単位のテスト ○ × 数値比較テスト ○ △ バリデーションのテスト ○ △
Slide 55
Slide 55 text
参考 【Laravel 】フォームリクエストバリデーションのテ ストコード作成 https://qiita.com/n_mogi/items/57a946205df2a69889c
Slide 56
Slide 56 text
ここまで話しておい て何ですが....
Slide 57
Slide 57 text
Laravel 5.4 からLaravel のテス ト仕様が大幅に変更になりま した。
Slide 58
Slide 58 text
Why? いくらページのクロールができたとしても、 JavaScript が理解できないとJS フレームワークを利 用したサイトでのテストは難しい。 Selenium 環境を構築するのって面倒 Selenium でテストできたら、 事実上、PHPUnit のほうでアプリケーションテス ト(システムテスト)をする必要がない。
Slide 59
Slide 59 text
Laravel の出した結論 単体テスト PHPUnit でやりましょう。(Unit) 結合テスト PHPUnit でやりましょう。(Laravel では定義されて ないが、Unit に入れるのがよさげ) 機能テスト PHPUnit でやりましょう。(Feature)
Slide 60
Slide 60 text
システムテスト Selenium でやりましょう。 Laravel が使いやすいライブラリを作っておきまし た。 https://laravel.com/docs/5.5/dusk
Slide 61
Slide 61 text
API テスト PHPUnit でやりましょう。 Laravel が使いやすいメソッドを作っておきまし た。 https://laravel.com/docs/5.5/http-tests
Slide 62
Slide 62 text
詳しくはこちらをどうぞ https://laravel.com/docs/5.5/testing
Slide 63
Slide 63 text
ご清聴ありがとうご ざいました★