ちょっと前になりますが、画面にあるリンクのURL(aタグのhrefの値)を全部なめて、期待するURLになっているかどうかをテストしなくてはならないお仕事がありまして、これは人間のやる仕事ではない！これは機械にやらせる仕事だ！とついカッとなってSelenium関連を調べていたら以下の素晴らしいOSSに巡り逢いました。
※ え、いまさら？とか言わないで
facebook/php-webdriver: A php client for webdriver.
これは
- Facebook様が作っておられる
- Selenium WebDriverをPHPでラップしているのでPHPからWebブラウザを制御できる
と、PHPerには嬉しいものとなっております。
私はこれで気の狂いそうなテストを機械に行なってもらうことに成功しました。
※ テストを書くのはもちろん大変なんだけど
案件において、上記のテストは仮想環境のCentOS上で行ったのですが、家のMacでもphp-webdriverを軽く動かしてみたので今回はその備忘録になります。
環境
環境ですが、
- macOS Sierra 10.12.4
- php
- 5.6.30 (cli) (built: Feb 7 2017 16:06:52)
php-webdriverは PHPのバージョンが5.5 以上であれば大丈夫です
- java jdk
- 1.8.0_77
- javaは 1.8 以上であれば大丈夫です
自分はこんな感じです。
とりあえず、PHP(>=5.5) と Java(>=1.8) が入っていればよいと思います。
利用するブラウザ
利用するブラウザのバージョンは以下の通りです。
- Chrome
- 58.0.3029.81 (64-bit)
- Firefox
- 53.0 (64 ビット)
php-webdriverを実行するために必要なもの
まずphp-webdriverを実行するために、以下が必要になりますので
- selenium-server-standalone
- v3.4.0
- geckodriver
- v0.16.1
- chromedriver
- v2.29
これらをそれぞれダウンロードします。
※ バージョンはこの記事を書いた時点(2017/04/30)でのものになりますので適宜確認してください
※ firefoxだけのテストなら、geckodriverだけでいいし、chromeだけのテストならchromedriverだけでもいいです
selenium-server-standalone のダウンロード
http://selenium-release.storage.googleapis.com/index.html?path=3.4/ から
selenium-server-standalone-3.4.0.jar をダウンロードします。
geckodriver のダウンロード
Firefox47以降は、FirefoxDriverではなくgeckodriverを使用するようです。
Release v0.16.1 · mozilla/geckodriver から geckodriver-v0.16.1-macos.tar.gz をダウンロードして解凍します。
注意点
上記でダウンロードしたselenium-server-standalone-3.4.0では、v0.16.1のgeckodriverでないと、実行後にブラウザが閉じなかったり、こんなエラー Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms. Firefox console output が出るので、seleniumのバージョンとgeckodriverのバージョンの組合せは気をつけたほうがいいです。
解凍すると、geckodriverという実行ファイルが出来るので、以下の様にパスを通して実行権限も付与しておきます。
1 2 | $ mv geckodriver /usr/local/bin/$ chmod +x /usr/local/bin/geckodriver |
chromedriver のダウンロード
https://chromedriver.storage.googleapis.com/index.html?path=2.29/ から https://chromedriver.storage.googleapis.com/2.29/chromedriver_mac64.zip をダウンロードして解凍します。
解凍すると、chromedriverという実行ファイルが出来るので、以下の様にパスを通して実行権限も付与しておきます。
1 2 | $ mv chromedriver /usr/local/bin/$ chmod +x /usr/local/bin/chromedriver |
php-webdriverのインストール
ここまでで、実行環境は整ったはずなのでphp-webdriverをインストールします。
といっても、Composerで一発です。
※ Composerって何？という人はググってみてください
1 | $ composer require facebook/webdriver |
これでおｋです。
selenium-server-standalone を起動する
あとはプログラムを書いていくのですが、その前にSeleniumを起動させておきます。
1 | $ java -jar selenium-server-standalone-3.4.0.jar & |
※ selenium-server-standalone-3.4.0.jar は最初にダウンロードしたjarファイルを指定してください
※ selenium-server-standalone の停止方法
上記のコマンドでは & をつけてバックグラウンドで実行しているのですが、それだとkillする時がめんどくさいので以下のコマンドを打ちます。
※ バックグラウンドで実行しなければ、普通にCtrl + cで停止できます
1 | $ ps aux | grep [s]elenium-server-standalone | awk '{ print "kill -9", $2 }' | sh |
サンプル1
こちらがまず軽く動かしてみたサンプルになります。
Googleに遷移して、適当に検索をして、タイトルが変わるのを待ってからキャプチャを撮ります。
これをChromeとFirefoxのブラウザで行わせてみます。
sample_1.php
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <?phprequire_once './vendor/autoload.php';use Facebook\WebDriver\Remote\RemoteWebDriver;use Facebook\WebDriver\Remote\DesiredCapabilities;use Facebook\WebDriver\WebDriverExpectedCondition;use Facebook\WebDriver\WebDriverBy;/** * selenium php-webdriver 実行のサンプル * @param string $browser chrome or firefox */function sample_1 ($browser){ // selenium $host = 'http://localhost:4444/wd/hub'; switch ($browser) { case 'chrome': // chrome ドライバーの起動 $driver = RemoteWebDriver::create($host, DesiredCapabilities::chrome()); break; case 'firefox': // firefox ドライバーの起動 $driver = RemoteWebDriver::create($host, DesiredCapabilities::firefox()); break; } // 画面サイズをMAXに $driver->manage()->window()->maximize(); // 指定URLへ遷移 (Google) $driver->get('https://www.google.co.jp/'); // 検索Box $element = $driver->findElement(WebDriverBy::name('q')); // 検索Boxにキーワードを入力して $element->sendKeys('GWの予定'); // 検索実行 $element->submit(); // 検索結果画面のタイトルが 'GWの予定 - Google 検索' になるまで10秒間待機する // 指定したタイトルにならずに10秒以上経ったら // 'Facebook\WebDriver\Exception\TimeOutException' がthrowされる $driver->wait(10)->until( WebDriverExpectedCondition::titleIs('GWの予定 - Google 検索') ); // GWの予定 - Google 検索 というタイトルを取得できることを確認する if ($driver->getTitle() !== 'GWの予定 - Google 検索') { throw new Exception('fail'); } // キャプチャ $file = __DIR__ . '/' . __METHOD__ . "_{$browser}.png"; $driver->takeScreenshot($file); // ブラウザを閉じる $driver->close();}// chromesample_1('chrome');// firefoxsample_1('firefox'); |
実行してみると、以下のGifの様にブラウザが勝手に立ち上がって、勝手に操作されているのが分かるかと思います。
Seleniumって今更感ありますけど、この光景を見ると未だにちょっと感動します。
キャプチャもどうでしょうか。画面全体ではないですが(これどうにかならないかな。。)、保存されていると思います。
サンプル2 画面サイズを変えてみる
サンプル1で簡単にChromeとFirefoxを操作することが出来ました。
では、レスポンシブ対応を行っているようなサイトの確認はどうしたらいいでしょうか。
画面サイズを好きに変更したいところです。
はいこうします。
sample_2.php
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <?phprequire_once './vendor/autoload.php';use Facebook\WebDriver\Remote\RemoteWebDriver;use Facebook\WebDriver\Remote\DesiredCapabilities;use Facebook\WebDriver\WebDriverExpectedCondition;use Facebook\WebDriver\WebDriverBy;use Facebook\WebDriver\WebDriverDimension; // add/** * selenium php-webdriver 実行のサンプル * @param string $browser chrome or firefox * @param array $size ['w' => xxx, 'h' => xxx] */function sample_2 ($browser, array $size){ // selenium $host = 'http://localhost:4444/wd/hub'; switch ($browser) { case 'chrome': // chrome ドライバーの起動 $driver = RemoteWebDriver::create($host, DesiredCapabilities::chrome()); break; case 'firefox': // firefox ドライバーの起動 $driver = RemoteWebDriver::create($host, DesiredCapabilities::firefox()); break; } // 画面サイズをMAXに $driver->manage()->window()->maximize(); if (isset($size['w']) && isset($size['h'])) { // サイズを指定 $dimension = new WebDriverDimension($size['w'], $size['h']); $driver->manage()->window()->setSize($dimension); } // 指定URLへ遷移 (Google) $driver->get('https://www.google.co.jp/'); // 検索Box $element = $driver->findElement(WebDriverBy::name('q')); // 検索Boxにキーワードを入力して $element->sendKeys('GWの予定'); // 検索実行 $element->submit(); // 検索結果画面のタイトルが 'GWの予定 - Google 検索' になるまで10秒間待機する // 指定したタイトルにならずに10秒以上経ったら // 'Facebook\WebDriver\Exception\TimeOutException' がthrowされる $driver->wait(10)->until( WebDriverExpectedCondition::titleIs('GWの予定 - Google 検索') ); // GWの予定 - Google 検索 というタイトルを取得できることを確認する if ($driver->getTitle() !== 'GWの予定 - Google 検索') { throw new Exception('fail'); } // キャプチャ $file = __DIR__ . '/' . __METHOD__ . "_{$browser}.png"; $driver->takeScreenshot($file); // ブラウザを閉じる $driver->close();}// iPhone6のサイズ$size4iPhone6 = ['w' => 375, 'h' => 667];// chromesample_2('chrome', $size4iPhone6);// firefoxsample_2('firefox', $size4iPhone6); |
こんな感じで、WebDriverDimensionを使うと上手くいきます。
サンプル3 UAを偽装してみる
画面サイズの変更は出来たのでレスポンシブ対応しているサイトの動作確認は取れそうです。
では、レスポンシブ対応ではなく、UserAgentでSPのViewを出し分けているようなサイトの確認はどうしたらいいでしょうか。
UserAgentを偽装したいところです。
はいこうします。
sample_3.php
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105 106 | <?phprequire_once './vendor/autoload.php';use Facebook\WebDriver\Remote\RemoteWebDriver;use Facebook\WebDriver\Remote\DesiredCapabilities;use Facebook\WebDriver\WebDriverExpectedCondition;use Facebook\WebDriver\WebDriverBy;use Facebook\WebDriver\WebDriverDimension;use Facebook\WebDriver\Chrome; // add for chromeuse Facebook\WebDriver\Firefox; // add for firefox/** * selenium php-webdriver 実行のサンプル * @param string $browser chrome or firefox * @param array $size ['w' => xxx, 'h' => xxx] * @param string overrideUA true : override UserAgent */function sample_3 ($browser, array $size = [], $overrideUA = ''){ // selenium $host = 'http://localhost:4444/wd/hub'; switch ($browser) { case 'chrome': // chrome $cap = DesiredCapabilities::chrome(); if ($overrideUA === '') { break; } $options = new Chrome\ChromeOptions(); $options->addArguments(['--user-agent=' . $overrideUA]); $cap->setCapability(Chrome\ChromeOptions::CAPABILITY, $options); break; case 'firefox': // firefox $cap = DesiredCapabilities::firefox(); if ($overrideUA === '') { break; } // iPhone(iOS10) のUAをセット $profile = new Firefox\FirefoxProfile(); $profile->setPreference('general.useragent.override', $overrideUA); $cap->setCapability(Firefox\FirefoxDriver::PROFILE, $profile); break; } // ドライバーの起動 $driver = RemoteWebDriver::create($host, $cap); // 画面サイズをMAXに $driver->manage()->window()->maximize(); if (isset($size['w']) && isset($size['h'])) { // サイズを指定 $dimension = new WebDriverDimension($size['w'], $size['h']); $driver->manage()->window()->setSize($dimension); } // 指定URLへ遷移 (Google) $driver->get('https://www.google.co.jp/'); // 検索Box $element = $driver->findElement(WebDriverBy::name('q')); // 検索Boxにキーワードを入力して $element->sendKeys('GWの予定'); // 検索実行 $element->submit(); // 検索結果画面のタイトルが 'GWの予定 - Google 検索' になるまで10秒間待機する // 指定したタイトルにならずに10秒以上経ったら // 'Facebook\WebDriver\Exception\TimeOutException' がthrowされる $driver->wait(10)->until( WebDriverExpectedCondition::titleIs('GWの予定 - Google 検索') ); // GWの予定 - Google 検索 というタイトルを取得できることを確認する if ($driver->getTitle() !== 'GWの予定 - Google 検索') { throw new Exception('fail'); } // キャプチャ $file = __DIR__ . '/' . __METHOD__ . "_{$browser}.png"; $driver->takeScreenshot($file); // ブラウザを閉じる $driver->close();}// iPhone6のサイズ$size4iPhone6 = ['w' => 375, 'h' => 667];// iOS10のUA$ua4iOS = 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1';// chromesample_3('chrome', $size4iPhone6, $ua4iOS);// firefoxsample_3('firefox', $size4iPhone6, $ua4iOS); |
こんな感じで、chromeはChrome\ChromeOptionsを、firefoxはFirefox\FirefoxProfileを使うと上手くいきます。
2017/05/02 追記
上記サンプルとPHPUnitを使ったテストのサンプルをGitHubにあげました。
shimabox/sample-phpwebdriver: Test with phpunit and phpwebdriver
課題
上記サンプルでスクリーンキャプチャを撮っていますが、画面全体のキャプチャが撮れていません。このへんはググってみると解決方法がちらほらあるようなので後日調べてみます。
まとめ
今回は簡単なサンプルしか書けませんでしたが、ブラウザ上での色々な動作を結構直感的に書けるので、今まで敬遠しがちだったE2Eのテストが捗るんではないかなと思いました。
でもE2Eって最初は書けるけど、それをどうやって保守していくかが鬼門だったりするんですよね。。
とはいえ、最初の一歩が大事だと思うので、これをキッカケにE2Eのテストも(必要な箇所を見極めつつ)きちんと書いていきたいなぁというところです。
おまけ
冒頭に書いた画面にあるリンクのURL(aタグのhrefの値)を全部なめて、期待するURLになっているかどうかの確認は大体こんな感じで書きました。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | function test($url) { $host = 'http://localhost:4444/wd/hub'; $driver = RemoteWebDriver::create($host, DesiredCapabilities::firefox()); // 指定URLへ遷移 $driver->get($url); // 非同期で読み込んでいる要素とかあれば // こんな感じで要素が現れるまで待つ /* $driver->wait(10)->until( WebDriverExpectedCondition::presenceOfAllElementsLocatedBy( WebDriverBy::cssSelector('xxx') ) ); */ $elements = $driver->findElements(WebDriverBy::cssSelector('a')); foreach ($elements as $ele) { try { $href = $ele->getAttribute("href"); // $href のアサーション } catch (\Exception $e) { // ログに残しておくね $log->warning('参照エラー；' . $url); $log->warning($e->getMessage()); continue; } } $driver->close();} |
なんで例外をキャッチしているかというと、たまに以下のエラーを吐くことがあったからです。
(大量のURLをぐるぐる回したときとか)
Window not found. The browser window may have been closed.
とか
Error communicating with the remote browser. It may have died.
まぁ、このへんはログに残しておいて後で確認するという割り切りも大事です。
参考にさせて頂きました
- Home · facebook/php-webdriver Wiki
- HowTo Wait · facebook/php-webdriver Wiki
- Cheat sheet for using php webdriver (facebook/webdriver).
- Firefox 48以降でselenium-webdriverが動作しない問題とその回避策 – Qiita
- Selenium WebDriver ”Unable to connect to host” エラー – Qiita
- 【selenium】facebook/php-webdriverでUser Agentを変更する方法メモ – とりあえずphpとか
- webdriver – Selenium 2 – Setting user agent for IE and Chrome – Stack Overflow
上記内容で動作しないケースがあったら
こちらの記事を参考にして頂けると解決するかもしれません。
php-webdriverのラッパーライブラリ”screru”のバージョンをあげた – Shimabox Blog
