柏树单击我的目标元素上方的元素，处于同一位置

Question

我有一个div彼此之间包含两个元素：

• 一个是SVG条形图，每个条形图都是带有数据测试的矩形，
• 另一个是一个输入范围，该输入范围放在条形图的顶部，取消使得范围长度与图表宽度匹配。它涵盖了整个图，以便在图表上接收任何单击事件。它的不透明度设置为0.01，

这是它的外观：

当我单击符合的bar时柏树中的测试ID，我希望它更新范围值，因为它在标准浏览器中工作。

但是不是。如果我尝试cy.cy.click的矩形，则它不起作用，因为它只是尝试单击rect。

我尝试计算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);
  });

但是，当单击注册时，XY坐标似乎是相关的，好像我根本没有设置任何坐标。这是传递给.click的坐标：

 click 19.646743774414062 867.7333374023438

这是单击日志：

编辑：我有混合的X和Y坐标，现在在正确的位置点击，但仍然没有触发滑块的事件