Ask the Community
Percy snapshot command
Capture Percy snapshots in your test script using the snapshot command.
The Percy snapshot is a powerful command that allows you to capture visual snapshots of web pages, lists, sitemaps, or static directories.
On this page, we will explore how to use percySnapshot command in your test script, what parameters it supports, and how to execute the script. You can choose to capture a full-page screenshot or target a specific element to screenshot.
How to use the Percy snapshot command
Incorporate the Percy snapshot command into your test script as shown below. You must specify a snapshots name that you intend to capture. The options can be passed as an optional parameter.
- All Percy SDKs that support
@percy/clican accept snapshot options as the final argument of the SDK’spercySnapshotmethod. - These snapshot options will override or be merged with their equivalent Percy config file options.
Per-snapshot configuration
The following table lists configuration options available for each snapshot in your test script.
| Option | Description |
|---|---|
| widths | An array of numbers, in pixels, representing the widths you’d like to capture for each snapshot; overrides global snapshot widths. |
| min-height | A number specifying the minimum height in pixels each snapshot should be. |
| percy-css | A string containing Percy specific CSS; appended to any global percy-css. |
| enable-javascript | A boolean that enables JavaScript for all snapshots in the build. This may cause side-effects like animations or redirects making your snapshots less reliable. Note: When you capture the DOM, JavaScript remains enabled regardless of the “enable-javascript” option. JavaScript is only disabled in our rendering environment. You can use JavaScript to set the DOM state, take a Percy snapshot, and we will render it with JavaScript enabled or disabled based on the flag. |
| scope | A string of a selector to scope the given screenshot to. |
| discovery | A subset of discovery options to use for this snapshot’s asset discovery. - allowed-hostnames: An array of additional hostnames to save asset contents from; merged with any existing allowed-hostnames. - disallowed-hostnames: An array of hostnames to immediately abort requests from. - request-headers: An object containing HTTP headers to be sent for each request made during asset discovery; merged with any existing request-headers. - authorization: A username/password combo to authenticate requests for Percy. - disable-cache: Disables asset discovery caches. - user-agent: Custom user-agent string used when requesting assets. |
The underlying CLI API accepts the following options in camelCase, PascalCase, snake_case, or kebab-case!
Run Percy using the percy exec command
Use the following Percy CLI command to start a local snapshot server and execute your test script.
percy execpercy exec:startpercy exec:stoppercy exec:ping
percy exec
Start and stop Percy around a supplied command, typically your test runner. This command wraps your test script execution and captures snapshots using Percy.
percy exec:start
Start a local Percy snapshot server before running your test script.
percy exec:stop
Stops a local Percy snapshot server before running your test script.
percy exec:ping
Pings a local Percy snapshot server before running your test script.
Exec command to execute script with a specific config for the snapshots
You can also specify the path directly to a config file by passing a --config or -c option to the percy exec command:
Related Topics
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!