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.

Cypress getting wrong value for px size

See original GitHub issue

Current behavior

Not sure why cypress is not using the value specified in the css class “b1”, like this:

.b1 {
  border: 1px solid;
}

In the test html file

  <div id="b1" class="b1">Borders</div>

The following test fails

    it("Border size 1px", () => {
      cy.get("#b1")
        .should("have.class", "b1")
        .should("have.css", "border-top-width", "1px")
    });

snap-02

Yet when I look at the class definition from the browser debug console, it clearly shows the class to have a px size of 1?

snap-03

Versions

6.3.0

Issue Analytics

State:
Created 3 years ago
Comments:10 (2 by maintainers)

Top GitHub Comments

4reactions

Lutteneggercommented, Apr 25, 2022

I had a similar issue and found a fix that worked for me. Turns out, I was zoomed out in my browser (at 75%) and that was messing with the styles when the tests were running for some reason in Chrome. When I zoomed back in and brought the browser view back to 100%, the test passed for me and I wasn’t getting a size error.

1reaction

onyriuscommented, May 24, 2022

@Luttenegger I did the same here and works. Thanks for your help! ❤️

Top Results From Across the Web

Cypress is reporting the wrong size on element - Stack Overflow

When I inspect the CSS and the dev inspector, I see the correct size being rendered. But cypress is reporting 16.8px .

viewport | Cypress Documentation

Control the size and orientation of the screen for your application. You can set the viewport's width and height globally by defining viewportWidth...

Element.getBoundingClientRect() - Web APIs | MDN

The left , top , right , bottom , x , y , width , and height properties describe the position and size...

Testing pseudo-elements in Cypress - Reflect.run

Why can't cy.get() access pseudo elements? ... p { max-width: 50vw; margin: 15px auto; line-height: 1.5; font-size: 1.2rem; } ...

cypress-movie - npm

Example capturing high resolution video of the test run with ... The viewport width and height are also set to the same values...