Edited at

Selenium テストの書き方 ボク的チートシート


1. 前提


  • Ubuntu 18.04 を使用する。

  • Chromeを使用する。

  • PHPでテストコードを記述する。


2. Getting Started

Facebook PHP-Webdriver

require_once 'vendor/autoload.php';

// 以下に限らず必要なクラスをuseする。
use Facebook\WebDriver\WebDriverExpectedCondition;
use Facebook\WebDriver\WebDriverBy;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;

$host = "http://localhost:4444/wd/hub";
$site = "テストしたいサイトのURL";

// Webドライバを初期化する。
$driver = RemoteWebDriver::create($host, DesiredCapabilities::chrome());

// テストしたいサイトにアクセスする。
$driver->get($site);

// ここにテストコードを書く。

// Webドライバを片付ける。
$driver->close();

$driver->close()はプロセスを終了させない。$driver->quit()はプロセスを終了させる。前者はウィンドウを1つ閉じる、後者はWebドライバが開いた全てのウィンドウ・タブを閉じるそう。

ブラウザを表示したくない場合(headless mode)、Webドライバの初期化はこんな感じ。

use Facebook\WebDriver\Chrome\ChromeOptions;

$options = new ChromeOptions();
$options->addArguments(["--headless", "--window-size=1366,768"]);
$capabilities = DesiredCapabilities::chrome();
$capabilities->setCapability(ChromeOptions::CAPABILITY, $options );

$driver = RemoteWebDriver::create($host, $capabilities);

Firefoxの場合、Webドライバの初期化はこんな感じ。

$driver = RemoteWebDriver::create($host, DesiredCapabilities::firefox());

// ブラウザの設定を変える場合は以下のようにする。
$capabilities = DesiredCapabilities::firefox();
$capabilities->setCapability("acceptInsecureCerts",true);
$driver = RemoteWebDriver::create($host, $capabilities);

acceptInsecureCertsをtrueにすると信頼されていないサイトへのアクセスを許可する。自己署名など不正とみなされる証明書を使用しているサイトをテストする場合などにお世話になる。

こういうのをスルーする↓

ff_err.png

Capabilityはブラウザの設定。

DesiredCapabilities::firefox(); でFirefoxのCapabilityを有するオブジェクトを生成し、setCapability()メソッドで setCapability("acceptInsecureCerts", true) の様にしてCapabilityを設定できる。


3. 画面の読み込みを待つ

まだ読み込まれていないDOMの要素にアクセスしようとするとエラーになるのでレスポンスを待ちたいことがままある。

// 最大で30秒間待つ。1000ミリ秒おきにリトライする。

$driver->wait(30, 1000)->until(
// id='xxxx'の要素が存在することを確認する。
// 存在しない場合リトライし、存在する場合次の処理に進む。
WebDriverExpectedCondition::presenceOfElementLocated(WebDriverBy::id('xxxx'))
);

// ページが読み込まれるのを待つ。

// waitの引数を省略すると最大30秒待つ。
$driver->wait()->until(
function () use ($driver) {
// executeScript()でJavascriptを実行する。
$state = $driver->executeScript("return document.readyState");
return $state == "complete";
}
);

色んな待ち方がある。

https://github.com/facebook/php-webdriver/wiki/HowTo-Wait


4. 画面サイズを操作する

// 幅を取得する(高さはいわずもがな)

$driver->manage()->window()->getSize()->getWidth();

// ウィンドウを最大化する
$driver->manage()->window()->maximize();

// ウィンドウサイズを指定する
$width = 1366;
$height = 768;
$dimension = new WebDriverDimension($width, $height);
$driver->manage()->window()->setSize($dimension);

詳しくはphp-webdriver API参照。

https://facebook.github.io/php-webdriver/master/index.html


5. フォームに入力する

type="text"などのvalueに入力するのはこうやる。

$element = $driver->findElement(WebDriverBy::id("入力したいフォーム要素のid"));

$element->clear();
$element->sendKeys("valueに入力する値");

ドロップダウンリストはこんな感じ。要素の指定方法は色々ある。

$element = $driver->findElement(WebDriverBy::cssSelector("select[id='" . $id . "'] option[value='" . $value . "']"));

$element->click();

ラジオボタンはこんな感じ。

$element = $driver->findElement(WebDriverBy::xpath('チェックしたいラジオボタンのxpath'));

$element->click();

// チェックを外すメソッドはないっぽいのでJavascriptで実現してみた
$driver->executeScript("document.getElementsByName('nameを指定')[添字を指定].checked = false");

送信はこう。

$element->submit();

その他のフォーム要素の取扱いはphp-webdriver APIを参照すればわかることでしょう。


6. スクリーンショットをとる

$driver->takeScreenshot("保存先ファイル名");

ウィンドウに表示されている部分のスクショがとれる。フォーマットはpng。

スクロールして画面全体のスクショをとりたい場合は、executeScript()とJacascriptで画面のサイズを測ったりスクロールする+ImageMagickか何かで画像を切ったり繋げたりすればよさ気。誰かがコードを公開しているかも。


7. 画面遷移

$driver->navigate()->to("遷移先のURL");


8. その他の例

サンプルコード


9. メモ


  • 必要なクラスのロードを忘れずに。

  • php-webdriver APIはWebDriverクラスのメソッドをまず押さえておく。メソッドの戻り値がオブジェクト型(WebDriverNavigationなど)の場合、更にそのクラスのAPI仕様を確認する、みたいな要領で掘っていく。

  • Webドライバの挙動はHTMLの制限(maxlengthなど)に忠実っぽいので、HTMLの制限を突破するテストはexecuteScript()とJavascriptで実装する。