eWert-Online / OSnap

OSnap is a snapshot testing tool, which mainly focuses on speed and ease of use.
https://ewert-online.github.io/OSnap/
152 stars 2 forks source link

Selector not ignored, though specified in `ignore` #11

Closed lessp closed 2 years ago

lessp commented 2 years ago

I have a basic create-react-app set up, and while trying to ignore the animation (selector .App-logo), it seems as though it's not ignored.

Here's the test-file:

[
  {
    "name": "Start",
    "url": "/",
    "threshold": 20,
    "sizes": [{ "width": 768, "height": 1024 }],
    "ignore": [
      { "@": ["mobile", "tablet", "desktop"], "selector": ".App-logo" }
    ],
    "actions": [
      { "action": "click", "selector": ".App-link" },
      { "action": "wait", "timeout": 2000 }
    ]
  }
]

Updating the wait to e.g. 3000 yields the following diff:

image

Inspecting the selector, I'd imagine that the whole area covering the actual logo would be ignored:

image

eWert-Online commented 2 years ago

Thank you for reporting this issue!

I wonder if it is a problem with DOMs rendered through JS in general, or if this happens because of the rotation. It is definetly an interesting case. I will see if I find some time this weekend to investigate this further.

eWert-Online commented 2 years ago

Ok, there are multiple issues here.

  1. You are defining a new size for the "Start" test without a name. This size is the only one, in which the test is run (768x1024). The ignore region is defined to only apply on sizes with the names "mobile", "tablet", "desktop". So the ignore region isn't applying for this test at all.

  2. After removing the @ on the ignore region, the diff gets smaller, but doesn't disappear completely. This is, because the ignore region is currently only specified with the top-left and bottom-right coordinates of the element and is always drawn horizontally. So when the element is rotated, the region is not covering the whole bounding box.

I will have to think about a solution for this...

eWert-Online commented 2 years ago

I thought about this issue a bit and I am afraid there is no good solution. For this specific case you could probably get away with using manual coordinates, to define the correct ignore region.

If you have any suggestions on how to handle this case, feel free to reopen this issue, but I am closing it for now.