Ignore rules

Exclude elements, animations, properties and screen regions from recording and comparison, and choose the identity attributes.

Some motion is not yours to test: a live clock, a third-party widget, an ad slot, an infinite loader in a corner. Exclude it as narrowly as you can.

#ignore

ignore: {
  selectors: [".live-clock", "[data-third-party]"],
  animations: ["spinner"],
  properties: ["background-position"],
},

Ignored motion is not recorded, so it cannot produce differences. Animations on elements matched by ignore.selectors are also left out when MotionPR waits for motion to settle; ignored names and properties are only dropped from the records, so a long animation ignored by name still has to finish (or be infinite) before a checkpoint settles.

#Visual regions

ignore removes animation records. To keep recording an element's motion but exclude its pixels from the settled-screenshot and frame comparison, use rectangles in viewport CSS pixels:

comparison: {
  visual: { ignoreRegions: [{ x: 1180, y: 16, width: 240, height: 48 }] },
},

Masking content in screenshots for privacy is separate: Privacy.

#Per rule

To keep recording something but stop grading it, turn its rule off:

comparison: { severity: { "end-delay": "off", visual: "off" } },

#identity

Elements are identified by, in order: identity.attribute, identity.testIdAttribute, a unique non-generated id, a unique accessible label, and finally a DOM path anchored at the nearest identified ancestor (low confidence). See Animation identification.