Skip to main content
Cypress应用

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()的默认行为。

选项默认值描述
logtrue命令日志中显示该命令
timeoutdefaultCommandTimeout等待.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包含 不换行空格实体 &nbsp;,而测试使用 jQuery :contains选择器, 则测试需要使用Unicode值\u00a0代替&nbsp;

<div data-testid="testattr">
<span>Hello&nbsp;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

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

console.log filter

另请参阅