Cypress Get Width and Height of Element

You may use Cypress's invoke() and then() functions to access the DOM properties to get the width and height of an element.

describe('Automating The Keypress Of Zero Site',()=> {
   
   it('visit the site ',()=>{
       cy.visit('http://programsbuzz.com/user/login')
       
       cy.get('#edit-name').then(($element) => {
           const width = $element.width();
           const height = $element.height();
         
           cy.log(`Width: ${width}`);
           cy.log(`Height: ${height}`);
         });
   })
})

• The cy.get() command obtains the element, and then() allows you to do extra things with it once it's available.
• $element represents the actual DOM element wrapped in a jQuery object within the then() callback. 
• The width and height values can then be obtained using the.width() and.height() functions supplied by jQuery.