[Cypress 2] 看官方文件學習 Command & Assertion

E2E Cypress 系列文

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

Cypress 文件真的寫得很好，這篇就是筆記文件中的 Guides / Core Concepts ，聚焦在 Command & Assertion 並會以自己理解方式撰寫。

[Cypress 1] E2E Testing 初探

前一篇有說過撰寫 E2E 其實非常直覺，就是模擬使用者在網頁應該要看到的樣子

it('Perform login', () ⇒ {   
  cy.visit('<http://eaapp.somee.com/>')
  cy.contains('Login').click()
  cy.url().should('include', 'Login') 
  cy.get('#UserName').type("admin")
  cy.get("#Password").type('password')
  cy.get('.btn').click() 
}

可以輕易翻譯以上程式碼為人類可以讀的樣子

1. 拜訪 <http://eaapp.somee.com/> 這個網站
2. 找到網站 Login 這個字然後點擊
3. url path 要有 'Login'，確定進入 login page
4. 輸入使用者名稱 'admin' 
5. 輸入密碼 'password'
6. 按下送出按鈕

經由以上範例可以觀察到 cypress 一定是 cy 開頭，由左向右 chain、由上向下循序漸進執行