本文讲解如何正确为 Cypress 自定义命令（如 selectPanel）传递 click() 的位置选项（如 "center"、"bottomRight"），避免因字符串拼接错误导致参数失效，并提供可复用的写法与注意事项。

本文讲解如何正确为 cypress 自定义命令（如 `selectpanel`）传递 `click()` 的位置选项（如 `"center"`、`"bottomright"`），避免因字符串拼接错误导致参数失效，并提供可复用的写法与注意事项。

在 Cypress 中，cy.click() 支持可选的位置参数（如 'top'、'center'、'bottomRight' 等），用于精确控制点击坐标。当你尝试封装一个带动态位置选项的自定义方法时，关键在于：直接将变量作为参数传入，无需额外包裹引号或模板字符串——除非该变量需参与字符串拼接。

你原先的写法：

selectPanel: (panelName: string, option: string) => {
  cy.get("[id=layout-editor-panel]").click("`${option}`"); // ❌ 错误：双引号 + 模板字面量语法冲突
}

问题在于 "${option}" 实际被解析为字面量字符串（含反引号和 $ 符号），而非变量值。Cypress 会尝试点击一个名为 "${option}" 的无效位置，从而报错或行为异常。

✅ 正确写法如下（简洁且语义清晰）：

selectPanel: (panelName: string, option: string) => {
  cy.get("[id=layout-editor-panel]").click(option); // ✅ 直接传入变量
}

调用示例：

cy.selectPanel('layout-panel', 'center');      // 点击中心
cy.selectPanel('layout-panel', 'bottomRight'); // 点击右下角
cy.selectPanel('layout-panel', 'topLeft');     // 点击左上角

⚠️ 注意事项：

• option 必须是 Cypress 官方支持的 position values（如 'center', 'top', 'bottom', 'topLeft', 'bottomRight' 等），否则会触发警告或默认回退至中心点击。
• 若需根据 panelName 动态构造选择器（如 id 属性），才需使用模板字符串，此时应仅对选择器部分使用反引号，click() 参数仍保持裸变量：

  selectPanel: (panelName: string, option: string) => {
    cy.get(`[id="${panelName}"]`).click(option); // ✅ 仅选择器用模板，click 参数不加引号
  }

• 建议为 option 参数添加 TypeScript 类型约束，提升健壮性：

  type ClickPosition = 'center' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
  selectPanel: (panelName: string, option: ClickPosition) => {
    cy.get("[id=layout-editor-panel]").click(option);
  }

总结：Cypress 的 .click() 方法接收的是原始字符串值，而非字符串字面量表达式。传参时应避免冗余引号或错误的模板语法，确保变量直通调用链。此举不仅修复问题，也使代码更易读、可维护，并与 Cypress 最佳实践保持一致。