Web Framework
  • Introduction
  • Chapter1: Build Front-End Develope environment
    • 1.1.Install Sublime Text3 and packages
    • 1.2.Sublime plugin
      • 1.2.1.Package install control
      • 1.2.2.Emmet
      • 1.2.3.HTML-CSS-JS Prettify
      • 1.2.4 .SublimeLinter
      • 1.2.5.Install Sublime text Build system
      • 1.2.6.Pretty JSON
      • 1.2.7.SublimeHighlight
      • 1.2.8.SublimeAStyleFormatter
  • Chapter2: Angular.js
  • Chapter3: 3rd Party API
    • 3.function
  • Chapter4: React.js
    • 4.1.Introduction
    • 4.2.Getting started
    • 4.3.JSX
    • 4.4.life cycle
    • 4.5.Data flow: prop vs. prop.children, state
    • 4.6. Layout, Event Handing
    • 4.7.Using JQuery in React
    • 4.8.Using D3.js in React
    • 4.9.Dynamic Routing
  • Chapter5: Webpack
  • Chapter6: web driver IO & mocha
  • Chapter7: RWD
    • 7.1.利用Sass & media query在不使用框架下完成RWD
  • Chapter8: React native
Powered by GitBook
On this page
  • This section contain the following items:
  • 1.Introduction
  • 2.What is webdriverio?
  • 3.Environment setting
  • 5.Reference

Was this helpful?

Chapter6: web driver IO & mocha

This section contain the following items:

  • 1.Introduction

  • 2.What is webdriverio?

  • 3.Environment setting

  • 4.Apply to project and analysis

  • 5.Reference

1.Introduction

In order to build a auto testing framework to fulfill our requirement, this chapter have the following items:
1) What is webDriverIO?
  2) Enviroment Setting
  2) Apply to project and analysize
  4) Reference

2.What is webdriverio?

WebdriverIO lets you control a browser or a mobile application with just a few lines of code. Your test code will look simple, concise and easy to read. The integrated
testrunner allows you to write asynchronous commands in a synchronous way so that you 
  don’t need to care about how to propagate a Promise to avoid racing conditions.

  The test runner comes also with a variety of hooks that allow you to interfere into the    
  test process in order to take screenshots if an error occurs or modify the test procedure 
  according to a previous test result. (reference from: http://webdriver.io/)

3.Environment setting

  • OSX Yosemite v10.10.5

  • Node: v5.0.0

    • 1)mkdir webdrivverio-test & cd webdrivverio-test

    • 2)Download seleniu standalone server 2.53.1:

    • 3)Download Firefox 47.0.1:

    • 4)Modify package.json:

    "dependencies": {

"assert": "^1.4.1",

    "chai": "^3.5.0",

    "chai-as-promised": "^5.3.0",

   "wdio-mocha-framework": "^0.4.0",

    "mocha": "^2.3.0",

    "webdriverio": "^3.3.0",

      "should": "^7.1.0"

      },
  • 5)sudo npm install

  • 7)start to work :

    • 7.1)launch standalone server in webdrivverio-test folder:

    java -jar selenium-server-standalone-2.53.1.jar

    • 7.2)launch http server which you want to test :

    node app.js

    • 7.3) launch webtest.js:

    node webtest.js

  • 8)Test result:

  • ```

    4.Apply to project and analysis

1) 從程式碼中可以了解Mocha屬於BDD的測試框架, 目的以User Story作為出發, 是因此程式碼看起來多半都是When

```
[scenario], giving [conditions], it should [expected results]的語句, 當在什麼情況下測試結果
     應該滿足什麼情況 
  2) 單元測試的3A在此架構下是拆分成獨立的獨立的物件/function, 像是assert就必須引入chai這個library 
      Arrange
        初始化目標物件
        初始化方法參數
        建立模擬物件行為
        設定環境變數,期望結果
      Act
        實際呼叫目標測試物件的方法
      Assert
        驗證目標物件是否如同預期運作

5.Reference

```

```

PreviousChapter5: WebpackNextChapter7: RWD

Last updated 5 years ago

Was this helpful?

curl -O

6)create test case named "webtest.js" into webdrivverio-test folder, sample code as

1.官網: 2.範例: 3.用 mocha 編寫 Node.js unit test: 4. 5.

http://selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.1.jar
https://support.mozilla.org/en-US/kb/install-older-version-of-firefox
http://webdriver.io/guide.html
https://github.com/onewithhammer/WebDriverIOTutorial
http://syshen.cc/post/23479369750/%E7%94%A8-mocha-%E7%B7%A8%E5%AF%AB-nodejs-unit-test
http://toyo0103.blogspot.tw/2015/08/unit-test-3a.html
http://slides.com/alincode/deck-2/fullscreen#/