如何在Cypress中验证指定文本的先后顺序（含多行场景）

问题分析 #

你需要验证多行带<b>标签的文本结构，确保最终合并后的文本顺序和格式符合Book:This is the book of English这类预期。原代码存在几个问题：变量名大小写不一致、trim(':')用法错误（trim无法接收参数）、缺少断言验证步骤。

具体实现代码 #

针对多行场景，推荐以下两种验证方式：

方式1：逐行验证（适合明确每行预期的场景）

// 按顺序定义每行的预期文本
const expectedLines = [
  'Book:This is the book of English',
  // 添加其他行的预期文本...
];

// 遍历每个span元素，逐行验证
cy.get('span').each(($element, index) => {
  // 提取文本并格式化：去除冒号前后空格、合并多余空格、清理首尾空白
  const formattedText = $element.text()
    .replace(/\s*:\s*/, ':')  // 把" : "或" :"" : "替换成":"
    .replace(/\s+/g, ' ')     // 合并多个连续空格为单个空格
    .trim();                  // 清理首尾空白

  // 断言当前行文本与预期一致
  expect(formattedText).to.equal(expectedLines[index]);
});

方式2：整体文本顺序验证（适合验证所有行的整体顺序）

// 定义所有行的预期文本（按顺序拼接）
const expectedFullText = `Book:This is the book of English
// 其他行的预期文本...`;

cy.get('span')
  .invoke('text')  // 获取所有span的合并文本
  .then(fullText => {
    // 格式化整体文本
    const formattedFullText = fullText
      .replace(/\s*:\s*/g, ':')
      .replace(/\s+/g, ' ')
      .split('\n')
      .map(line => line.trim())
      .filter(line => line)  // 过滤空行
      .join('\n');

    // 断言整体文本顺序和内容符合预期
    expect(formattedFullText).to.equal(expectedFullText);
  });

关键说明 #

1. 文本格式化逻辑：用正则\s*:\s*匹配冒号前后的任意空格，替换为无空格的:；\s+匹配多个连续空格，替换为单个空格，确保文本格式统一。
2. 断言必要性：Cypress测试必须包含断言，否则无法验证结果是否符合预期。
3. 多行处理：通过each()遍历逐行验证，或通过split('\n')拆分每行后整体对比，覆盖你提到的多行场景。

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