Disabling CSS animation doesn't block animations for pseudo elements

[AndrewLunko]

Environment (please complete the following information):

• webdriver-image-comparison version: 2.0.0

Describe the bug Hi there! Thanks a lot for the package! While using it for visual regression tests in our UI components library we've discovered that we have tests breaking for animated components in certain cases even though disableCSSAnimation option is set for true. With a bit of digging trying to debug the problem, we've discovered that custom styles injected to disable CSS animation don't block animations for pseudo elements. And this is where we sometimes have loading spinners added to components and other animated stuff. I think having animated pseudo elements is pretty common in frontend development so I would expect the package to disable animations for them as well.

Expected behavior In here: https://github.com/wswebcreation/webdriver-image-comparison/blob/980a7d4686ac2b64c64d8805c4ef3229a2e81f37/lib/clientSideScripts/setCustomCss.ts#L11 I would propose adding *::before, *::after to existing * selector so animation and transition blocking also affects pseudo elements.

Happy to create a pull request if you think this is the way to go, otherwise we would go custom and inject our own custom styles for those test cases.

[wswebcreation]

Hi @AndrewLunko

Thanks for bringing this up. Can you submit a PR for the https://github.com/wswebcreation/webdriver-image-comparison module?

[AndrewLunko]

Sure! Will happily contribute the fix.

[wswebcreation]

Thanks!

[wswebcreation]

I've released a new version with your fix, closing it for now