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

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",
  }
};

[chriskalmar]

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.

[Capocaccia]

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