本文详解如何在 cypress 自定义命令中正确传递 click 位置参数（如 'center'、'bottomright' 等），避免因字符串模板误用导致的语法错误，并提供可复用的类型安全实现方案。
本文详解如何在 cypress 自定义命令中正确传递 click 位置参数（如 'center'、'bottomright' 等），避免因字符串模板误用导致的语法错误，并提供可复用的类型安全实现方案。
在 Cypress 中，cy.get().click() 支持多种位置选项（如 'top'、'center'、'bottomRight'、'left' 等），用于精确控制点击坐标。当你尝试封装为带参数的自定义方法时，常见误区是错误地将变量包裹在引号或冗余模板字符串中，导致 Cypress 将其识别为字面量字符串而非运行时值。
✅ 正确写法如下（推荐 TypeScript 风格）：
selectPanel: (panelName: string, option: string) => {
cy.get("[id=layout-editor-panel]").click(option);
}调用示例：
// 点击右下角
cy.selectPanel('main-panel', 'bottomRight');
// 点击中心（默认行为，显式指定更清晰）
cy.selectPanel('main-panel', 'center');
// 点击顶部中间
cy.selectPanel('main-panel', 'top');⚠️ 错误写法解析：
cy.get("[id=layout-editor-panel]").click("`${option}`"); // ❌ 双引号 + 模板字符串 → 字符串字面量 "`${option}`"
cy.get("[id=layout-editor-panel]").click(`${option}`); // ✅ 但此处纯变量，无需模板? 进阶建议：为提升类型安全与可维护性，可定义受控枚举或联合类型限定合法选项：
type ClickPosition = 'top' | 'topLeft' | 'topRight' | 'center' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'right';
selectPanel: (panelName: string, option: ClickPosition) => {
cy.get("[id=layout-editor-panel]").click(option);
}这样不仅避免运行时传入非法值（如 'middle'），还能在 IDE 中获得自动补全和编译期校验。
? 注意事项：
- click() 的位置选项仅对可见、可交互元素生效；若元素被遮挡或未渲染，请先使用 should('be.visible') 断言；
- 不要混淆 click({ position: 'bottomRight' })（旧版对象语法，已废弃）与 click('bottomRight')（当前推荐字符串语法）；
- 若需基于 panelName 动态构造选择器（如 [id="${panelName}"]），才需使用模板字符串，且必须配合反引号和 ${} 插值 —— 但本例中选择器固定，无需此操作。
通过以上调整，你的自定义方法即可灵活适配不同点击策略，同时保持代码简洁、健壮且符合 Cypress 最佳实践。
