Cypress使用contains时忽略非点击元素 定位container内带Login的可点击元素

原生语法实现（无需自定义命令） #

Cypress 原生的contains方法支持传入选择器作为第一个参数，直接就能实现你要的过滤效果，一行代码即可：

cy.get('.container').contains('button, a, input[type="submit"]', 'Login')

该写法会自动在.container范围内，只匹配**标签为button、a、input[type=submit]**且包含指定文本的元素，直接过滤掉h2这类非可点击标签的匹配项，同时自动兼容input提交按钮的value属性文本匹配。

自定义命令实现 #

如果需要封装为可复用的findClickable自定义命令，正确的实现如下：

Cypress.Commands.add('findClickable', {prevSubject: ['element']}, (
    subject: HTMLElement,
    text: string,
    options?: Partial<Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow>,
) => {
  // 一次性查询所有符合标签要求的元素，避免单独查询某类标签不存在触发超时
  return cy.wrap(subject, options)
    .contains('button, a, input[type="submit"]', text, options)
    .then($el => {
      // 校验匹配唯一性，避免多元素歧义
      if ($el.length !== 1) {
        throw new Error(`Didn't find exactly one clickable element with text "${text}". Found ${$el.length} matching elements.`)
      }
      return $el
    })
})

使用示例 #

// 用法和你预期的完全一致，支持后续链式调用Cypress方法
cy.get('.container').findClickable('Login').click()

内容的提问来源于stack exchange，提问作者Alwin