如何在Cypress中校验页面菜单列表与fixtures预设列表是否一致

你可以通过加载fixture配置文件获取预期菜单列表，再提取页面实际渲染的菜单文本，执行数组深度匹配即可完成校验，参考代码如下：

cy.fixture('Toolbar.json').then(toolbarConfig => {
  const expectedMenuList = toolbarConfig.toolbar_elements
  // 提取页面所有主菜单文本
  cy.get('.mainMenu li a').then($menuItems => {
    const actualMenuList = [...$menuItems].map(el => el.textContent.trim())
    // 校验两个数组内容、顺序完全一致
    expect(actualMenuList).to.deep.equal(expectedMenuList)
  })
})

说明 #

• 该断言已经覆盖了菜单长度校验的逻辑，你之前单独写的长度校验代码可以省略
• 如果仅要求菜单元素完全匹配、不限制展示顺序，把断言中的to.deep.equal替换为to.deep.members即可
• 提取文本时的trim()用于处理HTML结构中可能存在的换行、缩进空白导致的匹配失败，如果你确认菜单文本无多余空白可移除该方法

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