搭载Cucumber Preprocessor的Cypress中如何用cy.each正确遍历保存数组

你当前的代码是在each遍历的每一轮都直接打印整个数组a，每轮遍历都会往数组里新增1个卡片内容，所以自然会依次输出累加后的数组，而不是独立的单个卡片内容。

方案1：单独打印每个卡片的内容 #

不需要额外定义数组存储，遍历过程中直接打印当前卡片的内容即可：

Then('validate upcoming coursecard all parameters',()=>{
    cy.get('.upcoming_course_card')
    .each(($li, index, $lis) => {
        // 直接打印当前卡片的文本内容
        console.log($li[0].innerText)
    }) 
})

方案2：收集所有卡片内容后统一打印 #

如果需要把所有卡片内容存在数组里后续使用，把打印逻辑移到each遍历结束之后即可：

Then('validate upcoming coursecard all parameters',()=>{
    const a = []
    cy.get('.upcoming_course_card')
    .each(($li, index, $lis) => {
        a.push($li[0].innerText)
    })
    .then(() => {
        // 等所有遍历完成后，一次性打印全部内容
        console.log(a)
        // 也可以遍历数组逐个打印独立内容
        a.forEach(item => console.log(item))
    })
})

如果需要分别获取课程名称、教师姓名、报名按钮等独立参数，可以在每个卡片内通过子选择器定位对应元素提取，示例如下（可根据你实际的DOM类名调整选择器）：

Then('validate upcoming coursecard all parameters',()=>{
    cy.get('.upcoming_course_card')
    .each(($card) => {
        // 提取课程名称，替换为你实际的课程名称类名
        const courseName = $card.find('.course_name').text().trim()
        // 提取教师姓名，替换为你实际的教师信息类名
        const teacherName = $card.find('.teacher_name').text().trim()
        // 提取课程日期，替换为你实际的课程日期类名
        const courseDate = $card.find('.course_date').text().trim()
        // 提取报名按钮文本，替换为你实际的报名按钮类名
        const enrollBtnText = $card.find('.enroll_btn').text().trim()
        
        // 打印当前卡片的各字段
        console.log({
            课程名称: courseName,
            教师姓名: teacherName,
            课程日期: courseDate,
            报名按钮文本: enrollBtnText
        })
    }) 
})

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