Selenium × PHP でテスト自動化！【環境構築編】

2018/07/06 - システムテスト, プログラミング手法, プログラム言語, 未分類, 運用管理, 開発ツール automation, php, selenium

はじめに

みなさんこんにちは、プロダクト開発本部の亀梨です。
普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う
統合プラットフォームの開発を担当しています。

テスト自動化の背景

わたくしが担当するXmediaOneでは品質担保のために①コードベース（ScalaTest）の単体テスト②人力での端末操作の単体テスト・シナリオテストを行っていますが、高い品質を維持しようとすると②の工数・負荷が高くなり日々の業務を圧迫しています。
そこで、Seleniumを使ってテスト自動化することで工数削減→さらなる品質強化のためにテストカバレッジ向上をしていこうということになりました。

今回はSelenium導入にあたっての環境構築の手順を紹介したいと思います。
PCはMacでPHPプリインストール済みであることを前提としています。

環境構築の手順

それではさっそく始めていきましょー。

0. テストを実行するディレクトリを作成する

適当なディレクトリを作ります。

$ mkdir selenium
$ cd selenium

1 2	$ 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

$ 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

1	$ 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

$ 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

$ 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

$ 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

$ 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

$ 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 &

1 2	$ jobs [1]+ Running selenium-server -port 4444 &

はい、これで環境構築は完了です。

それでは早速テストコードを実行してみましょう

実際に動作するかを以下のテストコードで試してみましょう。

$ vim test.php

1	$ 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();
}

<?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)

$ jobs

[1]+ Running selenium-server -port 4444 & (wd: ~/selenium)

$ kill %1