search

chromaui / chromatic-e2e

Archive end-to-end tests to be replayed in Storybook and Chromatic
MIT License
21 stars 4 forks source link

@chromatic-com/playwright - Using data-chromatic=ignore on an element that displays a date results in flaky diff checks #184

Open ryan-case-ml opened 3 months ago

ryan-case-ml commented 3 months ago

Describe the bug I have an element in my UI that i wrap with a span that has the data-chromatic=ignore attribute so that I don't get diffs on it since that value can change daily (it displays a date). The problem is, since this date can change, so can the width of the element, causing Chromatic to flag it as a diff. According to chromatic docs, this is intended functionality:

It’s important to ensure the calculated bounding rectangle fully covers the changing content and maintains the exact dimensions as the baseline (e.g., width, height, and relative positioning). If the dimensions change, Chromatic will capture the incoming changes.

This is pretty frustrating to deal with. There has to be a better way to handle ignoring elements of varying widths.

jackie-linz commented 2 weeks ago

we run this this too. we worked around it by making the element wider (e.g. 100% of parent element) so the text length change does not impact element width