Ability to "mask" areas of the application so visual regression will not be compared against certain parts of the page.

[Carter Capocaccia]

Mode

Page screenshots

Feature description

Use case: If my website has an image carousel and the image content changes routinely or at random, I may want to disregard differences in this section of the website.

Potential solution: A configuration that allows identifiers to be declared for DOM nodes (class, ID, attributes) and sets the CSS property of Visibility with the value of None. Alternatively, if the comparison tool is capable, ignore differences that occur inside certain dom nodes.

This will make specified dom nodes invisible and therefore these elements will not cause false failures in visual regression testing.

Example configuration:

export const config: CustomProjectConfig = {
  pageShots: {
    pages: [
      { id: "capocaccia.dev/posts/uses", path: "/posts/uses", name: "Uses", ignore: ['data-testid="post-cover-image"'] },
      { id: "capocaccia.dev/", path: "/", name: "Home" },
    ],
    pageUrl: "http://172.17.0.1:3000",
  }
};

[Chris Kalmar]

Hey @Capocaccia,

that's a great idea. 🤘
In fact, in one of the projects I'm integrating Lost Pixel there were flaky charts.
To solve the issue I implemented a custom masking solution which was later replaced by the introduction of our threshold configuration which allowed for slight differences in flaky tests.

In your case this wouldn't work of course, as you need to cover a whole area.
You just motivated me to implement element masking as a core feature.
I'd love to hear more about how you plan on using it.
Do you see any other use cases than CSS selectors?

[Chris Kalmar]

Just completed implementing the masks feature.

You can see an example in this shot:

I only provided this mask selector to the page in my list:
mask: [{ selector: 'h2' }],

This was enough to mask all H2 elements found on that page.

You can now define for each page a mask list https://github.com/lost-pixel/lost-pixel/blob/feature/shot-mask/src/config.ts#L227

Here are some CSS selector examples:
Examples:

• #my-id: Selects the element with the id my-id
• .my-class: Selects all elements with the class my-class
• div: Selects all div elements
• div.my-class: Selects all div elements with the class my-class
• li:nth-child(2n): Selects all even li elements
• [data-testid="hero-banner"]: Selects all elements with the attribute data-testid set to hero-banner
• div > p: Selects all p elements that are direct children of a div element

In your case the config would look like this:

export const config: CustomProjectConfig = {
  pageShots: {
    pages: [
      {
        path: "/posts/uses",
        name: "Uses",
        mask: [{ selector: '[data-testid="post-cover-image"]' }],
      },
      { path: "/", name: "Home" },
    ],
    pageUrl: "http://172.17.0.1:3000",
  },
};

(I also dropped the id props as they are now obsolete. The name prop defines the uniqueness )

Please upgrade to version 2.20.0 and let me know how it went.

[Carter Capocaccia]

This is an absurd turn around time. Ill upgrade to 2.20.0 and provide feedback.

[Carter Capocaccia]

@chriskalmar Everything appears to be working as it should. I did not test all of the CSS selectors you have listed but the ones I did test worked without issue. Good implementation here. Feel free to close this issue when you would like to.

[Chris Kalmar]

Awesome 🤘
Thank you @Capocaccia for taking the time to test this new feature and for providing feedback 🙏

Will close this now.