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, popover, and other CSS pseudo-classes that user interactions trigger.

Requirements

• Percy CLI version: 1.31.5 or later
• Platform: Percy Web and CLI

Configuration approaches

You can configure pseudo-class elements in two ways:

1. Global configuration: Define selectors in your .percy.yml file to apply across all snapshots in a build.
2. Per-snapshot configuration: Override or extend the global configuration for specific snapshots in your test scripts.

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.

Global configuration via .percy.yml

You can define CSS selectors globally in your .percy.yml file. Percy automatically captures the computed CSS for elements matching these selectors during every snapshot. This approach requires minimal changes to your test scripts.

# .percy.yml
version: 2
snapshot:
  pseudo-class-enabled-elements:
    selectors:
      - ":popover-open"           # Captures all open popovers
      - "div[popover]"            # Captures all elements with popover attribute
      - ".tooltip:hover"          # Captures tooltips in hover state
      - "button:focus"            # Captures focused buttons

Use global configuration when you want to capture the same pseudo-class states (like open popovers or hover states) across all or most snapshots in your build.

Per-snapshot configuration

Configure pseudo-class elements in your Percy snapshots using the pseudoClassEnabledElements key in your snapshot configuration. This approach allows you to specify which elements to capture on a per-snapshot basis or override the global configuration for specific snapshots.

Examples

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
• :popover-open - Open popover state (for Popover API)

For a complete list of CSS pseudo-classes, see CSS pseudo-classes reference on MDN.

Related topic

• Percy Snapshot Configuration