如果想從頭學起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
前言
- 啥是可操作類型？就是可以和 DOM 元素交互的命令，比如：點擊，雙擊.....等等等
- 這些命令模擬用戶和應用程序交互，Cypress 會觸發瀏覽器事件，進而觸發應用程序綁定的時間
這一篇着重講點擊操作，一共有三個命令
- click：單擊
- dbclick：雙擊
- rightclick：右鍵
.click() 的語法和用法
單擊某個元素
六種基礎語法格式
// 單擊某個元素 .click() // 帶參數的單擊 .click(options) // 在某個位置點擊 .click(position) // 在某個位置點擊，且帶參數 .click(position, options) // 根據頁面坐標點擊 .click(x, y) // 根據頁面坐標點擊，且帶參數 .click(x, y, options)
正確用法
宗旨：先獲取 DOM 元素，再對 DOM 元素操作
錯誤用法
position 位置參數
每個元素都有九個 position，具體可看下圖
坐標 x, y
距離 DOM 元素左上角的坐標，x 是橫軸，y 是豎軸
options 可選參數
共有四個
如何傳 options ？
- .click({ multiple: true })
- .click({ multiple: true , force: true})
force: true 的作用
背景
- Cypress 可以通過 Test Runner 的快照找到阻止 DOM 元素交互的情況，但某些情況下可能會阻礙測試的進行
- 比如：有一個嵌套的導航結構，用戶必須將鼠標 hover 在一個非常特定的模式中，才能拿到所需的鏈接
- 當測試時，其實我們只是想獲取鏈接而已，前面過多的繁瑣操作可能會導致測試失敗
作用
- 當設置了 force: true 時，Cypress 會強制操作命令的發生，避開前面的所有檢查
- 你可以傳遞 { force: true } 給大多數操作命令
栗子
// 強制點擊，和所有后續事件 // 即使該元素 “不可操作”，也會觸發點擊操作 cy.get('button').click({ force: true })
當使用 force 時，將執行這些操作
- 繼續執行所有默認操作
- 強制在元素上觸發事件
當使用 force 時，將不會執行這些操作
- 滾動到視圖中
- 確保可見
- 確保未禁用
- 確保沒有分離
- 確保它不是只讀的
- 確保它沒有動畫
- 確保未覆蓋
- 向后代觸發事件
總結
總而言之， { force: true } 跳過檢查，它將始終在所需元素處觸發事件
.click() 具體的栗子
.click() 的栗子
測試文件代碼
測試結果
.click(position)
測試文件代碼
測試結果
.click(x, y)
測試文件代碼
測試結果
{force: true} 的栗子
.click(options)
.click(position, options)
.click(x, y, options)
{multiple : true } 的栗子
測試文件代碼
測試結果
cy.get(' ul > li ') 共匹配四個 DOM 元素，他們均觸發單擊操作
單擊組合鍵
.click() 命令還可以與 .type() 命令結合使用修飾符來觸發組合鍵操作，以便在單擊時結合鍵盤操作，例如ALT + click
以下修飾符可以和 .click() 結合使用
| 修飾符 | 作用 | 別名 |
|---|---|---|
{alt} |
等價於 alt 鍵 | {option} |
| {ctrl} | 等價於 ctrl 鍵 | {control} |
| {shift} | 等價於 shift 鍵 |
栗子
.dblclick()
雙擊，跟 click() 的語法 & 用法一致，只是變成了雙擊
cy.get("#main1").dblclick()
cy.get("#main1").dblclick("top")
cy.get("#main1").dblclick(15, 15)
.rightclick()
右鍵，跟 click() 的語法 & 用法一致，只是變成了右鍵點擊
cy.get("#li1").rightclick()
cy.get("#li1").rightclick("top")
cy.get("#li1").rightclick(15, 15)
.click() 注意事項
可操作性
執行 .click() 必須是 DOM 元素達到了可操作狀態
關於斷言
.click() 將自動等待元素達到可操作狀態。
.click() 將自動等待后面鏈接的斷言通過
超時時間
.click() 如果 DOM 元素一直達不到可操作狀態，可能會超時
.click() 如果后面鏈接的斷言一直不通過，可能會超時
.click() 會觸發的鼠標事件
在命令日志中單擊 click 時，控制台console 將輸出以下鼠標事件
結尾
本文是博主基於對蔡超老師的《Cypress 從入門到精通》閱讀理解完后輸出的博文，並附上了自己的理解
對書籍感興趣的，大家可以參考本篇博客：https://www.cnblogs.com/poloyy/p/13052972.html，考慮自身需求進行購買
我的博客即將同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1