前言
這篇是根據 cypress 官方文檔 copy 過來的，關於自動化測試對登錄場景的處理的思考，寫的挺好的。
官方文檔地址https://docs.cypress.io/guides/getting-started/testing-your-app.html#Logging-in
登錄是我們遇到的第一個自動化用例場景，當然登錄也是最難的場景之一。
完全測試登錄流程 - 但只有一次
將注冊和登錄流程置於測試覆蓋范圍內是一個好主意，因為它對用戶來說都非常重要，而且你永遠不希望它有缺陷。
登錄是任務關鍵的功能之一，可能涉及你的服務器。 我們建議你使用你的 UI 頁面測試注冊和登錄，因為我們盡量模擬真實用戶場景！
以下是從數據庫構造數據開始的示例：
- cy.exec() npm 執行腳本清理測試數據
- cy.request() 往數據庫寫入你的測試賬號，后面的用例使用該測試賬號username: 'jane.lane'
describe('The Login Page', function () {
beforeEach(function () {
// 每次測試之前重置數據庫，保證測試數據干凈
cy.exec('npm run db:reset && npm run db:seed')
// 發個post請求 '/test/seed/user'注冊用戶， 往數據庫寫入測試用戶數據
// 假設它為我們生成一個隨機密碼
cy.request('POST', '/test/seed/user', { username: 'jane.lane' })
.its('body')
.as('currentUser')
})
it('sets auth cookie when logging in via form submission', function () {
// 引用上面的currentUser對象
const { username, password } = this.currentUser
cy.visit('/login')
cy.get('input[name=username]').type(username)
// 輸入密碼后，按 {enter} 提交數據
cy.get('input[name=password]').type(`${password}{enter}`)
// 重定向到 /dashboard
cy.url().should('include', '/dashboard')
// 斷言用戶登錄后cookie存在
cy.getCookie('your-session-cookie').should('exist')
// 斷言UI頁面是包含 'jane.lane' 文本
cy.get('h1').should('contain', 'jane.lane')
})
})
你可能還會繼續測試你的登錄界面的以下情況，比如：
非法的用戶名/密碼
用戶名已存在
密碼復雜度要求
邊緣用例，比如用戶鎖定或已刪除
以上每一種情況都要求進行全面的測試。
現在，當你的登錄測試成功之后，你可能開始想：
“…好的，漂亮! 讓我們在每一個測試用例中重復這些登錄過程吧！”
不! 千萬別！不要用UI登錄來測試每一個用例。
讓我們來研究和展開一下原因。
繞過UI
當你為非常具體的功能編寫測試時，你應使用你的UI進行測試。
但是，當你在測試系統的另一個模塊時，而它依賴於之前功能的狀態時：不要使用你的UI設置此狀態。
這是一個更具說服力的例子：
想象一下，你正在測試購物車的功能。 要對此進行測試，你需要能夠將商品添加到該購物車。
那么商品來自哪里？ 你是否應該使用UI登錄管理區域，然后創建所有商品，包括其描述，類別和圖像？
完成后，你是否應該訪問每個商品並將每個商品添加到購物車？
不，你不應該這樣做。
警告 不要用你的UI去構建狀態。這是非常緩慢，繁瑣和不必要的。
登錄與我們剛才描述的完全相同的場景。 登錄只是在所有其他測試之前的前置狀態條件。
因為Cypress不是Selenium，我們實際上可以在這里采取一個巨大的捷徑，不需要使用UI而直接使用cy.request()。
因為cy.request()會自動獲取並設置cookie，我們實際上可以使用它來構建狀態而不使用瀏覽器的UI，但仍然可以使其完全像它來自瀏覽器一樣！
讓我們重溫上面的例子，但假設我們正在測試系統的其他部分。
describe('The Dashboard Page', function () {
beforeEach(function () {
// 每次測試之前重置數據庫，保證測試數據干凈
cy.exec('npm run db:reset && npm run db:seed')
// 發個post請求 '/test/seed/user'注冊用戶， 往數據庫寫入測試用戶數據
// 假設它為我們生成一個隨機密碼
cy.request('POST', '/test/seed/user', { username: 'jane.lane' })
.its('body')
.as('currentUser')
})
it('logs in programmatically without using the UI', function () {
// 引用上面的currentUser對象
const { username, password } = this.currentUser
// 通過登陸接口發request請求，不需要用UI界面去登陸
cy.request('POST', '/login', {
username,
password
})
// 現在已經是登陸狀態了，可以用visit訪問登陸后的任意頁面了
cy.visit('/dashboard')
// 斷言用戶登錄后cookie存在
cy.getCookie('your-session-cookie').should('exist')
// 斷言UI頁面是包含 'jane.lane' 文本
cy.get('h1').should('contain', 'jane.lane')
})
})
你看得到差別嗎？ 我們能夠登錄而無需實際使用我們的UI。 這節省了大量時間訪問登錄頁面，填寫用戶名，密碼，並等待服務器在每次測試之前(登錄后)重定向。
因為我們以前在不使用任何捷徑方式的情況下端到端地測試了登錄系統，所以我們已經100％有信心它正常工作。
在處理系統的其他地方，那些需要設置狀態的任何模塊時，請使用上述方法。 請記住 - 不要使用你的用戶界面！
接下來我們會想后面的用例都需要把登錄當成前置，這時候需自定義一個登陸指令在support/commands.js 下定義一個命令用於發登錄請求
詳情參考前面這篇https://www.cnblogs.com/yoyoketang/p/13045333.html
官方文檔地址https://docs.cypress.io/guides/getting-started/testing-your-app.html#Logging-in