在 Cypress 测试中，当通过 .then() 获取到原生 DOM 元素数组（如 HTMLElement[]）后，若需对其执行 .click()、.invoke() 等 Cypress 命令，必须先将其包装为 Cypress Chainable 对象；核心方法是使用 Cypress.$() 转为 jQuery 对象，再用 cy.wrap() 升级为 Cypress 元素。
在 cypress 测试中，当通过 `.then()` 获取到原生 dom 元素数组（如 `htmlelement[]`）后，若需对其执行 `.click()`、`.invoke()` 等 cypress 命令，必须先将其包装为 cypress chainable 对象；核心方法是使用 `cypress.$()` 转为 jquery 对象，再用 `cy.wrap()` 升级为 cypress 元素。
在实际测试中（例如操作 FullCalendar 的 .fc-event 事件项），我们常通过 cy.get().find().then($els => {...}) 遍历原生 DOM 元素。但此时回调参数 event 是标准的 HTMLElement，无法直接调用 Cypress 命令（如 event.click() 是原生行为，不触发 Cypress 自动重试、截图、日志等机制，且可能因异步渲染失败）。
✅ 正确做法：使用 Cypress.$(domElement) 将单个 DOM 元素转为 jQuery 对象，再用 cy.wrap($el) 转为 Cypress Chainable：
Cypress.Commands.add('clearScheduleEditor', () => {
cy.get(getBySelector('schedule-editor'))
.find('.fc-event')
.should('exist')
.then(($events) => {
if ($events.length === 0) return;
Cypress._.each($events, (domEvent, index) => {
// ✅ 步骤1：用 Cypress.$() 包装为 jQuery 对象
const $wrapped = Cypress.$(domEvent);
// ✅ 步骤2：用 cy.wrap() 转为 Cypress 元素，支持链式命令
cy.wrap($wrapped)
.scrollIntoView()
.click({ force: true }) // 触发 Cypress 全生命周期控制
.then(() => {
// 可在此处模拟点击删除按钮、确认弹窗等后续动作
cy.get('[data-testid="delete-event-btn"]').click();
cy.get('[data-testid="confirm-delete"]').click();
});
});
});
});
⚠️ 注意事项：
- ❌ 避免在
.each()回调中直接使用cy.get(...).eq(index).click()（如答案中第二种写法）——这会重复查询 DOM，可能因列表动态变化导致索引错位或元素失效； - ✅ 推荐对每个已获取的 DOM 元素单独包装操作，确保目标稳定；
- ? 若事件删除后列表重渲染，建议采用「循环 +
cy.get().should('not.exist')」策略替代固定长度遍历，提升稳定性； - ?
Cypress.$()本质是 Cypress 内置的 jQuery 实例，仅用于 DOM 包装，不可替代cy.get()的查找能力（它不支持选择器，只接受 DOM 节点或字符串 HTML）。
总结：DOM → jQuery → Cypress 是标准升级路径。牢记 cy.wrap(Cypress.$(element)) 这一组合，即可安全、可靠地将任意原生元素接入 Cypress 命令流，实现精准、可调试、高鲁棒性的交互测试。
