Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

expect(element).to.have.style('height', '323px')

See original GitHub issue

How can I get the element height or width?

Something like:

cy.get(mainMenu).expect(element).to.have.style('height', '323px');
cy.get(mainMenu).expect(element).to.have.style('width', '20px');

Is it possible?

Maybe using this: https://github.com/darlanmendonca/chai-style ?

Issue Analytics

State:
Created 6 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

18reactions

brian-manncommented, Mar 1, 2018

@johnunclesam the assertion you’re looking for is documented here: https://docs.cypress.io/guides/references/assertions.html#Chai-jQuery

It’s to.have.css(....)

The way you most commonly use assertions is with .should() as documented here.

https://docs.cypress.io/guides/references/assertions.html#Common-Assertions

// assuming mainMenu is a string selector here
cy.get(mainMenu).should('have.css', 'height', ...)

When you have a direct element reference that’s when you use expect(subject)

cy.get(mainMenu).should(($el) => {
  expect($el).to.have.css('height', ...)
})

0reactions

jennifer-shehanecommented, Apr 24, 2019

@cjohn17

cy.get(mainMenu).should('have.css', 'height', '55px')

Top Results From Across the Web

height - CSS: Cascading Style Sheets - MDN Web Docs

The height CSS property specifies the height of an element. By default, the property defines the height of the content area.

How to check if element width is less than or equal to a pixel ...

In this the Invoke function by default takes the Height CSS from the get parameter .vc_icon_element-inner trimming the px value from the ...

chai-style: Documentation - Openbase

Use method .style to inspect style of a element, e.g. ... element.style.height = '50vh' expect(element).to.have.style('height', '50vh') // too works if you ...

HTML DOM Style height Property - W3Schools

The overflowing content can be manipulated with the overflow property. Tip: Use the width property to set or return the width of an...

Select Page Elements | Basic Guides - TestCafe

For more complex queries, however, CSS selectors get longer and difficult to read, ... You can use selectors to inspect elements, define action...