Cypress如何实现固定顺序数组组合语句的全量合法值测试？

核心思路 #

放弃手动硬编码枚举所有合法字符串的方式，通过代码自动按指定的数组顺序遍历所有元素，拼接生成全部符合规则的合法值集合，再将集合传入断言即可。后续数组元素增删、甚至新增分段数组时，仅需修改源数组定义，无需调整断言逻辑。

基础实现（适配当前三个数组的场景） #

直接通过三层循环按顺序拼接所有合法组合，逻辑简单直观：

// 定义分段源数组，后续增删元素仅需修改此处
const initialArray = ['He', 'She', 'It']
const middleArray = ['is', 'was', 'were']
const lastArray = ['a dog', 'a cat', 'a wizard']

// 自动生成所有符合顺序规则的合法文本
const validTextList = []
initialArray.forEach(firstPart => {
  middleArray.forEach(secondPart => {
    lastArray.forEach(thirdPart => {
      validTextList.push(`${firstPart} ${secondPart} ${thirdPart}`)
    })
  })
})

// 原有断言逻辑直接复用生成的合法集合
cy.get(`.${className} .legend_title`).should((element) => {
  const targetText = element.text().trim()
  expect(targetText).to.be.oneOf(validTextList)
})

扩展实现（适配任意数量分段数组的场景） #

如果后续可能增加更多分段（比如新增第四段、第五段数组），可以封装通用的顺序组合生成函数，无需逐层写循环：

/**
 * 按数组传入顺序生成所有拼接组合
 * @param {string} separator 拼接分隔符，当前场景为空格
 * @param  {...string[]} partArrays 按拼接顺序传入的各分段元素数组
 * @returns {string[]} 所有合法拼接结果
 */
function generateAllValidTexts(separator, ...partArrays) {
  return partArrays.reduce((prevResults, currentPartArray) => {
    const temp = []
    prevResults.forEach(prevText => {
      currentPartArray.forEach(currentPart => {
        temp.push(prevText ? `${prevText}${separator}${currentPart}` : currentPart)
      })
    })
    return temp
  }, [''])
}

// 调用示例，后续新增分段数组直接在参数后追加即可
const validTextList = generateAllValidTexts(' ', initialArray, middleArray, lastArray)
// 例：新增fourthArray后，调用方式改为 generateAllValidTexts(' ', initialArray, middleArray, lastArray, fourthArray) 即可

校验逻辑说明 #

• 自动生成的集合完全符合顺序要求：只有严格按照「第一数组元素+第二数组元素+第三数组元素」顺序拼接的内容才会出现在合法列表中，乱序、缺段、多段的内容都会断言失败，完全匹配校验规则。
• 维护成本极低：单个数组增删元素、新增/删除分段数组时，仅需修改源数组定义和函数入参，无需手动维护长串的枚举字符串。

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