本文介绍如何在 cypress 中对同一选择器匹配的多个 dom 元素中，仅点击指定子集（如前 5 个），避免 `multiple: true` 的全量点击问题，并解决 `.each()` + 条件判断 + `cy.wrap().click()` 的标准实践。
在 Cypress 测试中，当页面存在多个具有相同 CSS 选择器（例如 .action-button 或 [data-testid="item"]）的元素时，cy.get(selector) 默认返回所有匹配项。若直接调用 .click({ multiple: true })，Cypress 会依次点击全部元素——这虽合法，但往往不符合真实交互场景（例如：仅需操作前 N 项、偶数索引项或满足特定文本/状态的项）。
此时，不能使用 cy.get().click({ multiple: true }) 粗粒度处理，也不能尝试 Cypress._.times(5, () => cy.get(...).first().click()) 等错误链式调用（因 cy.get() 返回的是命令链而非原生数组，且 cy.click() 严格要求单元素上下文）。
✅ 正确解法是利用 .each() 遍历每个 jQuery 封装元素（$el），结合索引（index）或自定义逻辑筛选目标项，并用 cy.wrap($el).click() 显式包裹单个元素执行点击：
// 示例：点击前 5 个匹配 .product-card 的元素
cy.get('.product-card').each(($el, index) => {
if (index < 5) {
cy.wrap($el).click({ force: true }); // force 可选，用于覆盖 disabled/overlay 等场景
}
});
// 示例：点击索引为偶数的元素（第 1、3、5... 个）
cy.get('[data-testid="list-item"]').each(($el, index) => {
if (index % 2 === 0) {
cy.wrap($el).click();
}
});
// 进阶：按元素内容条件点击（如仅点击含 "Premium" 文本的按钮）
cy.get('button').each(($el) => {
if ($el.text().includes('Premium')) {
cy.wrap($el).click();
}
});⚠️ 注意事项：
- cy.wrap($el) 是关键：它将原生 jQuery 对象重新注入 Cypress 命令队列，使后续 .click() 能被正确调度；
- .each() 内部的 cy 命令会自动排队执行，确保顺序与 DOM 索引一致；
- 避免在 .each() 外部使用 cy.get().eq(n).click() 循环——这会重复查询 DOM，效率低且可能因动态渲染导致索引偏移；
- 若需等待元素稳定（如异步加载后），建议先用 cy.get(selector).should('have.length', 10) 断言总数，再执行 .each()。
总结：Cypress 的命令式、链式设计决定了“批量操作”必须通过遍历 + 条件 + 单元素封装来实现。掌握 .each() 与 cy.wrap() 的组合，是精准控制多元素交互的核心技能。
