Cypress中SQL查询数组与UI元素列表无序对比及排序异常问题

• 异步操作未正确等待
  Cypress获取UI元素是异步流程，如果直接在cy.get()的循环外提取数组并排序，很可能数组还没被完全填充就执行了排序操作，导致结果不对。必须把排序和对比逻辑放在.then()回调里，确保所有UI元素都加载完成：

  cy.get('.name-item').then(els => {
    const myArray = Array.from(els).map(el => el.textContent.trim())
    const sortedUIArray = myArray.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
    // 这里和排序后的SQL数组对比
  })
  

• 文本含隐藏字符干扰排序
  UI元素的文本经常带有前后空格、换行符或其他不可见字符，比如SQL返回的是"张三"，但UI提取的是" 张三\n"，这些额外字符会打乱排序逻辑。提取文本时一定要用trim()清理：

  const myArray = Array.from(els).map(el => el.textContent.trim())
  

• 默认排序规则不匹配需求
  JavaScript的Array.sort()默认按Unicode编码排序，不是纯自然字母顺序。比如大写字母会排在小写前面，中文排序也可能不符合预期。改用localeCompare自定义排序规则，能适配多语言和大小写不敏感的排序：

  myArray.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
  

• SQL数组未正确提取字段
  如果SQL返回的是对象数组（比如[{name: "张三"}, {name: "李四"}]），直接对对象数组排序是无效的，必须先提取出name字段再排序：

  const sortedSQLArray = sqlQueryResult.map(item => item.name.trim())
    .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
  

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