Modify serialized DOM using domTransformation
Modify serialized DOM using domTransformation
There could be different reasons to modify the DOM to make it look as you expect in Percy, say there is an Ad banner or some UI state is not properly captured, e.t.c.
Before understanding domTransformation make sure you understand how Percy SDKs work here. Okay now that you’ve read how Percy works, Let’s proceed further. The Serialized DOM is sent to our backend for re-rendering on different browsers and devices, we can modify it by passing a domTransformation function.
domTransformation takes documentElement as an argument and doesn’t expect anything to be returned, check the examples below to understand further.
This feature requires v1.24.0+ of Percy CLI to work.
This config is only available for per-snapshot configuration and not available in global config!
If you’re using percy snapshot command then you’ll need to follow the below configuration.
Percy snapshot
Other SDKs
If you’re using any SDKs then you can check the following SDK examples.
Cypress
Playwright or Puppeteer
Storybook
Note: It only works with enableJavaScript: false
Advanced use case
Accessing DOM elements inside shadow DOM:
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Is this page helping you?
Yes
No
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!
