Selenium勉強会 - Speaker Deck

Selenium勉強会

by arm4

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

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

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 を使ったテストこの２種類があるって覚えておけばおｋ

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

でたーーｗｗｗ PHP がないｗｗｗｗ

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 にしても効いてくれないテスト時のみサブドメインを設定して conﬁg/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