如何在Cypress中实现元素文本多可能性的断言？

你之前写的cy.get('element').should('have.text', 'Open' | 'Create')是错误的——|是位运算符，会将字符串转为数字（结果均为0），根本达不到OR逻辑的效果。下面是几种正确的实现方式：

方法1：自定义断言函数 #

直接在.should()中传入回调，手动校验文本是否在允许列表内：

cy.get('element').should(($el) => {
  const validStatuses = ['Open', 'Create', 'In Progress'];
  // 先去除文本前后空格，避免因空格导致断言失败
  const elementText = $el.text().trim();
  expect(validStatuses).to.include(elementText);
});

方法2：使用satisfy断言 #

借助Cypress的satisfy断言，传入校验函数判断文本是否符合条件：

const validStatuses = ['Open', 'Create', 'In Progress'];
cy.get('element')
  .invoke('text') // 获取元素文本
  .invoke('trim') // 去除前后空格
  .should('satisfy', (text) => validStatuses.includes(text));

方法3：链式or断言（冗余不推荐） #

如果允许值数量极少，也可以用链式的or断言，但新增值时需要修改代码，扩展性差：

cy.get('element').should(($el) => {
  const elementText = $el.text().trim();
  expect(elementText).to.eq('Open').or.eq('Create').or.eq('In Progress');
});

关键提示 #

实际测试中一定要处理文本的空格问题，很多页面元素的文本会包含前后空白字符，trim()能有效避免这类无意义的断言失败。

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