snapshot different from storybook static page

[maxkarkowski]

The problem

i am implementing the percy/storybook package right now and found a difference between the snapshot percy took and the actual storybook static html file.

this is the snapshot percy took

and this is the actual storybook

u see the asterix breaks in a new line in the snapshot

Environment

• Node version: 14.18.2
  "@percy/cli": "^1.0.0-beta.75",
  "@percy/storybook": "^4.1.0",

[Robdel12]

Hey @maxkarkowski! In order to debug this we'll need to know the snapshot ID or build URL. It could be a legitimate thing that's happening in whatever browser that's capturing the screenshot or it could be something else. No way to know without looking at the build though.

[maxkarkowski]

Hey @Robdel12 , here is an url LInk

I am new to percy so i am not quite sure where to find the snapshot ID

[Robdel12]

No worries, thanks for that! Looking at the captured DOM vs what is rendered, there's invalid DOM that's being corrected. <p> tags can't have flow content within them (like <divs>). Only phrasing content is allowed to be a child.

<p>
  inklusive
   <div>
     <span class="comp-footnote-modal">
       <button type="button" data-testid="footnote-button-1" class="comp-footnote-icon-button">
        <svg></svg>
      </button>
    </span>
  </div>
</p>

When this is re-rendered in Percy's infrastructure, the browser corrects any invalid DOM, which is breaking the layout here. https://docs.percy.io/docs/debugging-sdks#invalid-html