Cypress中getBoundingClientRect返回空对象，如何获取元素坐标？

针对你在Cypress 11.2.0搭配Pragmatic DnD测试拖拽时，getBoundingClientRect()返回空对象的问题，以下是几种可行的解决方法：

1. 确保元素完全渲染并可见 #

cy.get()默认等待元素存在，但有时元素虽存在却未完成布局或处于不可见状态，导致getBoundingClientRect()返回空。可以添加可见性断言强制等待元素就绪：

cy.get('[data-test="drag-handle"]')
  .first()
  .should('be.visible') // 等待元素可见且完成布局
  .then(($target) => {
    const coordsDrop = $target[0].getBoundingClientRect();
    cy.log('coordsDrop', coordsDrop);
  })

2. 使用Cypress内置的位置获取方法 #

Cypress基于jQuery提供了更可靠的offset()和position()方法，无需直接调用原生API：

• offset()：获取元素相对于文档的绝对坐标（top、left）
• position()：获取元素相对于父元素的相对坐标（top、left）

示例代码：

// 获取相对于文档的坐标
cy.get('[data-test="drag-handle"]')
  .first()
  .should('be.visible')
  .invoke('offset')
  .then((offset) => {
    cy.log('元素文档坐标：', offset); // 输出 { top: xxx, left: xxx }
  });

// 获取相对于父元素的坐标
cy.get('[data-test="drag-handle"]')
  .first()
  .should('be.visible')
  .invoke('position')
  .then((position) => {
    cy.log('元素相对坐标：', position);
  });

3. 适配Pragmatic DnD的特殊场景 #

Pragmatic DnD的拖拽组件可能存在动态渲染或动画，可增加短时间等待确保元素状态稳定：

cy.get('[data-test="drag-handle"]')
  .first()
  .should('be.visible')
  .wait(300) // 等待动画或渲染完成
  .then(($target) => {
    const coordsDrop = $target[0].getBoundingClientRect();
    cy.log('coordsDrop', coordsDrop);
  })

4. 调试元素状态 #

如果问题仍存在，可在回调中打印元素详细状态排查原因：

cy.get('[data-test="drag-handle"]')
  .first()
  .then(($target) => {
    console.log('目标元素：', $target[0]);
    console.log('元素是否可见：', $target.is(':visible'));
    console.log('坐标结果：', $target[0].getBoundingClientRect());
  })

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