CSS collected by happo should be tied to the currently visited page

[matthieu-foucault]

happo-cypress version: 1.6.1
Disclaimer: I haven't tried to reproduce this in a test project yet, so I'm not sure if it's actually the issue, or if something else is going on.

I have a cypress test that visits multiple pages of my application. Different CSS rules are loaded in those pages, but it appears that the CSS rules from page #1 are also applied to the screenshots of elements on page #2

This is one of the components where this issue is triggered in our project: https://happo.io/a/336/snap-requests/220689/Admin%20Summary%20Card/no%20errors

The rule ul.error-detail li.text-danger { background: rgb(206, 92, 92); padding: 5px; color: white !important; } comes from a separate page, which is loaded as some point in the cypress test, but it should not be applied to this specific component (as it's not loaded in the page where this component is).

I also see that the rule above appears three times in the inline CSS, which I think matches the number of pages containing that rule that are visited in the cypress test.

The issue can probably be worked around by having better CSS selectors on our end to make sure that the ruleset above isn't applied to this component.

[trotzig]

I think your analysis is spot on. Having better CSS selectors would work, but it would be better if we could resolve this in the happo-cypress library. Let me try and find some time to work on this soon.