Selenium4を使って自宅のPC(WindowsとMac)でクロスブラウザテスト環境を作ったのでまとめ

Seleniumとは?

Web ブラウザの操作を自動化するためのフレームワーク。 Webサイトによると、大きく3つの機能?がある。

Selenium WebDriver
- ブラウザの操作をプログラムで制御できる
Selenium IDE
- ブラウザの操作を記録、再生できる
Selenium Grid
- ブラウザの操作をリモートの端末に対して並行実行できる

今回は、Selenium WebDriver(PHP)とSelenium Gridを使ってクロスブラウザテスト環境を構築した。具体的には以下のOS／ブラウザの組み合わせのテストができる環境を構築した。

Selenium WebDriverを使って実行された命令を、Hubが受け取り、対象となるNodeに対して実際の実行を命令する。
Appiumはモバイルアプリの操作を自動化するフレームワーク。今回スマフォを使うので導入してみた。
- AppiumとSelenium Hubとの接続は、Selenium Nodeを経由して行う。(SeleniumのRelayという機能を使っている)
iPhoneはMacにUSBで接続、Pixel4は無線で接続している。
iPhoneを操作するためにMac側にAppiumを入れたので、Pixel4もMacに接続した。

利用したアプリケーションのバージョン

Selenium 4.4.0 (2022/11/23時点での最新は4.6.0)
Appium 1.22.3
Microsoft Edge 107.0.1418.56
Chrome 107.0.5304.122 (Windows)
Chrome 107.0.5304.105 (Android)
Safari 14.1.2
Selenium WebDriver(PHP) 1.13.1

環境構築方法

Windows

以下をダウンロードして、同じディレクトリに置く。

Selenium4
- 2022/11/23時点では4.6.0
ChromeDriver
- ChromeのバージョンによってダウンロードするDriverが異なるので注意
MsEdgeDriver
- Stableでいいと思う

Mac

Android Studioをインストールする

Android Studio

Safariの自動操作を可能にする

デフォルトの設定ではSafariの自動操作はできない。以下を参考に自動操作をできるようにする。

Appiumをインストールする

AppiumのServerの項を参考にインストールする (Node.jsのインストールが事前に必要)。

SeleniumとWebDriverをダウンロードする

以下をダウンロードして、同じディレクトリに置く。

Selenium4
- 2022/11/23時点では4.6.0
ChromeDriver
- ChromeのバージョンによってダウンロードするDriverが異なるので注意

Gridを立ち上げる

事前準備

Macとスマフォ(iPhoneとPixel4)を接続する

以下を参考にAndroidを接続する。adp pairでペアリングをしてから、‘adb connect`で接続をすればOK。

iPhoneはUSBで接続する(ワイヤレスデバッグができるかどうかは試したことがない)。

Gridを立ち上げる

WindowsでHubを起動した後、Windows、MacそれぞれでNodeを立ち上げHubに接続する。

【Windowsのみ】Selenium 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

Selenium Nodeを起動する

Windows、MacそれぞれでNodeを立ち上げる。

Windows

事前準備の項でダウンロードしたJARやWebDriverを保存しているフォルダで、以下のコマンドを実行する。 Seleniumが利用できるWebDriverを見つけてくれるからドライバを指定をする必要がない。便利。

java -jar selenium-server-<バージョン>.jar node --hub <HubのURL>

パラメータ調整したい場合は以下を参考に。

CLI options in the Selenium Grid | Selenium

Mac

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 になるハズ。

Selenium Nodeを起動する

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", // safaridriverを使うのに必要だった気がする?
    ],
    "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 ./<保存したファイル名>

うっかりアジャイルの推進側に回っちゃった人の日記

ご自宅で作るSelenium4を使ったクロスブラウザテスト環境

Seleniumとは?

利用したアプリケーションのバージョン

環境構築方法

Windows

Mac

Android Studioをインストールする

Safariの自動操作を可能にする

Appiumをインストールする

SeleniumとWebDriverをダウンロードする

Gridを立ち上げる

事前準備

Macとスマフォ(iPhoneとPixel4)を接続する

Gridを立ち上げる

【Windowsのみ】Selenium Hubを起動する

Selenium Nodeを起動する

Windows

Mac

Appiumを起動する

Selenium Nodeを起動する

動作確認

ブラウザを操作する

事前準備

実行する