cypress - getBoundingClientRect returns an empty object - Stack Overflow

I'm using Cypress 11.2.0 with Pragmatic DnD library - testing the drag and drop of elements. In my Cypress test, when using getBoundingClientRect it returns an empty object {}. This should be returning data including the x and y co-ordinates of the element. Any idea how to get the co-ordinates of an element in Cypress?

cy.get('[data-test="drag-handle"]')
  .first()
  .then(($target) => {
    let coordsDrop = $target[0].getBoundingClientRect();
    cy.log('coordsDrop', coordsDrop);
  })

I'm using Cypress 11.2.0 with Pragmatic DnD library - testing the drag and drop of elements. In my Cypress test, when using getBoundingClientRect it returns an empty object {}. This should be returning data including the x and y co-ordinates of the element. Any idea how to get the co-ordinates of an element in Cypress?

cy.get('[data-test="drag-handle"]')
  .first()
  .then(($target) => {
    let coordsDrop = $target[0].getBoundingClientRect();
    cy.log('coordsDrop', coordsDrop);
  })

• cypress
• e2e-testing
• getboundingclientrect
• pragmatic-dnd

Share Improve this question Follow edited Mar 6 at 1:18 Neil Dello 5566 bronze badges asked Dec 29, 2024 at 12:17 JoeTideeJoeTidee 26.2k2929 gold badges113113 silver badges163163 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 10

There is no way an element returns an empty bounding client rect, you just need to look a bit harder.

For example:

cy.visit('https://example');

cy.get('h1')
  .first()
  .then(($target) => {
    let coordsDrop = $target[0].getBoundingClientRect();
    cy.log('coordsDrop', coordsDrop);
    console.log('coordsDrop', coordsDrop);
  })

The log:

Click the log entry:

or use consolg.log(coords)