如果想从头学起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开始

测试文件代码

测试结果

结尾

本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文,并附上了自己的理解

对书籍感兴趣的,大家可以参考本篇博客:https://www.cnblogs.com/poloyy/p/13052972.html,考虑自身需求进行购买

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

 

Cypress系列(17)- 查找页面元素的辅助方法的更多相关文章

  1. Cypress系列(16)- 查找页面元素的基本方法

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前端页面代码 后面写的 Cypress ...

  2. 类 java.util.Collections 提供了对Set、List、Map进行排序、填充、查找元素的辅助方法。

      类 java.util.Collections 提供了对Set.List.Map进行排序.填充.查找元素的辅助方法. 1. void sort(List) //对List容器内的元素排序,排序的规 ...

  3. ASP.NET MVC5 学习系列之表单和HTML辅助方法

    一.表单 (一)Action和Method特性 Action特性用以告知浏览器信息发往何处,因此,Action特性后面需要包含一个Url地址.这里的Url地址可以是相对的,也可以是绝对的.如下Form ...

  4. Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 <上>

    前置步骤: 上一篇的Python单元测试框架unittest,我认为相当于功能测试测试用例设计中的用例模板,在自动化用例的设计过程中,可以封装一个模板,在新建用例的时候,把需要测试的步骤添加上去即可: ...

  5. sellenium页面元素的定位方法

    1.findElements函数可用于多个元素定位 (1)使用ID定位:driver.findElement(By.id("ID值")); 例:HTML代码: 定位语句代码:Web ...

  6. css隐藏页面元素的多种方法

    在平常的样式排版中,我们经常遇到将某个模块隐藏,下面我整理了一下隐藏元素的多种方法以及对比(有的占据空间,有的不占据空间.有的可以点击,有的不能点击.): ( 一 )  display:  none; ...

  7. Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 -- iframe专题 <下>

    学习目的: 掌握iframe矿建的定位,因为前端的iframe框架页面元素信息,大多时候都会带有动态ID,无法重复定位. 场景: 1. iframe切换 查看iframe 切换iframe 多个ifr ...

  8. JS与JQ 获取页面元素值的方法和差异对比

    获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeig ...

  9. 各种浏览器下的页面元素xpath获取方法

    参考链接: http://blog.sina.com.cn/s/blog_654c6ec70100v1i2.html

随机推荐

  1. wepy 小程序开发(Mixin混合)

    默认式混合 对于组件data数据,components组件,events事件以及其它自定义方法采用默认式混合,即如果组件未声明该数据,组件,事件,自定义方法等,那么将混合对象中的选项将注入组件之中.对 ...

  2. Java线程的几种可用状态

    1. 新建( new ):新创建了一个线程对象. 2. 可运行( runnable ):线程对象创建后,其他线程(比如 main 线程)调用了该对象 的 start()方法.该状态的线程位于可运行线程 ...

  3. 你 MySQL 中重复数据多吗,教你一招优雅的处理掉它们!

    在需要保证数据唯一性的场景中,个人觉得任何使用程序逻辑的重复校验都是不可靠的,这时只能在数据存储层做唯一性校验.MySQL 中以唯一键保证数据的唯一性,那么若新插入重复数据时,我们可以让 MySQL ...

  4. redis python操作

    1.基于连接池方式实现对五个数据类型操作,每种数据类型2个操作 2.基于spring-data-redis 基于jedis来实现对五种数据类型操作,每种数据类型实现两个操作,包括事务 以上为基于jav ...

  5. 王艳 201771010127《面向对象程序设计(java)》第十一周学习总结

    一:理论部分. 1.数据结构:分为a.线性数据结构,如线性表.栈.队列.串.数组和文件. b.非线性数据结构,如树和图. 1)所有数据元素在同一个线性表中必须是相同的数据类型. 线性表按其存储结构可分 ...

  6. Closures Basic

    Closures Closures are one of the most powerful features of JavaScript. JavaScript allows for the nes ...

  7. 转 vue动画总结

    使用过渡类名(有进入及出去,适合显示隐藏,需要配合v-if) .v-enter,//进入前 .v-leave-to {//离开后 只需要入场动画 可以把v-leave-to删掉 opacity: 0; ...

  8. Mycat-多实例的搭建

    1. 基础环境准备1.1 环境准备:两台虚拟机 db01 db02每台创建四个mysql实例:3307 3308 3309 33101.2 删除历史环境:pkill mysqldrm -rf /dat ...

  9. SD.Team主题形象小人偶

              W e ♥ S D     ♫ ♪ 咔咔咔~可能源码冲突会造成小人偶光头 :)

  10. [JavaWeb基础] 001.简单的JavaWeb代码和Tomcat配置部署

    简介: 其实说明白了就是J2EE应用开发,前端可以有很多的展现方式,后端由Java做逻辑运算和数据支撑.适用于创建服务器应用程序和服务,为搭建具有可伸缩性.灵活性.易维护性的商务系统提供了良好的机制. ...