Furyu

[フリュー公式] Tech Blog

フリュー株式会社の技術ブログです

2012年10月23日

Selenium WebDriverを利用したテスト その1

初めまして。ソフトウェア開発部の川下といいます。

今回は Selenium WebDriver(Selenium 2.0)を利用したテストの自動化についてです。

Seleniumは2.0系でWebDriverを統合して、より柔軟なテストができるようになりました。

javaのユニットテストから実行する方法をここでは紹介します。


WebDriverの使い方をここでは3つに分けて紹介させてもらいます。

1.WebDriverを生成する

2.指定のURLへアクセスする

3.結果を処理する

です。


1. WebDriverを生成する。

WebDriverはブラウザ操作テスト用に切り出された共通インターフェースです。

以下の3種類の処理を行うためのメソッドを提供しています。

1.Control of the browser itself(ブラウザ事態の制御)

2.Selection of WebElements(WebElementsの選択 ※WebElementsに関しては後述)

3.Debugging aids (デバッグ)

実装事体は各ブラウザごとに異なっています。

エミュレートしたいブラウザごとに対応するDriverを選択します。

Firefox -> FireFoxDirever

Chrome -> ChromeDriver

InternetExplorer -> InternetExplorerDriver

といった感じです。

また、ブラウザの細かい挙動の違いを気にしないのであれば、

HtmlUnitDriver (最軽量/高速)を使うこともできます。

WebDriverの生成は以下のように行います。

proxy(proxy-addreses, proxy-port)のところは必要なら設定してください。


2. 指定のURLへアクセスする

cookieを利用する場合は、以下のようにセットできます。


3. 結果を処理する

WebDriverでアクセスすると、結果として、

DOMの要素(を操作するための WebElementクラスのインスタンス)

現在のURL

HTMLソース

タイトル

等を取得することができます。


JUnitから走らせてみる

次にJUnitから走らせてみましょう。

テスト用のデータを作成して登録 → 画面に表示されていることをアクセスして確認する

ようなテストを想定しています

JUnitから走らせるために今回は2つクラスを用意します。

サンプル実装なので、URLや未実装の部分は必要に応じて置き換えてください。

あとはEclipseのコンソールなどから、JUnitを実行してもらうと

自動的にブラウザが立ち上がり、試験が実施できます。

(※ 今回はhtmlソースに指定した文字列が含まれているか でチェックしています。)

とても便利なので、ぜひ一度、試してみてください。


2012年10月9日

kunihira

play-velocity-plugin公開!

皆様、お久しぶりです。

国平です。

さてこの度、弊社で開発し実際のプロダクト上で利用されているplay-velocity-pluginをオープンソース化することができました。

play-velocity-plugin

弊社では初のOSSプロジェクトとなります。

play-velocity-pluginはその名の通り、Play!Framework2 上で動作するVelocityTemplateプラグインです。

今日は、このプロジェクトのメイン開発者直々の押し付…ぢゃない、指名を受けてプラグインの紹介をさせて頂きます。

前回の記事にあります通り、弊社では現在ソーシャルゲーム開発において、Play!Framework2とScalaを用いた開発を行なっています。

そのことについては、粕谷がPlay!Framework勉強会第3回で導入事例を発表させていただきました。

Play勉強会 第3回 from Daisuke Kasuya

この資料でも、play-velocity-pluginの公開については言及されていますが、ついに実現しました。

今回は、このプラグインを導入によるメリットについて宣伝させていただこうと思います。

なぜScalaTemplateをやめたのか

Play!Frameworkは基本的にはフルスタックのWebフレームワークです。

そのため、テンプレートエンジンについてもデフォルトでScalaTemplateを利用することができます。

Play! The template engine

このScalaTemplateの特長として、

  • Scalaの強力な構文が利用できる
  • コンパイルされることによりバグが回避される

といったメリットがあります。

特に、コンパイル時にきっちりと変数がセットされることや、変数の型、メソッドやフィールド呼び出しの記述ミスがチェックされるので、バグの入り込むスキを少なくしてくれます。

しかし、粕谷の資料でも言及されているとおりトレードオフとして、

  • Scala構文がデザイナによる変更の容易性を下げている 
  • HTMLのちょっとした変更でもコンパイルが要求される

という問題が発生してしまいます。

その他にも、ScalaTemplate採用プロジェクトがある程度進行した時点で起こった問題として、テンプレートファイルがすべてコンパイル対象となってしまうので、コンパイルの際に非常に多くのマシンリソースが要求されてしまいました。

3年前のPCのマシンスペックではコンパイルに10~15分かかることもあったようです。

更には、デフォルトのJVMへのメモリ割り当てでは容量が足りずコンパイルが失敗するため、ビルドスクリプトを直接編集して利用メモリを増やすという対応も必要となりました。

このような問題があり弊社で以前から利用実績のあるVelocityをテンプレートエンジンとして採用することとなりました。

Velocityの特長

VelocityはApacheFoundationで公開されているJavaベースのテンプレートエンジンです。

Apache Velocity

もともと、弊社ではPlay!Frameworkの採用以前からS2ファミリーを利用しており、テンプレートエンジンとしてS2Velocityを利用していました。

このVelocityなのですが、特長として

  • スクリプト言語ライクに動作する(コンパイル不要) 
  • Webデザイナにも変更がしやすい(構文がわかりやすい)

という特長があります。

もちろん、トレードオフとして、

  • バグチェックが難しい
  • 記述が冗長になる

という問題点もあります。

また、Velocityはレンダリング速度が遅いのではないのかという懸念もありましたが、Velocityを採用する際のベンチマークからも十分な速度でレスポンスを返せることが証明されていますし、サービスを運営している中でレンダリング速度が問題になったことはありません。

VelocityとScalaTemplateの比較

今回は、ソーシャルゲームというサービスの特性上、リリースサイクルの短縮が大きな課題となります。

そのため、変更からリリースまでの時間と、デザイナーの作業の行いやすさという点から比較します。

デザインの変更から反映までのステップを下の図に示しますが、これだけでリリースサイクルという観点からはVelocityのメリットが充分に感じられると思います。

まとめ

このように、play-velocity-pluginはデザイナとの協業、リリースサイクルの短縮という点において利点があります。

既にOSSとしてGitHubおよびMavenリポジトリに公開してありますので、Play!Framework2をご利用の方は、ぜひ試してみていただきフィードバックをいただければと思います。

社内だけでなく、皆様のご意見も頂いた上で、今後このplay-velocity-pluginを育てていきたいと思っています。

また、近いうちにplay-velocity-pluginを実際に利用するノウハウなどもこのブログで紹介していきたいと思います。


2012年10月2日

kasuya

DevLOVE関西 2012 Drive にて、乙女ゲームの開発事例をお話させていただきます

ソフトウェア開発部の粕谷(@daiksy)です。

11月10日(土)に、大阪で「DevLOVE関西2012Drive」というイベントが開催されます。

そこで、スピーカーとして「乙女ゲーを支える技術」というセッションを担当させていただくことになりました。

■DevLOVE関西2012Driveとは?

このイベントは、DevLOVEという開発者コミュニティが主催する勉強会です。今年のテーマは”Drive”。

技術とファシリテーションが前輪と後輪となって、開発を駆動していく、というマルチセッション方式の勉強会となっています。

■発表内容

弊社では今年、play2.0 + Scalaという技術を使って数本のソーシャルゲームを開発しました。

わたしも、乙女ゲーの開発に携わり、これらの技術を用いた開発を経験しました。

開発言語として関数型言語が注目される昨今において、この開発事例は多くの方に興味を持って頂き、いくつかの勉強会でお話する機会をいただいています。

play2.0 + Scalaでの開発において、現場でどのようなことがあったのか。

弊社のエンジニアは、それらの技術をどのように身につけ、リリースを迎えたのか。

そういった開発事例をいくつかのエピソードとともにお話しようと思っています。

他にも、大変魅力的なセッションが目白押しなので、是非お越しください。

みなさんとお会いできるのを楽しみにしています。


2012年10月1日

いしはら

iOS6のborder-imageの表示について

ソフトウェア開発部の、いしはらです。
iPhoneお持ちの方はiOS6にアップデートされたでしょうか?
私は早速おこないました!

iOS6のSafariで見ると、作成したサイトの一部が今までと違う表示になったので、調べていると…
CSSのプロパティ「border-image」の表示が改善されていることが分かりました!


border-imageに使う画像を↑の画像にして表示すると…

iOS5・iOS6でそれぞれこのように表示されます。

iOS5では画像一枚が背景のように表示されていますが、iOS6ではちゃんと「境界線」として画像が表示されています。
iOS6でCSS3の対応が改善されていることがわかりますね。

他にも改善された点は色々とあると思うので、発見でき次第随時こちらで情報発信をしていきます!