Selenium勉強会

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

Transcript

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