Cypress点击目标元素上方同位置元素触发滑块事件异常

场景说明 #

div容器内上下叠放两个元素：

• 下层为SVG柱状图，每根柱子是带有data-test-id属性的rect元素
• 上层为input range滑块，经偏移调整后长度与图表宽度一致，完整覆盖整个图表区域以接收所有点击事件，设置opacity: 0.01

问题表现 #

测试预期：点击指定data-test-id的柱状条时，和浏览器真实交互一致，自动更新range滑块的值。
实际异常：

• 直接对目标rect元素执行cy.click()，事件仅作用于rect元素本身，无法触发上层滑块响应
• 最初尝试通过坐标计算点击range元素时，混淆了.click()方法的x/y参数对应关系，修正坐标后点击位置准确，但仍无法触发滑块的交互事件

最初实现的问题代码：

cy.get("[data-test-id='2021-07-28T05:56:00Z']")
  .as("targetBar")
  .then(() =>
    cy.get('[data-test-id="conversations-offset-cursor"]').as("cursor")
  )
  .then(() => {
    const targetOffset = this.targetBar.offset();
    const cursorOffset = this.cursor.offset();

    const top = targetOffset.top - cursorOffset.top;
    const left = targetOffset.left - cursorOffset.left;

    cy.get('[data-test-id="conversations-offset-cursor"]').click({
      x: top,
      y: left,
      force: true,
    });
    return cy.wait(10000);
  });

当时传入click方法的错误坐标值：

click 19.646743774414062 867.7333374023438

解决方法 #

1. 修正坐标映射逻辑：.click()的x参数对应元素水平方向偏移（即两个元素的left差值），y参数对应元素垂直方向偏移（即两个元素的top差值），最初代码将两个参数写反。
2. 修复坐标后仍不生效的核心原因：Cypress触发的合成click事件不会自动更新原生range输入框的value属性，也不会自动派发滑块交互依赖的input、change事件，需要在点击后手动计算对应值并触发原生事件。
3. 修正别名取值问题：通过this访问Cypress别名容易出现上下文丢失问题，直接在.then()回调中获取DOM节点计算位置更可靠。

正确实现代码：

cy.get("[data-test-id='2021-07-28T05:56:00Z']").as("targetBar")
cy.get('[data-test-id="conversations-offset-cursor"]').as("cursor")

cy.get("@targetBar").then($bar => {
  cy.get("@cursor").then($cursor => {
    const barDom = $bar[0]
    const cursorDom = $cursor[0]
    // 获取元素真实位置尺寸
    const barRect = barDom.getBoundingClientRect()
    const cursorRect = cursorDom.getBoundingClientRect()
    // 计算相对于滑块的点击坐标：取柱子水平中点、滑块垂直中点，贴合真实点击行为
    const clickX = (barRect.left + barRect.width / 2) - cursorRect.left
    const clickY = cursorRect.height / 2

    cy.get("@cursor")
      .click(clickX, clickY, { force: true })
      .then($range => {
        const rangeEl = $range[0]
        // 按点击位置占滑块宽度的比例，计算对应的滑块值
        const clickRatio = clickX / cursorRect.width
        const minVal = Number(rangeEl.min) || 0
        const maxVal = Number(rangeEl.max) || 100
        const step = Number(rangeEl.step) || 1
        let targetVal = minVal + clickRatio * (maxVal - minVal)
        // 按滑块步长校准值
        targetVal = Math.round(targetVal / step) * step
        
        // 手动更新值并派发原生事件，触发业务绑定的交互逻辑
        rangeEl.value = targetVal
        rangeEl.dispatchEvent(new Event('input', { bubbles: true }))
        rangeEl.dispatchEvent(new Event('change', { bubbles: true }))
      })
  })
})

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