以 WebDriverIO 前端測試框架實際運行的範例

• 技術架構
• 專案結構
• 系統需求
• 安裝
• 測試
• 報表
• 參考資料

WebDriverIO

• BDD Styles

• mocha
• chai

• Page Objects Pattern

Within your web app’s UI there are areas that your tests interact with. A Page Object simply models these as objects within the test code. This reduces the amount of duplicated code and means that if the UI changes, the fix need only be applied in one place.

簡單來說就是降低重複程式碼，當 UI 變動時，只需要修改一個地方

.
├── ...
└── test
    ├── pageobjects
    └── specs

• node 8
• npm 5 (or yarn 1)
• docker 17
• docker-compose 1.18.0
• Chrome Browser (dev environment)
• Firefox Browser (dev environment)
• webdriver-manager (dev environment)

$ npm i

or

$ yarn

selenium server in local：

$ npm install webdriver-manager chimp -g
$ webdriver-manager update

$ webdriver-manager start

$ npm run dev-test

即時監聽 (需要加入 @watch 才會被監聽)：

$ npm run watch-test

How to install the Drone CLI

$ npm run test-with-drone

$ npm run test-with-drone
$ npm run gen-report
$ npm run open-report

• 淺嚐 WebDriverIO
• Page Objects Pattern on WebDriverIO
• WebDriverIO with Docker
• WebDriverIO with CI