search

bahmutov / cyclope

Cypress DOM snapshots and consistent image diffing in the cloud
13 stars 2 forks source link

The checkboxes look different inside Cypress #5

Closed bahmutov closed 3 years ago

bahmutov commented 3 years ago

Real app in the browser:

Screen Shot 2021-09-20 at 16 51 16

the checkboxes are filled

In Cypress the checkboxes do not show up

Screen Shot 2021-09-20 at 16 51 26
bahmutov commented 3 years ago

Recording shows that initially the checkboxes work, but then stop after using the time-traveling debugger feature

https://user-images.githubusercontent.com/2212006/134074501-25b2eced-c5e1-4866-9591-4cfb5eba4239.mp4

bahmutov commented 3 years ago

Somehow this preload link sets the icon, but how does it get the blue background, I do not get

Screen Shot 2021-09-20 at 17 00 05
bahmutov commented 3 years ago

Found how the background is set for the checkbox

Screen Shot 2021-09-20 at 17 05 09

Uses CSS

/* CHECKED CARD */

.card .cb-container .cb-input:checked + .check {
  background: url("../assets/images/icon-check.svg"),
    linear-gradient(45deg, var(--clr-green), var(--clr-pink));
  background-repeat: no-repeat;
  background-position: center;
}
bahmutov commented 3 years ago

Before DOM snapshot restore (notice the background property)

Screen Shot 2021-09-20 at 17 13 53

After DOM snapshot restore (notice separate props and they are invalid)

Screen Shot 2021-09-20 at 17 14 16 Screen Shot 2021-09-20 at 17 14 27

The HEAD style is missing values for this ".check" class

Screen Shot 2021-09-20 at 17 15 32
bahmutov commented 3 years ago

Seems, DOM snapshots do not understand background with URL + gradient

Does not work:

background: url("../assets/images/icon-check.svg"),
    linear-gradient(45deg, var(--clr-green), var(--clr-pink));

Works

background: url('../assets/images/icon-check.svg');
background-color: var(--clr-green);
github-actions[bot] commented 3 years ago

:tada: This issue has been resolved in version 1.5.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket: