はじめに
みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。
テスト自動化の背景
わたくしが担当するXmediaOneでは品質担保のために①コードベース(ScalaTest)の単体テスト②人力での端末操作の単体テスト・シナリオテストを行っていますが、高い品質を維持しようとすると②の工数・負荷が高くなり日々の業務を圧迫しています。 そこで、Seleniumを使ってテスト自動化することで工数削減→さらなる品質強化のためにテストカバレッジ向上をしていこうということになりました。
今回はSelenium導入にあたっての環境構築の手順を紹介したいと思います。 PCはMacでPHPプリインストール済みであることを前提としています。
環境構築の手順
それではさっそく始めていきましょー。
0. テストを実行するディレクトリを作成する
適当なディレクトリを作ります。
$ mkdir selenium $ cd selenium
1. selenium-serverのインストール
Homebrew経由でインストール
$ brew install selenium-server-standalone ==> Downloading https://selenium-release.storage.googleapis.com/3.11/selenium-server-standalone-3.11.0.jar ######################################################################## 100.0% ==> Caveats To have launchd start selenium-server-standalone now and restart at login: brew services start selenium-server-standalone Or, if you don't want/need a background service you can just run: selenium-server -port 4444 ==> Summary 🍺 /usr/local/Cellar/selenium-server-standalone/3.11.0: 5 files, 22.3MB, built in 4 seconds
2. 各ブラウザ用ドライバのインストール
SeleniumServer標準ではSafariに対応済み それ以外(ChromeとかFirefox)にはドライバが必要
Selenium Google Chrome Driver
ChromeDriver - WebDriver for Chrome downloads zip file
Selenium Firefox Driver
ここから最新版をダウンロードする。 本記事執筆時点だとv0.20.1の「 geckodriver-v0.20.1-macos.tar.gz」をダウンロード。 ダウンロードしたらファイルを解凍する。
$ tar zxvf geckodriver-v0.20.1-macos.tar.gz
各ドライバをダウンロードしたらファイルを移動
ダウンロードしたドライバをカレントディレクトリに移動する
$ mv /Users/username/Downloads/chromedriver ./ $ mv /Users/username/Downloads/geckodriver ./ $ ls -la total 31920 drwxr-xr-x 7 username staff 238 5 24 17:42 . drwxr-xr-x+ 55 username staff 1870 5 24 17:42 .. -rwxr-xr-x@ 1 username staff 11917200 4 20 16:39 chromedriver -rwxr-xr-x@ 1 username staff 4404680 4 8 21:44 geckodriver
3. PHPでWebブラウザを操作するために必要なライブラリ「facebook-webdriver」のダウンロード
Composerのダウンロード
ComposerはPHPのパッケージ管理ツールです。
$ curl -sS https://getcomposer.org/installer | php All settings correct for using Composer Downloading... Composer (version 1.6.5) successfully installed to: /Users/kamenashikou/selenium/composer.phar Use it: php composer.phar
facebook-webdriverのインストール
Facebookさんが作ってくれたツールです。少し時間がかかります。
$ php composer.phar require facebook/webdriver Using version ^1.6 for facebook/webdriver ./composer.json has been created Loading composer repositories with package information Updating dependencies (including require-dev) Package operations: 2 installs, 0 updates, 0 removals - Installing symfony/process (v4.1.1): Downloading (100%) - Installing facebook/webdriver (1.6.0): Downloading (100%) facebook/webdriver suggests installing ext-SimpleXML (For Firefox profile creation) Writing lock file Generating autoload files
4. ここでディレクトリ構成を確認
以下のようになっていれば成功です。
$ ls -la total 38368 drwxr-xr-x 8 username staff 272 7 5 09:49 . drwxr-xr-x+ 95 username staff 3230 7 5 09:35 .. -rwxr-xr-x@ 1 username staff 12093844 6 7 13:25 chromedriver -rw-r--r-- 1 username staff 64 7 5 09:49 composer.json -rw-r--r-- 1 username staff 4447 7 5 09:49 composer.lock -rwxr-xr-x 1 username staff 1849094 7 5 09:48 composer.phar -rwxr-xr-x@ 1 username staff 5685072 6 16 05:56 geckodriver drwxr-xr-x 6 username staff 204 7 5 09:49 vendor
5. Selenium Server の起動
バックグラウンドで起動
以下コマンドを実行します。
$ selenium-server -port 4444 & [1] 33415 C02SY1XFGTFJ:selenium username$ 18:04:14.512 INFO [GridLauncherV3.launch] - Selenium build info: version: '3.11.0', revision: 'e59cfb3' 18:04:14.513 INFO [GridLauncherV3$1.launch] - Launching a standalone Selenium Server on port 4444 2018-05-24 18:04:14.624:INFO::main: Logging initialized @441ms to org.seleniumhq.jetty9.util.log.StdErrLog 18:04:14.882 INFO [SeleniumServer.boot] - Welcome to Selenium for Workgroups.... 18:04:14.882 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 4444
ctrl + c でコマンドプロンプトに戻ったら、jobsコマンドを実行するとバックグラウンドでselenium serverが起動しているのが確認できます。
$ jobs [1]+ Running selenium-server -port 4444 &
はい、これで環境構築は完了です。
それでは早速テストコードを実行してみましょう
実際に動作するかを以下のテストコードで試してみましょう。
$ vim test.php
<?php require_once './vendor/autoload.php'; use Facebook\WebDriver\Remote\RemoteWebDriver; use Facebook\WebDriver\Remote\DesiredCapabilities; use Facebook\WebDriver\WebDriverExpectedCondition; use Facebook\WebDriver\WebDriverBy; // テスト実行 sample(); /** * selenium facebook-webdriver 実行のサンプル */ function sample() { // selenium $host = 'http://localhost:4444/wd/hub'; // chrome ドライバーの起動 $driver = RemoteWebDriver::create($host,DesiredCapabilities::chrome()); // 指定URLへ遷移 (Google) $driver->get('https://www.google.co.jp/'); // スクリーンショットを撮って保存する $file = __DIR__ . '/' . __METHOD__ . ".png"; $driver->takeScreenshot($file); // ブラウザを閉じる $driver->close(); }
では実行してみましょう。
はい、無事に実行できてスクリーンショット画像も保存されていますね。テスト実行は終了です。 最後に、Seleniumサーバーを必ず終了させましょう。
$ jobs [1]+ Running selenium-server -port 4444 & (wd: ~/selenium) $ kill %1 $ jobs [1]+ Exit 143 selenium-server -port 4444 (wd: ~/selenium)
以上、環境構築でした
これで準備は整いましたので、これからテストケースをじゃんじゃん書いていきたいと思います。 テストコードの知見が貯まってきたらまた投稿したいと思います。それではまたー。