Asial Blog

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

11月のソーシャルランチ

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

11月のソーシャルランチは

 みんな大好き

『菩提樹 水道橋店』。
 
 


 

『菩提樹 水道橋店』は

 伝統あるカツとA5ランクの和牛を使用したハンバーグが人気の

 水道橋では有名店です。

 がっつり肉を食らおうと

 30人で行って参りました。
 
 まずは食べ放題のサラダから。

 


 


 そして、次々とメーンが運ばれ、

 いただきまーす。

 

 A5ランク和牛100%使用のハンバーグ定食
 ランチは数量限定メニューです。

 

 ハンバーグとヒレカツ、エビフライが乗った三味盛り定食

 


 


 お肉、おいしゅうございました。

 

アシアルの会社情報

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

会社情報詳細

「HTML5モバイルアプリDay」大盛況でした!

カテゴリ :
Monaca
タグ :
Monaca
slack_for_ios_upload_720.jpg
「HTML5モバイルアプリDay」のご報告です。

『HTML5モバイルアプリDAY』まもなく開催します!

カテゴリ :
Monaca
タグ :
Monaca
DSC00209.JPG
「HTML5モバイルアプリDAY」のお知らせです。

美女と手ぬぐい

カテゴリ :
日常
タグ :
日常
una.jpg
アシアルと展示会についてのお話です。

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

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

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専用のブログを開設しました