如果想從頭學起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
- number
- date
- week
- month
- time
- datetime-local
- search
- url
- tel
.type() 會觸發的事件 event
當傳入了特殊字符、鍵盤鍵時,只觸發了 keydown 事件
當傳入了內容字符時,每個字符都會觸發一系列的事件
- keydown
- keypress
- textInput
- input
- keyup
結尾
本文是博主基於對蔡超老師的《Cypress 從入門到精通》閱讀理解完后輸出的博文,並附上了自己的理解
對書籍感興趣的,大家可以參考本篇博客:https://www.cnblogs.com/poloyy/p/13052972.html,考慮自身需求進行購買
我的博客即將同步至騰訊雲+社區,邀請大家一同入駐:https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1