Ask the Community
Configure Pseudo-class
Configure pseudo-class elements in Percy snapshots to test hover, focus, and other CSS pseudo-states.
Percy captures pseudo-class styles for any element in your web application. This feature tests visual states like hover, focus, active, and other CSS pseudo-classes that user interactions trigger.
Use the pseudo-class configuration as a snapshot-level command to capture specific pseudo-states of elements during visual testing. This ensures your visual tests cover interactive states that users encounter in your application.
Requirements
- Percy CLI version: 1.31.5 or later
- Platform: Percy Web and CLI
Examples
Configure pseudo-class elements in your Percy snapshots using the pseudoClassEnabledElements key in your snapshot configuration.
Providing a selector does not automatically trigger the element’s pseudo-state. You must ensure the element is in the correct state (for example, force a hover state via JavaScript) before taking the snapshot. Percy then captures the styles visible on the element.
Supported pseudo-classes
Percy supports these commonly used CSS pseudo-classes:
-
:hover- Mouse hover state -
:focus- Element focus state -
:active- Element active/pressed state -
:visited- Visited link state -
:disabled- Disabled form element state -
:checked- Checked input state
For a complete list of CSS pseudo-classes, see CSS pseudo-classes reference on MDN.
Related topic
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
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!