[Cypress 1] E2E Testing 初探

E2E Cypress 系列文

1. E2E Testing 初探
2. 看官方文件學習 Command & Assertion
3. 看官方文件學習 Variable and Aliases、Hooks、其他
4. 運用在真實世界的 E2E — 以 2020 六角鐵人賽文章搜尋器為例

你我一定都會 E2E 測試，只是可能都是手動。以”登入” 這個功能來說我們開發完都會模擬使用者步驟

1. 輸入網址 http://eaapp.somee.com/
2. 點 navigation 的 Login
3. 輸入使用者名稱、輸入密碼
4. 點擊送出按鈕
5. 成功的話使用者名稱換顯示在 navigation 右邊，失敗會出現錯誤訊息之類

E2E automation Testing 則是轉換手動變為程式碼

it('Perform login', () ⇒ {
  // Visit ExecuteAutomation Website     
  cy.visit('http://eaapp.somee.com/')
  // 點 navigation 的 Login
  cy.contains('Login').click()
  // url 要有 'Login 這個字'，確定進入 login page
  cy.url().should('include', 'Login')
  // 輸入使用者名稱 "admin"   
  cy.get('#UserName').type("admin")
  // 輸入密碼 "password"
  cy.get("#Password").type('password')
  // 按下送出按鈕
  cy.get('.btn').click() 
}

cyprees 實際跑起來的樣子

以上是 E2E automation cypress 執行以上程式跑起來的樣子，非常之快而且會紀錄每一個步驟的 screenshot。