(feat) Ignore attributes

[talentlessguy]

Is your feature request related to a problem? Please describe.

I have an app that is built with styled-components so all classNames are generated randomly.

Describe the solution you'd like

Some option like ignoreAttributes would fit.

That'd be nice to skip classNames so snapshots will work properly.

E.g. instead of this:

-    <div class="sc-bdVaJa sc-bwzfXH Primitives__Page-sc-12hrqp0-4 gQrDDx">
18 	-      <h1
19 	-        font-size="calc(1.8em + 5vw)"
20 	-        font-weight="bold"
21 	-        class="sc-bdVaJa sc-htpNat sc-bxivhb jcKHLF"
22 	-      >
23 	-        Komfy
24 	-      </h1>

I would see this:

-    <div>
18 	-      <h1
19 	-        font-size="calc(1.8em + 5vw)"
20 	-        font-weight="bold"
21 	-      >
22 	-        Komfy
23 	-      </h1>

Describe alternatives you've considered
Image snapshots

[skozin]

A similar issue in @cypress/snapshot: cypress-io/snapshot#79.

I would extend this to "Support ignoring certain attributes" or "Allow specifying custom DOM serialization function". In our case, we need to ignore programmatically-generated style attributes.

[talentlessguy]

@skozin "Support ignoring certain attributes" sounds awesome.

So it can look like:

{
  ...,
  ignoreAttributes: ['style', 'class']
}

[Vandivier]

ignoreAttributes should be an array which can include string or regex

I am using angular to prerender a static site and view encapsulation generates attributes prefixed with _ngcontent- and then a hash is appended. For example _ngcontent-vga-c1

[Vandivier]

Another approach would be like ignoreFunction which passes the document string into this function and the result is processed before diffing against the old snapshot. The current issue is ignoring attributes but an ignoreFunction could have additional use cases. Another use case I am working around separately is to ignore marketing analytics pixel tags, which get a UUI inserted, for example.

[talentlessguy]

@Vandivier what about both ignoreAttributes and ignoreFunction (some prefer X, others prefer Y)? or it is overkill in your opinion?

[Vandivier]

I don't think it's overkill. We would need to pick one to run first though. I imagine ignoreAttributes should run first so that if you debug ignoreFunction all other changes are already processed.

[franciscotrillo]

This would be useful when working with vue components that include scoped styles. Since the framework adds a data-v-{hash} attribute to the elements.
But an array of attribute names would not be enough. The hash is part of the name so a regEx or a comparator function would be better.

[Vandivier]

@talentlessguy @franciscotrillo I agree to prefer regex over an array of attribute names.

The implementation could be similar to the Angular sanitizer options feature requested here:
angular/angular#36650

[dheerajvs]

Similar to OP, I'm using a library (styletron) which compiles styles to atomic css. However I feel ignoring the class names may defeat the utility of snapshot testing when styles are changes inadvertently.

Instead, if we have custom serializers like jest has for snapshot testing, we can write a serializer that substitutes class names with actual styles. This will be very useful when diffing snapshots that differ in styles.