Asial Blog

Recruit! Asialで一緒に働きませんか?

7月&8月のソーシャルランチ

カテゴリ :
日常
タグ :
ランチ
日常
こんにちは!

台風も過ぎ去り

すっかり秋めいてきました。

社内では窓を開けると気持ちが良い風が入ってきます。



さて少し季節は戻りますが


今回は7月、8月のソーシャルランチについて

書きたいと思います。


7月のランチは6月もお邪魔した

『Domni il resto』(ドマーニイルレスト)さん

まずはグリーンサラダ


メイン1 チキンのトマトソース煮

   ソースが美味しくてバケットをつけて楽しみます。

メイン2 白身魚のグリルバルサミコソース

   パリッと香ばしい。

デザート ブラウニーとティラミス

   一口サイズなので、1人3皿くらい、みな食べました。




7月はいつもより参加者が少なかったのですが

用意されたお料理を余すことなく

全て食べて帰りました。

アシアル、食べ盛りです。



そして8月は以前にもお邪魔した

『Soleil du Matin』(ソレイユ ドゥ マタン)さん

今回も前菜、カレーなどビュッフェスタイルです。














 クスクスやゴーヤを使ったサラダなど

 お野菜がたっぷりとれて大好評です。


そして今月のプレゼンタ~イム!

今回はお料理上手で、

たまに自家製クロワッサンを差し入れてくださる

Sさんが担当してくださいました。





今回は、

とあるプロジェクトで知ることができた困難な要件、

そして解決への道程について

プレゼン頂きました。

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

WebdriverIOを使ってみました

カテゴリ :
フロントエンド(HTML5)
タグ :
Selenium
WebDriver
WebdriverIO
icon
最近、「WebdriverIO がいい」という話を耳にしたので使ってみました。
軽く実案件の自動テストにも組み込んでみたのですが、かなり使いやすいと感じたので簡単に使い方をご紹介します。

WebdriverIOとは



UI操作を自動化するためのJSライブラリです。(執筆現在の最新バージョンはv4.2.8)
ブラウザ操作を同期的に記述でき、APIもシンプルに記述できるよう配慮されているため、
複雑になりがちなUI操作のテストコードをかなりシンプルに記述することができます。

構成



今回は以下の環境・バージョンで試しました。

OS : Mac OS El Capitan 10.11.6(15G31)
NodeJS : v6.4.0
Chrome バージョン 52.0.2743.116 (64-bit)

webdriverio : 4.2.8
selenium-standalone : 5.6.1
※ selenium standalone serverをjavascriptから立てるためのライブラリです。

今回はローカルにselenium standalone serverを立ててでテストを実行する想定で書いていますが、
リモートマシンやSelenium Gridだけでなく、
テスティングクラウドサービス(Sause Labs/Browserstack/Testingbot)等との連携も可能です。

インストール



(npm initは完了しているものとして)、ひとまずWebdriverIOをインストールしましょう。

  1. $ npm install webdriverio --save-dev

また、selenium standalone serverを立ち上げる必要があるので、selenium-standaloneをインストールしておきます。


  1. $ npm install selenium-standalone --save-dev

設定ファイル作成



次に、wdioを実行するための設定ファイルを作成します。
npm initやkarma initのように、対話的に設定ファイルを作成できるwdioのconfigコマンドが用意されているので利用しましょう。

  1. $ ./node_modules/.bin/wdio config

質問内容は以下のとおりです。
※ ライブラリやadapterをインストールするか?という質問は省略しています


  1. Seleniumの動作環境(On my local machine)

  2. 使用するテストフレームワーク(jasmine)

  3. Specファイルの配置場所(./test/specs/*.js)

  4. 使用するレポーターの種類(dots)

  5. 使用するサービス(selenium-standalone)

  6. logレベル(error)

  7. エラー発生時のスクリーンショットの配置場所(./errorShots)

  8. テストサーバーのbase url(localhost:8000)



テストの実行



先ほど指定した場所にテストを作成・配置し、以下のコマンドでwdio testrunnerを実行します。
wdio.conf.jsのserviceにselenium-standaloneを登録しておくとテスト実行時に自動でselenium standalone serverが立ち上がります

  1. $ ./node_modules/.bin/wdio

サンプルコード



典型的な操作をいくつかピックアップしてご紹介していきます。

※ browserオブジェクトについて
wdio test runnerを使用した場合、webdriverのインスタンスにbrowserというグローバル変数でアクセスできるようになります。(参考


ブラウザにアクセスしてタイトルを取得する



  1. describe('WDIOのテスト', () => {
  2.     it('画面の表示', () => {
  3.         browser.url('/index.html');
  4.         expect(browser.getTitle()).toBe('Hello WebdriverIO');
  5.     });  
  6. });

ユーザーIDとパスワードを入力してログイン



  1. describe('Login Page', () => {
  2.     beforeEach(() => {
  3.         browser.url('/index.html');
  4.     });
  5.  
  6.     it('should translate to todo list when submit correct userid & password', () => {
  7.         let title = browser.setValue('#userid', 'test@example.com')
  8.             .setValue('#password', 'password')
  9.             .click('#login')
  10.             .getTitle();
  11.         expect(title).toBe('Login Succeeded');
  12.     });
  13. });


キャプチャの取得


  1. describe('Login Page', () => {
  2.     beforeEach(() => {
  3.         browser.url('/login.php');
  4.     });
  5.     it('should have right title', () => {
  6.         browser.saveScreenshot('./images/login.png');
  7.     });
  8. });

また、こちらのページを参考にPage Objectを作成しておくと、より読みやすく変更に強いテストが作成できそうです。


wdio test runnerを使用しない場合



他のテストランナーと組み合わせる場合は非同期なAPIとなります。
以下のサンプルのようにco + generatorで同期的に書くこともできますが、いちいちyieldで止める必要があるので少々不便になります。

例:jasmine + jasmine-co + webdriverioを組み合わせて使用する場合のサンプルです。

  1. require('jasmine-co').install();
  2.  
  3. const webdriverio = require('webdriverio');
  4. const browser = webdriverio.remote({
  5.     desiredCapabilities: { browserName: 'chrome' },
  6.     baseUrl: 'http://127.0.0.1:8000'
  7. });
  8.  
  9. describe('Login Page', () => {
  10.     beforeAll(function* () {
  11.         yield browser.init();
  12.     });
  13.     beforeEach(function* () {
  14.         yield browser.url('/login.php');
  15.     });
  16.     it('should have right title', function* () {
  17.         let title = yield browser.getTitle();
  18.         expect(title).toBe('Login Page');
  19.     });
  20. });

あとがき



簡単な機能しか紹介していませんが、いかがでしたでしょうか。

次期Mac OS Xにて SafariのWebDriver Supportが発表され、各ブラウザのWebDriverが一通り揃いつつあります。
また、今回紹介したWebdriverIOに限らずクライアント側のツールもこなれてきました。

UIテスト自動化を試してみるにはいい時期になってきたのではないでしょうか。
その時には是非WebdriverIOを試してみてください。

6月のソーシャルランチ

カテゴリ :
日常
タグ :
日常
ランチ
hongo_kusu_04.jpg
6月のソーシャルランチの模様です。

5月のソーシャルランチ

カテゴリ :
日常
タグ :
日常
ランチ
P5240001.JPG
5月に開催したソーシャルランチの模様です。

4月のソーシャルランチ

カテゴリ :
日常
タグ :
日常
グルメ
ソレイユ1.jpg
4月のソーシャルランチ

Monaca / Onsen UIの専用ブログを開設しました

カテゴリ :
Monaca
タグ :
Monaca
onsenui
blog.png
Monaca / Onsen UI専用のブログを開設しました

第8回Apache Cordova勉強会が開催されました

カテゴリ :
Monaca
タグ :
Cordova
レポート
cordova-8-2.jpg
第8回Apache Cordova勉強会のレポートです。

Monacaのプレビューを使う際のTips

カテゴリ :
Monaca
タグ :
JavaScript
プレビュー
monaca-preview-3.png
Monacaのプレビューを使って開発を行う際のTipsです。

MonacaクラウドとGitHub連携方法

カテゴリ :
バックエンド(プログラミング)
タグ :
Monaca
GitHub
シングルサインオン
Monacaダッシュボードバージョン管理メニュー
MonacaクラウドとGitHubがついに連携しました。GitHubアカウントでのMonacaへのシングルサインオンや、クローン、コミットやプッシュなど、MonacaクラウドIDE上のプロジェクトをGit管理ができます。画面を見ながら説明します。

動画を使ったアプリ利用解析を実現するReproはMonacaで簡単に利用できます

カテゴリ :
Monaca
タグ :
JavaScript
Repro
動画
monaca-repro-14.png
MonacaアプリはReproを簡単に導入できます!