filter
获取匹配特定选择器的DOM元素。
info
与.not()
功能相反
info
该命令的查询行为与jQuery中的
.filter()
完全一致。
语法
.filter(selector)
.filter(selector, options)
用法
正确用法
cy.get('td').filter('.users') // 获取所有包含'.users'类的元素
错误用法
cy.filter('.animated') // 错误,不能直接链式调用'cy'
cy.clock().filter() // 错误,'clock'不返回DOM元素
参数
selector (字符串选择器)
用于过滤匹配DOM元素的选择器。
options (对象)
传入选项对象以改变.filter()
的默认行为。
选项 | 默认值 | 描述 |
---|---|---|
log | true | 在命令日志中显示该命令 |
timeout | defaultCommandTimeout | 等待.filter() 解析的时长,超过则超时 |
生成结果
.filter()
返回它找到的新DOM元素。.filter()
是一个查询命令,可以安全地链式调用其他命令。
示例
选择器
过滤当前元素集合,保留带有'active'类的元素
<ul>
<li>首页</li>
<li class="active">关于</li>
<li>服务</li>
<li>价格</li>
<li>联系</li>
</ul>
// 返回 <li>关于</li>
cy.get('ul').find('>li').filter('.active')
包含文本
通过文本过滤
可以使用jQuery :contains 选择器执行区分大小写的文本子串匹配。
<ul>
<li>首页</li>
<li>服务</li>
<li>高级服务</li>
<li>价格</li>
<li>联系</li>
</ul>
查找所有包含"服务"的列表项:
cy.get('li').filter(':contains("Services")').should('have.length', 2)
不换行空格
如果HTML包含
不换行空格实体
,而测试使用
jQuery :contains选择器,
则测试需要使用Unicode值\u00a0
代替
。
<div data-testid="testattr">
<span>Hello world</span>
</div>
cy.get('[data-testid="testattr"]').filter(':contains("Hello\u00a0world")')
规则
要求
.filter()
必须链式调用自返回DOM元素的命令。
断言
超时设置
.filter()
可能因等待元素 存在于DOM中而超时。.filter()
可能因等待添加的断言通过而超时。
命令日志
过滤li元素,保留带有'active'类的li。
cy.get('.left-nav>.nav').find('>li').filter('.active')
以上命令将在命令日志中显示为:

当点击命令日志中的filter
命令时,控制台
会输出以下内容:
