Uploaded October 2024 | Updated September 2026, 1 week ago
This video shows how the Cypress test can confirm the vertical alignment of two elements. We get the bounding client rectangle from both elements and then compare the centers' values. We use "closeTo" assertion since floating-point values might disagree by a tiny amount. We can simplify the test using "cypress-map" plugin and even make the entire chain retryable. Find the source code at glebbahmutov.com/cypress-examples/recipes/vertical-center.html
This video shows how the Cypress test can confirm the vertical alignment of two elements. We get the bounding client rectangle from both elements and then compare the centers' values. We use "closeTo" assertion since floating-point values might disagree by a tiny amount. We can simplify the test using "cypress-map" plugin and even make the entire chain retryable. Find the source code at glebbahmutov.com/cypress-examples/recipes/vertical-center.html
