Cypress系列（18）- 可操作型別的命令 之 點選命令

小菠蘿測試筆記發表於2020-06-12
型別

如果想從頭學起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

 

前言

  • 啥是可操作型別？就是可以和 DOM 元素互動的命令，比如：點選，雙擊.....等等等
  • 這些命令模擬使用者和應用程式互動，Cypress 會觸發瀏覽器事件，進而觸發應用程式繫結的時間

這一篇著重講點選操作，一共有三個命令

  1. click：單擊
  2. dbclick：雙擊
  3. 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

相關文章