How to set a range of Assertion in Cypress while trying to get the value from the CSS

Question

This is my code:

try {   
    cy.get('.hello-bar-contentwrap')
        .should('have.css','padding-top','28px')
        .should('have.css','padding-right','37px')
        .should('have.css','padding-left','37px') }

What I Intend to achieve is that CSS - Padding bottom should check for a range for ex. From 18px to 21px so that I can pass the case which is as failed below:

Something like this:

.should('have.css','height', expect('48px').to.be.closeTo('47','49'))

Issue screenshot

Did you get the workaround for the same ? I want to do a similar thing — Vaibhav Pachauri, Jul 20 '21 at 08:58

Paolo · Answer 1 · 2021-09-16T07:58:03.830

From the docs chaijs closeTo the parameters are numbers, so a little conversion will work

const cssText = '48px'
const numericHeight = +cssText.replace('px', '')
expect(numericHeight).to.be.closeTo(47, 2)      // 2nd param is +/-, not absolute

Specifically your test,

.should('have.css', 'height')
.then(height => +height.replace('px', ''))  // convert
.should('be.closeTo', 47, 2)

This must be the last in the chain, as the subject changes from element to height attribute.

How to set a range of Assertion in Cypress while trying to get the value from the CSS

1 Answers1