Chrome, Safari の開発者モードで Selenium を実行

この記事は Selenium/Appium Advent Calendar 2015 の23日目の記事です。

---

スマートフォン向けの Web UI テストを行う為のツールとして，Chrome Developer Tool, Safari Responsive Design Mode（以下まとめて『開発者モード』）があります．

※本当の開発者モードは、DOM とか Network とかその他色々……っていう細かい突っ込みは無しでお願い致します。

これ単体だけでも非常に便利で，もはやスマートフォン向け Web 開発のためには欠かせないツールになっていますね．

開発者モードは以下のようなことをやってくれるツールです。

1. 端末の画面解像度（例：幅1080ｘ高1920）をシミュレーションした上で，画面上に表示できる程度の縮尺（50%とか）で表示
2. サーバーにリクエストする際の User Agent 文字列を，モバイルブラウザ（Android Chrome や iOS Safari）のそれに
3. onmousedown 等のイベントを， ontouchstart 等の対応するイベントに読み替える

次がそれぞれのサンプルイメージです．

Chrome Developer Tool (Windows)

（User Agent 文字列として，iPhone6 Safari のものを渡していますので，SP 版の検索結果ページが見えます）

Safari Responsive Design Mode (Mac)

User Agent 変更など，やっていることは同じです．
Minimum で Apple っぽいデザインのレスポンシブデザインモードです．

Selenium で開発者モードを使う

Web ブラウザの UI 自動化と言えば，Selenium WebDriver です．

Selenium で Web ページテストをするときに，開発者モードで指定のページを開くことができれば，今まで SP 端末テストのために端末をかき集めて，WebDriver をインストールして……というテストを，ある程度不要にできます．

Selenium Web Driver から，Chrome 開発者モード（Developer Tool）を起動する

Chrome Web Driver には，開発者モード指定が付いています．

こちらとかにも記事があります．http://qiita.com/okitan/items/ee6f5094319b964e84e1

Selenium Web Driver から，Safari 開発者モード（Responsive Design Mode）を起動する

Elcapitan から（？）実装された Safari のレスポンシブデザインモードですが，現時点ではまだ Safari Web Driver から起動オプションとして指定することができません．

Responsive Design Mode の入り口は `Option + Command + R" なので，ウィンドウ起動後にキーを送ってやるといいです．
Java であれば，以下の用にすれば Responsive Design Mode の WebDriver のできあがりです．

ResponsiveDesignMode.java

import java.awt.AWTException;
import java.awt.Robot;
import java.awt.event.KeyEvent;
import java.lang.Exception;

import lombok.Cleanup;

import org.openqa.selenium.safari.SafariDriver;

public class SafariCustomDriverProvider {
  public static void main(String[] args) throws Exception {
    // Safari Driver 起動
    @Cleanup("quit")
    final SafariDriver driver = new SafariDriver();

    // Safari Window を Screen Top に
    Runtime.getRuntime()
      .exec("open -a /Applications/Safari.app/Contents/MacOS/Safari")
      .waitFor();

    // Option + Command + R で Responsive Desing モード起動
    try {
      final Robot robot = new Robot();

      robot.keyPress(KeyEvent.VK_ALT);
      robot.keyPress(KeyEvent.VK_META);
      robot.keyPress(KeyEvent.VK_R);
      robot.delay(100);
      robot.keyRelease(KeyEvent.VK_ALT);
      robot.keyRelease(KeyEvent.VK_META);
      robot.keyRelease(KeyEvent.VK_R);
    } catch (AWTException e) {
      throw new RuntimeException(e);
    }

    driver.get("http://example.com/");
  }
}

これで次の結果が得られます．

終わりに

開発者ツールの機能が上がることは，開発時にはもちろん，自動化にとっても嬉しいことです．
Selenium Web Driver はスマートフォン端末での Web UI テストを簡単にしましたが，Selenium スクリプトを記述するのは PC 上である事を考えると，実際の CI に組み込んだタイミングではともかく，開発時はローカル環境で試せるに越したことはありません．

Chrome, Safari とも，開発者ツールを起動する手間は初期化のタイミングでホンの数行のコードを書くだけですので，日々の開発環境に組み込んでみてはいかがでしょうか．