如何使用Cypress、Mocha或Mocha-Chai检查元素不包含完整单词而非子串？

这个问题我之前也碰到过！Cypress默认的.contains()和Chai的.contain断言都是基于子串匹配的，所以遇到像professionist和professionists这种词根重叠的单词时，就会出现你遇到的误判情况。下面给你几个实用的解决方案，帮你实现完整单词级别的匹配验证：

方法1：直接用Chai的match断言结合正则单词边界 #

正则里的\b表示“单词边界”，它会匹配单词和非单词字符（比如空格、标点、字符串首尾）之间的位置，刚好能帮我们锁定完整单词。

针对你的例子，修改后的断言应该是这样的：

// 验证div2包含完整单词"professionists"
cy.get('div:nth-child(2)').invoke('text').then(text => {
  expect(text).to.match(/\bprofessionists\b/);
});

// 验证div2不包含完整单词"professionist"
cy.get('div:nth-child(2)').invoke('text').then(text => {
  expect(text).to.not.match(/\bprofessionist\b/);
});

这里用invoke('text')是为了获取元素的纯文本内容，避免HTML标签干扰匹配结果。

方法2：自定义Cypress命令，简化重复操作 #

如果需要多次做这种完整单词验证，自定义命令能让代码更简洁易读。你可以在cypress/support/commands.js里添加以下命令：

// 验证元素包含指定完整单词
Cypress.Commands.add('containsExactWord', { prevSubject: true }, (subject, word) => {
  // 转义单词里的特殊正则字符，避免匹配出错
  const escapedWord = Cypress._.escapeRegExp(word);
  // 可选加'i'标志忽略大小写
  const regex = new RegExp(`\\b${escapedWord}\\b`, 'i');
  cy.wrap(subject).invoke('text').should('match', regex);
});

// 验证元素不包含指定完整单词
Cypress.Commands.add('doesNotContainExactWord', { prevSubject: true }, (subject, word) => {
  const escapedWord = Cypress._.escapeRegExp(word);
  const regex = new RegExp(`\\b${escapedWord}\\b`, 'i');
  cy.wrap(subject).invoke('text').should('not.match', regex);
});

之后使用起来就非常简洁了：

// 验证div1的专属单词
const div1 = cy.get('div:nth-child(1)');
div1.containsExactWord('professionist');
div1.doesNotContainExactWord('professionists');

// 验证div2的专属单词
const div2 = cy.get('div:nth-child(2)');
div2.containsExactWord('professionists');
div2.doesNotContainExactWord('professionist');

方法3：数据驱动批量验证，适配多元素场景 #

针对你这种“每个div的单词只能出现在自己身上，不能出现在其他div”的场景，可以用数据驱动的方式批量处理，后续维护起来更方便：

// 先定义每个div的配置：选择器、专属单词、需要排除的其他div选择器
const divExclusiveConfigs = [
  {
    selector: 'div:nth-child(1)',
    exclusiveWords: ['professionist'],
    excludeSelectors: ['div:nth-child(2)', 'div:nth-child(3)']
  },
  {
    selector: 'div:nth-child(2)',
    exclusiveWords: ['professionists'],
    excludeSelectors: ['div:nth-child(1)', 'div:nth-child(3)']
  },
  {
    selector: 'div:nth-child(3)',
    exclusiveWords: ['your-div3-specific-word'], // 替换成div3的专属单词
    excludeSelectors: ['div:nth-child(1)', 'div:nth-child(2)']
  }
];

// 遍历配置自动执行所有验证
divExclusiveConfigs.forEach(config => {
  // 验证当前div包含所有专属单词
  cy.get(config.selector).each($div => {
    config.exclusiveWords.forEach(word => {
      cy.wrap($div).containsExactWord(word);
    });
  });

  // 验证其他div不包含当前div的专属单词
  config.excludeSelectors.forEach(excludeSelector => {
    cy.get(excludeSelector).each($div => {
      config.exclusiveWords.forEach(word => {
        cy.wrap($div).doesNotContainExactWord(word);
      });
    });
  });
});

这样以后新增div或者修改专属单词，只需要更新配置数组就行，不用重复写大量断言。

额外注意点 #

• 如果文本里带有标点（比如professionist.），\b依然能正确识别，因为标点属于非单词字符，不会影响完整单词的匹配。
• 如果需要忽略大小写验证，就在正则里保留'i'标志；如果需要严格区分大小写，去掉这个标志即可。

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