Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Taste Cucumber.js - JavaScript BDD Framework

Taste Cucumber.js - JavaScript BDD Framework

Yuren Ju

July 21, 2017
Tweet

More Decks by Yuren Ju

Other Decks in Technology

Transcript

  1. Yuren Ju • g0v contributor ◦ 勞基法修法計算機 ◦ 勞基法函式庫 ◦

    勞工權益網站 ◦ 割闌尾 ◦ Bifrost 物資管理系統 • COSCUP 議程組長、紀錄組長 • JavaScript Developer
  2. 功能: 擲骰子 場景: 擲一顆骰子 當按下 ”擲” 按鈕 那麼骰子會顯示 1 -

    6 之間的點數 場景: 擲兩顆骰子 當改變骰子數量變成 2 時 而且按下 ”擲” 按鈕 那麼總共會出現 2 顆骰子 而且骰子會顯示 1 - 6 之間的點數 而且會出現所有骰子點數的加總
  3. BDD - Behavior-driven development 兩大重點: 1. 用通用語言敘述行為作為規格 2. 用 (1)

    產生的規格作為自動化測試的基礎 http://www.infoq.com/cn/news/2015/02/introducing-bdd
  4. 功能: 擲骰子 場景: 擲一顆骰子 當按下 ”擲” 按鈕 那麼骰子會顯示 1 -

    6 之間的點數 場景: 擲兩顆骰子 當改變骰子數量變成 2 時 而且按下 ”擲” 按鈕 那麼總共會出現 2 顆骰子 而且骰子會顯示 1 - 6 之間的點數 而且會出現所有骰子點數的加總
  5. Gherkin • Feature • Scenario • Given, When, Then, And,

    But • Reference • 功能 • 場景 • 假如、當、那麼、而且、但是 • 所有中文語法
  6. Gherkin Gherkin is plain-text English (or one of 60+ other

    languages) with a little extra structure.
  7. 步驟 • Setup project • Write spec • Setup test

    environment • Write test • Implement dice website
  8. 步驟 • Setup project • Write spec • Setup test

    environment • Write test • Implement dice website
  9. 步驟 • Setup project • Write spec • Setup test

    environment • Write test • Implement dice website
  10. var webdriver = require('selenium-webdriver'), var driver = new webdriver.Builder() .forBrowser('firefox')

    .build(); driver.get('http://www.google.com/ncr'); driver.findElement(By.name('q')).sendKeys('webdriver'); driver.findElement(By.name('btnG')).click(); driver.wait(until.titleIs('webdriver - Google Search'), 1000); driver.quit(); selenium-webdriver https://seleniumhq.github.io/selenium/docs/api/javascript/index.html
  11. • world.js ◦ 每個情境的初始設定 ◦ 把 browser 初始設定放在這 • hook.js

    ◦ 設定每個情境 before / after 的操作 ◦ 把打開網站寫在 before() ◦ 把關閉瀏覽器寫在 after() • dice.js ◦ 空的測試步驟
  12. 步驟 • Setup project • Write spec • Setup test

    environment • Write test • Implement dice website
  13. 步驟 • Setup project • Write spec • Setup test

    environment • Write test • Implement dice website
  14. Step 2 • Write JavaScript ◦ declare DOM element ◦

    declare mapping for dice (unicode mapping) ◦ declare function for throw dice ◦ bind click event and give an initial state