Cypress如何比对JSON内容与含默认ALL选项的无序下拉框值是否一致

原有代码问题 #

• 变量名不匹配：fixture回调中把数据挂载到this.cat，后续比对却调用this.category，无法正确取值
• 元素获取错误：直接获取#labels（下拉容器元素）无法遍历到子选项，需要选中其下的option元素
• 逻辑不符合需求：选项为无序状态且多了默认值ALL，按索引逐一比对的逻辑完全不匹配
• 语法错误：代码存在多余的闭合大括号，运行会直接抛出语法异常
• 异步时序问题：fixture加载是异步操作，后续cy.get如果没有放在回调链中，可能会在fixture加载完成前就执行，拿不到数据

正确实现方案 #

核心思路是先构造包含默认值ALL的预期选项数组，将预期和实际拿到的选项都排序消除顺序影响后，直接做数组深比对，100个量级的选项也可以高效完成校验。
推荐使用alias别名方案避免this上下文绑定的坑，代码示例如下：

// 加载JSON文件并设置别名
cy.fixture('label.json').as('labelConfig')

// 等待fixture加载完成后执行校验逻辑
cy.get('@labelConfig').then(config => {
  // 构造预期选项：加入默认值ALL后排序，消除顺序影响
  const expectedOptions = ['ALL', ...config.label].sort()
  // 获取下拉框所有选项
  cy.get('#labels option').then($options => {
    // 提取实际选项文本，去除首尾空格后排序
    const actualOptions = [...$options].map(item => item.textContent.trim()).sort()
    // 深比对两个数组
    expect(actualOptions).to.deep.equal(expectedOptions)
  })
})

如果要使用this挂载数据，需要保证用function声明测试用例/回调，正确绑定上下文：

it('校验下拉选项完整性', function() {
  cy.fixture('label.json').then(category => {
    this.cat = category
  })
  cy.get('#labels option').then(function($options) {
    const expected = ['ALL', ...this.cat.label].sort()
    const actual = [...$options].map(opt => opt.textContent.trim()).sort()
    expect(actual).to.deep.equal(expected)
  })
})

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