如果想從頭學起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
Custom Commands 自定義命令介紹
- Custom Commands 被認為是替代 PageObject 的良好選擇
- 使用 Custom Commands 可以建立自定義命令和替換現有命令
- Custom Commands 預設存放在 cypress/support/commands.js 檔案中，它會在任何測試檔案被匯入之前載入（ 定義在 cypress/support/index.js ）
語法格式
Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)
引數說明
- name：要新增或覆蓋的命令的名稱
- callbackFn ：自定義命令的回撥函式，回撥函式裡自定義函式所需完成的操作步驟
- options：允許自定義命令的隱性行為
options 可選引數列表
|
引數 |
可接受的值型別 |
預設 |
描述 |
|
prevSubject |
Boolean, String or Array |
false |
如何處理前面產生的物件 |
prevSubject 可選值
- false：忽略任何以前的主題（父命令）
- true：接收上一個主題（子命令）
- optional：可以啟動鏈，也可以使用現有鏈（雙命令）
除了控制命令的隱式行為，您還可以新增宣告性主題驗證，例如：
- element：要求上一個主題是DOM元素
- document：要求上一個主題為文件
- window：要求上一個主題是視窗
Cypress 內建命令利用了上述可選值組合中的每一個
注意：僅在 Cypress.Commands.add() 中支援使用options，而在 Cypress.Commands.overwrite() 中不支援使用options
正確用法
Cypress.Commands.add('login', (email, pw) => {})
Cypress.Commands.overwrite('visit', (orig, url, options) => {})
前期準備
啟動 Cypress 提供的演示專案
cmd 視窗進入下面的資料夾
執行下面的命令
npm start
Custom Commands 的簡單栗子
command.js 的程式碼
在 cypress/support/commands.js 中寫如下程式碼
Cypress.Commands.add('login', (username, pwd) => {
cy.get('input[name=username]').type(username)
cy.get('input[name=password]').type(`${pwd}{enter}`)
})
testlogin.js 測試用例檔案的程式碼
context('登入測試，PO 模式', function () {
const username = 'jane.lane'
const pwd = 'password123'
it('登入成功', function () {
// 建立 po 例項
const loginInstance = new LoginPage()
loginInstance.visitPage()
loginInstance.isTargetPage()
// 呼叫 Custom Commands 的命令
cy.login(username, pwd)
cy.url().should('include', '/dashboard')
const manInstance = new mainPage()
manInstance.isTargetPage()
manInstance.welComeText.should('contain', 'jane.lane')
});
})
測試結果
Customn Commands 的好處
- 定義在 cypress/support/command.js 中的命令可以像 Cypress 內建命令那樣直接使用，無須 import 對應的 page（實際上 PageObject 模式在 Cypress 看來無非是資料/操作函式的共享）
- 自定義命令可以比 PageObject 模式執行更快，Cypress 和應用程式執行在同一個瀏覽器中，意味著 Cypress 可以直接傳送請求到應用程式並設定執行測試所需要的使用者狀態，而這一切通常無須通過頁面操作，這使得使用了自定義命令的測試會更加穩定
- 自定義命令允許重寫 Cypress 內建命令，意味著可以自定義測試框架並立刻全域性應用
Custom Commands 完全替換 PageObject 模式的栗子
command.js 程式碼
在 cypress/support/commands.js 中寫如下程式碼
Cypress.Commands.add('login', (username, pwd) => {
Cypress.log({
name: 'login',
message: `${username} | ${pwd}`
})
return cy.request({
method: 'POST',
url: '/login',
form: true,
body: {
username: username,
password: pwd
}
})
})
.request() 命令在後面文章會繼續介紹
testLogin.js 測試用例檔案程式碼
無須 PageObject 模型，直接在 integration 資料夾下建立 testLogin.js 測試用例檔案
context('登入測試，PO 模式', function () {
const username = 'jane.lane'
const pwd = 'password123'
beforeEach(function () {
cy.login(username, pwd)
})
it('訪問受保護頁', function () {
// cy.request() 登入成功後，cypress 會自動儲存 session cookie
// 所以下面就可以訪問登入後才能訪問的頁面
cy.visit('/dashboard')
cy.url().should('eq', 'http://localhost:7077/dashboard')
cy.get('h1').should('contain', 'jane.lane')
});
})
overwrite 覆蓋 visit 命令的栗子
// 第一個引數代表需要覆蓋的命令 Cypress.Commands.overwrite('visit', (originalFn, url, options) => { const domain = Cypress.env('BASE_DOMAIN') if (domain === '...') { url = '...' } if (options.something === 'else') { url = '...' } // originalFn 代表傳入進來的原 visit 命令 // // 記得需要在最後 return return originalFn(url, options) })
overwrite 覆蓋 type 命令的栗子
如果在密碼欄位中鍵入內容，密碼輸入將在應用程式中自動遮蔽。但是 .type() 會自動將所有鍵入的內容記錄到測試執行程式的命令日誌中
cy.get('#username').type('username@email.com')
cy.get('#password').type('superSecret123')
實際情況
- 可能需要遮蔽傳遞給 .type() 命令的某些值，以便敏感資料不會顯示在測試執行的螢幕截圖或視訊中
- 下面的示例將覆蓋 .type() 命令，以允許遮蔽測試執行程式的命令日誌中的敏感資料
Cypress.Command.overwrite() 程式碼
Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
if (options && options.sensitive) {
options.log = false
// 建立自己的日誌
Cypress.log({
$el: element,
name: 'type',
message: '*'.repeat(text.length),
})
}
return originalFn(element, text, options)
})
測試用例程式碼
cy.get('input[name=username]').type(username)
cy.get('input[name=password]').type(pwd, {sensitive: true})
測試結果
