cypress 遍历元素的方法有哪些?

简介: 大家好,我是阿萨。昨天学习了cypress的元素操作方法。今天我们继续学习cypress的元素遍历方法。

日常我们查找一系列具有相似特征的元素时,经常只想获取到其中某一个元素。该如何获取呢?


1. children


比如要获取面包屑中的选中的,就可以使用如何方法:


1.jpg


cy.get('.breadcrumb').children('.active')// 找到Data 元素


2.closest


从字面意思我们就可以知道是离得最近的。是离得最近的父亲元素。


2.jpg


cy.get('.badge')  .closest('ul') // 找到父亲是个列表


3.eq 使用索引去获取元素。通过是一系列元素中的第几个。index 从0 开始。


3.jpg


cy.get('.traversal-list>li')  .eq(1) //找到siamese


4. filter 过滤,通过指定的选择器去过滤元素。比如一系列的tabpage 里选择选中的那个。


4.jpg


cy.get('.nav>li')  .filter('.active')  //找到About


5.find


用来查找子孙的,通过选择器查找。


5.jpg


cy.get('.pagination').find('li').find('a')//找到7个


6.first/last/next/nextall/prev/prevAll


这个就是找个列表里的第一个,最后一个,下一个,以及剩余所有的,qian'm前面一个,前面所有元素。


6.jpg


cy.get('.buttons .btn').first() //找到Linkcy.get('.buttons .btn').last() //找到Submitcy.get('.buttons .btn').first().next() // 找到Buttoncy.get('.buttons .btn').first().nextAll() //找到除Link 之外的其他三个cy.get('.buttons .btn').first().next().prev()// cy.get('.buttons .btn').first().next().prevAll()


7.not


从找到的列表里排除某个元素,就用not


7.jpg


cy.get('.disabled .btn')  .not('[disabled]')//找到Button


8.parent 和parents


这个很好理解。就是找到父元素。


8.jpg


cy.get('.traversal-cite').parent()cy.get('.traversal-cite').parents()


9. siblings


获取当前元素的兄弟元素。


9.jpg


cy.get('.pills .active').siblings()//找到Profile 和Messages


10. nextUntil/parentsUntil/prevUntilnextUtil 一直向后找兄弟元素的子元素, 直到遇到指定元素就停。


prevUntil 一直向前找找兄弟元素的子元素,直到遇到指定元素就停

parentsUntil 一直找该元素的父元素里的子元素,直到遇到指定元素就停


10.jpg


cy.get('.foods-list').find('#nuts').prevUntil('#veggies') //找到 cucumbers, carrots, corncy.get('.foods-list').find('#veggies').prevUntil('#nuts')  //找到 cucumbers, carrots, corncy.get('.foods-list').find('#corn').parentsUntil('veggies') //找到 cucumbers, carrots, corn


今天遍历用处挺广的。 你学会了吗? 如果觉得阿萨的内容对你有帮助,欢迎围观点赞。

相关文章
|
前端开发 JavaScript
cypress 如何定位元素?
cypress 如何定位元素?
334 0
cypress 如何定位元素?
|
小程序 前端开发 程序员
不得不说,这19个程序员兼职平台让我1年收入60w
关于程序员接私活,社会各界说法不一。
2145 1
|
XML JSON API
免费手机号码归属地API查询接口
一、淘宝网API    API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443 参数: tel:手机号码 返回:JSON 二、拍拍API   API地址:   http://virtual.
5664 0
|
人工智能 Java
通过okhttp调用SSE流式接口,并将消息返回给客户端
通过okhttp调用SSE流式接口,并将消息返回给客户端
|
数据采集 监控 安全
|
监控 大数据 Java
使用Apache Flink进行大数据实时流处理
Apache Flink是开源流处理框架,擅长低延迟、高吞吐量实时数据流处理。本文深入解析Flink的核心概念、架构(包括客户端、作业管理器、任务管理器和数据源/接收器)和事件时间、窗口、状态管理等特性。通过实战代码展示Flink在词频统计中的应用,讨论其实战挑战与优化。Flink作为大数据处理的关键组件,将持续影响实时处理领域。
2132 5
|
NoSQL Java Redis
【Spring Boot 源码学习】JedisConnectionConfiguration 详解
本篇 Huazie 带大家从源码分析 JedisConnectionConfiguration 配置类
969 6
【Spring Boot 源码学习】JedisConnectionConfiguration 详解
|
Prometheus 监控 Cloud Native
SpringBoot3 整合Prometheus + Grafana
SpringBoot3 整合Prometheus + Grafana
SpringBoot3 整合Prometheus + Grafana
|
自然语言处理 JavaScript 计算机视觉
ModelScope安装问题之无法安装如何解决
ModelScope安装是指设置和部署ModelScope环境的过程;本合集将提供ModelScope安装步骤、配置要求和环境准备,以便用户顺利启动ModelScope进行模型开发和测试。
872 0