Cypress系列(17)- 查找頁面元素的輔助方法


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

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

 

前言

單一的基礎定位元素方法並不一定能滿足復雜的場景,所以 Cypress 還提供了一些輔助方法,可以提高找到元素的准確性

 

前端頁面代碼

后面寫的 Cypress 代碼,都會基於這個 html 頁面來定位元素哦,文件位置隨意放,代碼需要手動自己敲一遍

 

.children()

用來獲取 DOM 元素的子元素

 

兩種語法格式

.children()
.children(selector)

 

測試文件代碼

 

測試結果

ul 標簽的子元素有四個 li,所以返回了四個 DOM 元素

 

.parents()

用來獲取 DOM 元素的所有父元素,包括了爺爺級別、祖父級別....

 

測試文件代碼

 

測試結果

li 的父元素(父親、爺爺、祖父....)一共有四個:ul > div > body > html

 

.parent()

用來獲取 DOM 元素的第一層父元素

 

測試文件代碼

 

測試結果

li 的第一層父親是 ul,所以只返回它

 

.siblings()

用來獲取 DOM 元素的所有同級元素

 

測試文件代碼

 

測試結果

li 的同級元素有其他三個 li 元素

 

.first()

  • 匹配給定的 DOM 元素列表中的第一個元素
  • 重點:如果是單個 DOM 元素調用此方法,則返回自己

 

測試文件代碼

 

測試結果

 

.last()

  • 匹配給定的 DOM 元素列表中的最后一個元素
  • 重點:如果是單個 DOM 元素調用此方法,則返回自己

 

測試文件代碼

 

測試結果

 

next家族

.next()

獲取給定的 DOM 元素后面緊跟的下一個同級元素

 

.nextAll()

獲取給定的 DOM 元素后面緊跟的所有同級元素

 

.nextUntil(selector)

獲取給定的 DOM 元素后面緊跟的所有同級元素,直到遇到 Until 里定義的元素為止

 

測試文件代碼

 

測試結果

next() 測試結果

 

nextAll() 測試結果

 

nextUntil() 測試結果

 

prev家族

.prev()

獲取給定的 DOM 元素前面緊跟的上一個同級元素

 

.prevAll()

獲取給定的 DOM 元素前面緊跟的所有同級元素

 

.prevUntil()

 獲取給定的 DOM 元素前面緊跟的所有同級元素,直到遇到 Until 里定義的元素為止

 

測試文件代碼

 

測試結果

prev() 測試結果

 

prevAll() 測試結果

 

prevUntil() 測試結果

 

.each()

 用來遍歷數據或者及其類似的結構(對象有 length 屬性即可)

 

語法格式

.each(callbackFn)

 

測試文件代碼

注意: $li 是一個變量名,每次循均代表一個 jQuery 對象

 

測試結果

 

.eq()

  • 在元素或者數組中的特點索引處獲取 DOM 元素
  • 作用跟 :nth-child() 選擇器一樣,只不過下標從0開始

 

測試文件代碼

 

測試結果

 

.closest()

https://www.cnblogs.com/poloyy/p/14010281.html

 

結尾

本文是博主基於對蔡超老師的《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