Selenium4を使って自宅のPC(WindowsとMac)でクロスブラウザテスト環境を作ったのでまとめ
Web ブラウザの操作を自動化するためのフレームワーク。
Webサイトによると、大きく3つの機能?がある。
今回は、Selenium WebDriver(PHP)とSelenium Gridを使ってクロスブラウザテスト環境を構築した。
具体的には以下のOS/ブラウザの組み合わせのテストができる環境を構築した。

- Selenium WebDriverを使って実行された命令を、Hubが受け取り、対象となるNodeに対して実際の実行を命令する。
- Appiumはモバイルアプリの操作を自動化するフレームワーク。今回スマフォを使うので導入してみた。
- iPhoneはMacにUSBで接続、Pixel4は無線で接続している。
- iPhoneを操作するためにMac側にAppiumを入れたので、Pixel4もMacに接続した。
利用したアプリケーションのバージョン
環境構築方法
以下をダウンロードして、同じディレクトリに置く。
デフォルトの設定ではSafariの自動操作はできない。以下を参考に自動操作をできるようにする。
Appiumをインストールする
AppiumのServerの項を参考にインストールする (Node.jsのインストールが事前に必要)。
SeleniumとWebDriverをダウンロードする
以下をダウンロードして、同じディレクトリに置く。
Gridを立ち上げる
事前準備
Macとスマフォ(iPhoneとPixel4)を接続する
以下を参考にAndroidを接続する。adp pair
でペアリングをしてから、‘adb connect`で接続をすればOK。
iPhoneはUSBで接続する(ワイヤレスデバッグができるかどうかは試したことがない)。
Gridを立ち上げる
WindowsでHubを起動した後、Windows、MacそれぞれでNodeを立ち上げHubに接続する。
Seleniumを保存したフォルダで以下のコマンドを実行する。
java -jar selenium-server-<バージョン>.jar hub --host <PCのIPアドレス>
WSL2を使っている場合、PCにIPアドレスが複数割り当てられているはずなので、--host
でMacからアクセスできるIPアドレスを指定する。
起動したら以下のようなログが表示される。太字のURLはNodeを起動する際に必要なものなのでメモなどしておく。
07:47:20.853 INFO [UnboundZmqEventBus.] - Sockets created
07:47:21.863 INFO [UnboundZmqEventBus.] - Event bus ready
07:47:22.358 INFO [Hub.execute] - Started Selenium Hub x.x.x (revision yyyyyy): http://zzz.zzz.zzz.zzz:4444
Windows、MacそれぞれでNodeを立ち上げる。
事前準備の項でダウンロードしたJARやWebDriverを保存しているフォルダで、以下のコマンドを実行する。
Seleniumが利用できるWebDriverを見つけてくれるからドライバを指定をする必要がない。便利。
java -jar selenium-server-<バージョン>.jar node --hub <HubのURL>
パラメータ調整したい場合は以下を参考に。
Appiumを起動する
Appiumの設定ファイルを用意する。ファイル名は適当でよい。
{
"capabilities": [
{
"platform": "MAC",
"browserName": "safari",
"language": "ja",
"maxInstances": 1
},
{
"platform": "IOS",
"deviceName": "iPhone X",
"browserName": "safari",
"language": "ja",
"maxInstances": 1
},
{
"platform": "Android",
"deviceName": "Pixel 4",
"browserName": "chrome",
"language": "ja",
"platform": "Android",
"maxInstances": 1
}
],
"configuration":
{
"cleanUpCycle":2000,
"timeout":30000,
"maxSession": 1
}
}
chromedriverのあるフォルダで以下のコマンドを実行する。
ANDROID_HOME=<Android SDKのパス> appium --chromedriver-executable ./chromedriver --nodeconfig <設定ファイルのパス>
Android SDKのパスは /Users/<ユーザ名>/Library/Android/sdk
になるハズ。
Relayの設定は多くなるので設定ファイルにする。ファイル名は適当でよい。
configsにはAppiumの設定ファイルで指定したcapabilitiesと同じ内容を記載する。
[node]
detect-drivers = false
[relay]
url = "http://localhost:4723/wd/hub"
status-endpoint= "/status"
configs = [
"2", "{\"browserName\": \"chrome\", \"platformName\": \"Android\"}",
"2", "{\"browserName\": \"safari\", \"platformName\": \"IOS\"}",
"2", "{\"browserName\": \"safari\", \"platformName\": \"MAC\"}"
]
以下のコマンドを実行する。
java -jar ../selenium-server-4.4.0.jar node --hub http://192.168.0.5:4444 --config <作成した設定ファイルのパス>
動作確認
<HubのURL>/ui
例(http://192.168.0.5:4444/ui)に接続すると、現在の状況が分かる。

12は同時実行可能なセッションの数。大きすぎる気もするが自分で使うだけなのでまぁよしとする。
ブラウザを操作する
PHPを使ってWindows/Mac/iPhone/Pixelの4つのデバイスでブラウザを開いてみる。
事前準備
PHPとComposerをインストールする。
(頑張って…)
実行する
以下のコードを保存する。
<?php
require __DIR__ . '/vendor/autoload.php';
use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Remote\WebDriverBrowserType;
use Facebook\WebDriver\Remote\WebDriverCapabilityType;
use Facebook\WebDriver\WebDriverPlatform;
$serverUrl = 'http://192.168.0.5:4444';
$browserAndPlatforms = [
"Windows - Edge" => [
WebDriverCapabilityType::BROWSER_NAME => WebDriverBrowserType::MICROSOFT_EDGE,
WebDriverCapabilityType::PLATFORM => WebDriverPlatform::WINDOWS,
],
"Windows - Chrome" => [
WebDriverCapabilityType::BROWSER_NAME => WebDriverBrowserType::CHROME,
WebDriverCapabilityType::PLATFORM => WebDriverPlatform::WINDOWS,
],
"Mac - Safari" => [
WebDriverCapabilityType::BROWSER_NAME => WebDriverBrowserType::SAFARI,
WebDriverCapabilityType::PLATFORM => WebDriverPlatform::MAC,
"appium:automationName" => "Safari",
],
"Android - Chrome" => [
WebDriverCapabilityType::BROWSER_NAME => WebDriverBrowserType::CHROME,
WebDriverCapabilityType::PLATFORM => WebDriverPlatform::ANDROID,
],
"iPhone - Safari" => [
WebDriverCapabilityType::BROWSER_NAME => WebDriverBrowserType::SAFARI,
WebDriverCapabilityType::PLATFORM => "IOS",
"appium:automationName" => "Safari",
"appium:nativeWebTap" => "true",
"appium:bundleId" => "com.apple.mobilesafari",
],
];
foreach ($browserAndPlatforms as $name => $desiredCapabilities) {
print("WE ARE NOW RUSHING INTO ${name}\n");
$driver = RemoteWebDriver::create(
$serverUrl,
$desiredCapabilities
);
$driver->get('https://www.google.com');
sleep(3);
$driver->quit();
}
プログラムを保存したフォルダで、以下のコマンドを実行する。WebDriverがインストールされる。
composer require php-webdriver/webdriver
同じくプログラムを保存したフォルダで、以下のコマンドを実行する。「ブラウザを起動、Googleのトップページにアクセス、数秒後にブラウザが閉じる」がデバイスごと繰り返されるはず。
php ./<保存したファイル名>