Cypress 10中如何校验下拉列表元素是否按字母/数字规则排序

一、通用排序规则校验（字母/数值顺序） #

核心逻辑是先提取所有下拉选项的实际展示文本，再根据排序规则生成基准排序数组，最后对比两个数组是否完全一致。

• 字母顺序校验：支持适配中文拼音、英文大小写忽略等场景，用localeCompare做本地化排序对比
• 数值顺序校验：提取选项中的数值转成数字类型后做排序对比

可直接复用的代码片段：

// 打开下拉后执行校验，将选择器替换为项目实际的下拉选项选择器，如组件库的.ant-select-item、.el-select-dropdown__item等
cy.get('替换为你的下拉选项DOM选择器').then($options => {
  // 提取所有选项的实际展示文本，去除首尾无效空格
  const actualOptionList = [...$options].map(item => item.textContent.trim())

  // 1. 字母升序校验（不区分大小写，适配中文拼音排序）
  const expectedAlphabetList = [...actualOptionList].sort((a, b) => 
    a.localeCompare(b, 'zh-CN', { sensitivity: 'base' })
  )
  expect(actualOptionList).to.deep.equal(expectedAlphabetList, '下拉选项未按字母规则排序')

  // 2. 数值升序校验（适配纯数字选项场景）
  const expectedNumberList = [...actualOptionList].sort((a, b) => Number(a) - Number(b))
  expect(actualOptionList).to.deep.equal(expectedNumberList, '下拉选项未按数值规则排序')
})

注意：如果需要校验降序，只需把sort方法里的对比参数a、b互换即可

二、指定位数数字规则排序校验实现 #

对应需要按选项中固定长度数字片段排序的场景，例如下拉选项带固定长度工号、编码需要按编码数值排序的场景：

实现步骤：

• 提前确认指定位数数字的匹配规则：比如是文本开头的N位数字、还是文本中任意位置的连续N位数字
• 遍历所有选项，从文本中提取符合长度要求的数字片段，转成数值类型作为排序依据
• 基于提取的排序key生成基准排序数组，和实际提取的选项数组做全等对比

可直接复用的代码片段：

cy.get('替换为你的下拉选项DOM选择器').then($options => {
  const actualOptionList = [...$options].map(item => item.textContent.trim())
  // 按实际需求修改指定位数，示例为匹配连续6位数字
  const TARGET_DIGIT_LEN = 6
  const digitMatchReg = new RegExp(`\\d{${TARGET_DIGIT_LEN}}`)

  // 从选项文本中提取指定位数数字作为排序key
  const getSortKey = (text) => {
    const matchResult = text.match(digitMatchReg)
    if (!matchResult) throw new Error(`选项「${text}」中未找到${TARGET_DIGIT_LEN}位有效数字，无法执行排序校验`)
    return Number(matchResult[0])
  }

  // 生成按指定位数数字升序的基准数组
  const expectedSortList = [...actualOptionList].sort((a, b) => getSortKey(a) - getSortKey(b))
  expect(actualOptionList).to.deep.equal(expectedSortList, `下拉选项未按${TARGET_DIGIT_LEN}位数字规则排序`)
})

注意：如果下拉用了虚拟滚动，一定要先滚动下拉列表到底部，加载完全部选项后再执行提取逻辑，否则会漏判数据

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