Cypress系列(19)- 可操作類型的命令 之 type()


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

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

 

前端 html 代碼

后面栗子主要以這個頁面為主哦

 

.type() 基礎介紹

在 DOM 元素中輸入內容

 

語法格式

// 輸入文本
.type(text)

// 帶參數輸入文本
.type(text, options)

 

正確寫法

宗旨:先獲取 DOM 元素,再對 DOM 元素進行 type 操作

 

錯誤寫法

調用 type() 命令的都不是 DOM 元素,所以錯誤!

 

.type() 基礎的栗子

輸入正常文本的栗子

測試文件代碼

 

測試結果

 

 

輸入特殊字符的栗子

 

那么還支持哪些特殊字符呢?

 

帶參數輸入文本的栗子 

有哪些參數可以傳遞呢?

 

測試文件代碼

// 單個參數
.type("{selectall}", {parseSpecialCharSequences: false})

// 多個參數
.type("1234", {log:false , parseSpecialCharSequences: false})

 

測試結果

 

.type() 更多的栗子

html 代碼

下面舉的栗子以這個 html 頁面的元素為基礎哦

 

<textarea> 標簽的栗子

測試文件代碼

 

測試結果

 

<option> 標簽的栗子

測試文件代碼

 

測試結果

 

type = 時間類型的 input 標簽的栗子

  • <input type="date">
  • <input type="month">
  • <input type="week">
  • <input type="time">

測試文件代碼

 

測試結果

 

 

.type() 結合鍵盤鍵的栗子

繼續以上面栗子的 html 頁面為基礎

有哪些鍵盤架可以結合呢?

  •  {alt} 
  •  {shift} 
  •  {ctrl} 

 

具體用法

// 等同於按 shift + alt + q
cy.get('input').type('{shift}{alt}Q')

// 按住 shift,然后輸入 test
cy.get('input').type('{shift}test')

說實話,我試過感覺沒生效啊,按道理按住 shift 鍵輸入內容應該是大寫的,但是實際還是小寫,后面再研究一波(感覺有點雞肋,實際場景比較少用到又要按鍵盤又要輸入內容,了解即可)

 

.type() 支持哪些元素調用

<body>

<textarea>

<input> 標簽,且 type 屬性是以下其中一個

  • text
  • password
  • email
  • number
  • date
  • week
  • month
  • time
  • datetime-local
  • search
  • url
  • tel

 

.type() 會觸發的事件 event

當傳入了特殊字符、鍵盤鍵時,只觸發了 keydown 事件

當傳入了內容字符時,每個字符都會觸發一系列的事件

  1. keydown
  2. keypress
  3. textInput
  4. input
  5. keyup

 

結尾

本文是博主基於對蔡超老師的《Cypress 從入門到精通》閱讀理解完后輸出的博文,並附上了自己的理解

對書籍感興趣的,大家可以參考本篇博客:https://www.cnblogs.com/poloyy/p/13052972.html,考慮自身需求進行購買

 

我的博客即將同步至騰訊雲+社區,邀請大家一同入駐:https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM