使用Cypress.Commands.overwriteQuery覆盖contains方法时报错求助

你的错误是因为overwriteQuery中对contains()的参数处理逻辑没覆盖其所有重载场景，导致调用原始方法时参数传递错位，触发内部属性访问错误。

Cypress的contains()有多种调用签名：

• 直接调用：cy.contains(text, options) 或 cy.contains(filter, text, options)
• 链式调用：cy.get(selector).contains(text, options) 或 cy.get(selector).contains(filter, text, options)

你的代码默认假设存在subject（链式调用的前置结果），但当直接调用cy.contains()时，参数顺序会完全混乱，导致originalFn接收的参数不符合预期。

修正后的commands.js代码 #

Cypress.Commands.add("clickOnLinks", (linkText) => {
  cy.get("a").contains(linkText).click();
});

// 正确覆盖contains()方法
Cypress.Commands.overwriteQuery("contains", (originalFn, ...args) => {
  let options = {};
  let subject, filter, text;

  // 处理链式调用的情况（存在subject）
  if (Cypress.dom.isElement(args[0]) || args[0] instanceof jQuery) {
    subject = args[0];
    // 链式调用的子场景：.contains(text, options) 或 .contains(filter, text, options)
    if (args.length === 2) {
      [text, options] = args.slice(1);
    } else if (args.length === 3) {
      [filter, text, options] = args.slice(1);
    }
  } else {
    // 直接调用的情况：cy.contains(text, options) 或 cy.contains(filter, text, options)
    if (args.length === 1) {
      [text] = args;
    } else if (args.length === 2) {
      if (typeof args[1] === "object") {
        [text, options] = args;
      } else {
        [filter, text] = args;
      }
    } else if (args.length === 3) {
      [filter, text, options] = args;
    }
  }

  // 统一设置忽略大小写
  options.matchCase = false;

  // 根据参数情况调用原始方法
  if (subject) {
    if (filter) {
      return originalFn(subject, filter, text, options);
    }
    return originalFn(subject, text, options);
  } else {
    if (filter) {
      return originalFn(filter, text, options);
    }
    return originalFn(text, options);
  }
});

关键修正点 #

• 使用...args接收所有参数，避免固定参数位置导致的适配问题
• 先判断是否存在subject（通过检查第一个参数是否为DOM元素或jQuery对象）
• 分别处理直接调用和链式调用的不同参数组合
• 统一设置matchCase: false后，根据参数情况正确传递给原始方法

测试验证 #

运行你的测试用例，cy.clickOnLinks("RADIANT TEE")会正确调用修正后的contains()，忽略大小写匹配链接文本，同时避免参数传递错误导致的异常。

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