End to End Test with Headless browser

AngularJSなどのFrontendまで関わっている環境をテストするためには実際にユーザが使うBrowseまで用いる必要がある。こう言う全体を考えたテストをEnd to End Test (以下E2E)と呼ぶ。

今回はE2Eテストをするとき、Headless browserを用いてみる

Headless browserとは、ホームページを画面に表示ずにコードのままで起動するBrowserである。

Headless Browserを使う時に得られる長所

レンダリングをする必要がないので速い。
多くのServer PCやVirtual machineなどはGUI packageが設置されていない場合が多い。

やり方はここを主に参考をした。
AngularJS Headless End to End Testing With Protractor and Selenium

設置

0. Intro

ここでは Ubuntu 14.04.1 LTS, Trusty Tahr を使った。

必要であるもの

JDK(JREだけ設置してもいい)

sudo apt-get install default-jdk

curl -sL https://deb.nodesource.com/setup | sudo bash -
sudo apt-get install -y nodejs

今からすること

Xvfb(X virtual frame buffer)を設置
Browser(Chrome, Firefox, PhantomJS)を設置
Seleniumを設置
Protractorでテスト

Xvfb

仮装の画面を作ってくれる。ChromeとFirefoxは描画のためGtk(GUI Library)を要求するので起動ができない。ここでXvfbを使うことで解決できる。 ####Selenium ブラウザでの操作を自動的にしてくれる ####PhantomJS WebkitベースのHeadlessBrowserである。元々からHeadlessbrowserとして使うためにChromeとかFireforよりはやい

1. Xvfb

sudo apt-get install xvfb

その後に次のファイルを/etc/init.d/xvfb作って次のコードを入れる。

#!/bin/bash
#
# Xvfb init script for Debian-based distros.
#
# The display number used must match the DISPLAY environment variable used
# for other applications that will use Xvfb. e.g. ':10'.
#
# From: https://github.com/gmonfort/xvfb-init/blob/master/Xvfb
#
### BEGIN INIT INFO
# Provides:          xvfb
# Required-Start:    $remote_fs $syslog
# Required-Stop:     $remote_fs $syslog
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: Start/stop custom Xvfb
# Description:       Enable service provided by xvfb
### END INIT INFO

NAME=Xvfb
DESC="$NAME - X Virtual Frame Buffer"
SCRIPTNAME=/etc/init.d/$NAME
XVFB=/usr/bin/Xvfb
PIDFILE=/var/run/${NAME}.pid

# Using -extension RANDR doesn't seem to work anymore. Firefox complains
# about not finding extension RANDR whether or not you include it here.
# Fortunately this is a non-fatal warning and doesn't stop Firefox from working.
XVFB_ARGS=":10 -extension RANDR -noreset -ac -screen 10 1024x768x16"

set -e

if [ `id -u` -ne 0 ]; then
  echo "You need root privileges to run this script"
  exit 1
fi

[ -x $XVFB ] || exit 0

. /lib/lsb/init-functions

[ -r /etc/default/Xvfb ] && . /etc/default/Xvfb

case "$1" in
  start)
    log_daemon_msg "Starting $DESC" "$NAME"
    if start-stop-daemon --start --quiet --oknodo --pidfile $PIDFILE \
          --background --make-pidfile --exec $XVFB -- $XVFB_ARGS ; then
      log_end_msg 0
    else
      log_end_msg 1
    fi
    log_end_msg $?
    ;;

  stop)
    log_daemon_msg "Stopping $DESC" "$NAME"
    start-stop-daemon --stop --quiet --oknodo --pidfile $PIDFILE --retry 5
    if [ $? -eq 0 ] && [ -f $PIDFILE ]; then
      /bin/rm -rf $PIDFILE
    fi
    log_end_msg $?
    ;;

  restart|force-reload)
    log_daemon_msg "Restarting $DESC" "$NAME"
    $0 stop && sleep 2 && $0 start
    ;;

  status)
    status_of_proc -p $PIDFILE $XVFB $NAME && exit 0 || exit $?
    ;;

  *)
    log_action_msg "Usage: ${SCRIPTNAME} {start|stop|status|restart|force-reload}"
    exit 2
    ;;
esac
exit 0

権限を修正してDaemonに追加する

sudo chown root:root /etc/init.d/xvfb
sudo chmod a+x /etc/init.d/xvfb
sudo update-rc.d xvfb defaults

それ以外に、Chrome & Firefoxに必要であるパッケージ

sudo apt-get install x11-xkb-utils xfonts-100dpi xfonts-75dpi
sudo apt-get install xfonts-scalable xserver-xorg-core
sudo apt-get install dbus-x11

PhantomJSを使う場合これも必要である。

sudo apt-get install libfontconfig1-dev

2. Browserを設置する

Browserを設置する

sudo apt-get install chromium-browser firefox
sudo npm install -g phantomjs

ChromiumじゃなくてChromeが設置したい場合

wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
sudo apt-get update
sudo apt-get install google-chrome-stable

Chrome Web Driverを設置する
(Firefoxは次に設置するSeleniumに、PhantomJSはパッケージ内にWeb driverが含まれている。)

sudo npm install -g chromedriver

3. Seleniumを設置する

sudo /usr/sbin/useradd -m -s /bin/bash -d /home/selenium selenium
sudo mkdir /usr/local/share/selenium
wget http://selenium-release.storage.googleapis.com/2.44/selenium-server-standalone-2.44.0.jar
sudo mv selenium-server-standalone-2.44.0.jar /usr/local/share/selenium
sudo chown -R selenium:selenium /usr/local/share/selenium
sudo mkdir /var/log/selenium
sudo chown selenium:selenium /var/log/selenium

次に、/etc/init.d/seleniumというファイルを作って次のコードをいれる。

#!/bin/bash
#
# Selenium standalone server init script.
#
# For Debian-based distros.
#
### BEGIN INIT INFO
# Provides:          selenium-standalone
# Required-Start:    $local_fs $remote_fs $network $syslog
# Required-Stop:     $local_fs $remote_fs $network $syslog
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: Selenium standalone server
### END INIT INFO

DESC="Selenium standalone server"
USER=selenium
JAVA=/usr/bin/java
PID_FILE=/var/run/selenium.pid
JAR_FILE=/usr/local/share/selenium/selenium-server-standalone-2.44.0.jar
LOG_FILE=/var/log/selenium/selenium.log

DAEMON_OPTS="-Xmx500m -Xss1024k -jar $JAR_FILE -log $LOG_FILE"
# See this Stack Overflow item for a delightful bug in Java that requires the
# strange-looking java.security.egd workaround below:
# http://stackoverflow.com/questions/14058111/selenium-server-doesnt-bind-to-socket-after-being-killed-with-sigterm
DAEMON_OPTS="-Djava.security.egd=file:/dev/./urandom $DAEMON_OPTS"

# The value for DISPLAY must match that used by the running instance of Xvfb.
export DISPLAY=:10

# Make sure that the PATH includes the location of the ChromeDriver binary.
# This is necessary for tests with Chromium to work.
export PATH=$PATH:/usr/local/bin

case "$1" in
    start)
        echo "Starting $DESC: "
        start-stop-daemon -c $USER --start --background \
            --pidfile $PID_FILE --make-pidfile --exec $JAVA -- $DAEMON_OPTS
        ;;

    stop)
        echo  "Stopping $DESC: "
        start-stop-daemon --stop --pidfile $PID_FILE
        ;;

    restart)
        echo "Restarting $DESC: "
        start-stop-daemon --stop --pidfile $PID_FILE
        sleep 1
        start-stop-daemon -c $USER --start --background \
            --pidfile $PID_FILE  --make-pidfile --exec $JAVA -- $DAEMON_OPTS
        ;;

    *)
        echo "Usage: /etc/init.d/selenium-standalone {start|stop|restart}"
        exit 1
    ;;
esac

exit 0

####他のVersionのSelenium serverを設置する場合 Seleniumダウンロードサイトからselenium-server-standalone-*.*.*.jarのリンクを探してwgetでダウンロードする。File名が変わるので/etc/init.d/seleniumのJAR_FILE部分を修正すればいい。

権限を修正してDaemonに追加する

sudo chown root:root /etc/init.d/selenium
sudo chmod a+x /etc/init.d/selenium
sudo update-rc.d  selenium defaults

4. Protractorでテストする

sudo npm -g install protractor httpster

簡単にテストをするためProtractorとhttpsterを設置する。

####Protractor AngularJSのE2E Framework ####Httpster 簡単にHtml fileだけでサーバを立ち上げることができる。

先ずは、テストをするためのページをつくる index.html

<!DOCTYPE html>
<html ng-app="hello-protractor">
	<head>
		<title>hello</title>
	</head>
	<body>
		<h1>Yolo</h1>
	</body>
</html>

test/test.conf.jsで保存する

exports.config = {

  seleniumAddress: 'http://0.0.0.0:4444/wd/hub',
  specs: [
    'spec/*.spec.js'
  ],
  // capabilities: {
  //   browserName: 'phantomjs',
  //   version: '',
  //   platform: 'ANY'
  // },
  capabilities: {
    browserName: 'chrome',
    version: '',
    platform: 'ANY'
  },
//   capabilities: {
//     browserName: 'firefox',
//     version: '',
//     platform: 'ANY'
//   },

  baseUrl: 'http://localhost:3333/index.html',
};

test/spec/index.spec.js

describe("hello-protractor", function () {
  describe("index", function () {
    it("see title hello", function () {
      browser.get('/#');
      expect(browser.getTitle()).toBe('hello');
    });
  });
});

テストはindex.htmlが入っているフォルダーでhttpsterをターミナルで打ったらすぐにサーバを立ち上げてくれる。その後、protractor test/test.conf.jsでテストをすればいい。

Rokt33r/e2e.md