Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
@percy/cli-snapshot
Advanced tools
@percy/cli-snapshot is a command-line tool for capturing visual snapshots of web pages and components. It integrates with Percy, a visual testing and review platform, to help developers catch visual regressions in their web applications.
Capture a snapshot of a single URL
This command captures a visual snapshot of the specified URL and uploads it to Percy for visual comparison.
npx @percy/cli-snapshot http://example.com
Capture snapshots from a list of URLs
This command reads a list of URLs from a file (urls.txt) and captures visual snapshots for each URL, uploading them to Percy.
npx @percy/cli-snapshot urls.txt
Capture snapshots with custom widths
This command captures visual snapshots of the specified URL at different viewport widths (375px, 768px, and 1280px) and uploads them to Percy.
npx @percy/cli-snapshot http://example.com --widths=375,768,1280
Capture snapshots with custom CSS
This command captures a visual snapshot of the specified URL with custom CSS applied, and uploads it to Percy.
npx @percy/cli-snapshot http://example.com --css='body { background-color: red; }'
Capture snapshots with authentication
This command captures a visual snapshot of a URL that requires basic authentication, using the provided username and password, and uploads it to Percy.
npx @percy/cli-snapshot http://example.com --auth=username:password
Puppeteer is a Node library that provides a high-level API to control Chrome or Chromium over the DevTools Protocol. It can be used for taking screenshots, generating PDFs, and automating web interactions. Unlike @percy/cli-snapshot, Puppeteer does not integrate directly with a visual testing platform like Percy.
Cypress is a JavaScript end-to-end testing framework that allows developers to write tests for web applications. It includes features for taking screenshots and recording videos of tests. While Cypress focuses on functional testing, it can be extended with plugins to perform visual testing, but it does not natively integrate with Percy like @percy/cli-snapshot.
WebdriverIO is a test automation framework that allows you to run tests based on the WebDriver protocol and Appium. It supports taking screenshots and can be integrated with visual regression testing tools. However, it does not provide the same out-of-the-box integration with Percy as @percy/cli-snapshot.
Snapshot a list or static directory of web pages.
percy snapshot PATHNAME
Snapshot a list of pages from a file or directory
USAGE
$ percy snapshot PATHNAME
ARGUMENTS
PATHNAME path to a directory or file containing a list of pages
OPTIONS
-b, --base-url=base-url [default: /] the url path to serve the static directory from
-c, --config=config configuration file path
-d, --dry-run prints a list of pages to snapshot without snapshotting
-f, --files=files [default: **/*.{html,htm}] one or more globs matching static file
paths to snapshot
-h, --allowed-hostname=allowed-hostname allowed hostnames
-i, --ignore=ignore one or more globs matching static file paths to ignore
-q, --quiet log errors only
-t, --network-idle-timeout=network-idle-timeout asset discovery idle timeout
-v, --verbose log everything
--disable-cache disable asset discovery caches
--silent log nothing
EXAMPLES
$ percy snapshot ./public
$ percy snapshot pages.yml
When providing a static directory, it will be served locally and pages matching the files
argument
(and excluding the ignore
argument) will be navigated to and snapshotted.
$ percy snapshot ./public
[percy] Percy has started!
[percy] Snapshot taken: /index.html
[percy] Snapshot taken: /about.html
[percy] Snapshot taken: /contact.html
[percy] Finalized build #1: https://percy.io/org/project/123
When providing a file containing a list of pages to snapshot, the file must be YAML, JSON, or a JS
file exporting a list of pages. Each page must contain at least a url
that can be navigated to
using a browser.
pages.yml
:
- url: http://localhost:8080
- url: http://localhost:8080/two
Snapshotting pages.yml
:
$ percy snapshot pages.yml
[percy] Percy has started!
[percy] Snapshot taken: /
[percy] Snapshot taken: /two
[percy] Finalized build #1: https://percy.io/org/project/123
A name
can be provided which will override the default snapshot name generated from the url
path. The options waitForTimeout
and waitForSelector
can also be provided to wait for a timeout
or selector respectively before taking the page snapshot.
pages.json
:
[{
"name": "Snapshot one",
"url": "http://localhost:8080",
"waitForTimeout": 1000
}, {
"name": "Snapshot two",
"url": "http://localhost:8080/two",
"waitForSelector": ".some-element"
}]
Snapshotting pages.json
:
$ percy snapshot pages.json
[percy] Percy has started!
[percy] Snapshot taken: Snapshot one
[percy] Snapshot taken: Snapshot two
[percy] Finalized build #1: https://percy.io/org/project/123
For more advanced use cases, an execute
function and additionalSnapshots
may be specified for
each page to execute JavaScript within the page execution context before subsequent snapshots are taken.
Note: All options are also accepted by other file formats. For
execute
however, a string containing a function body can be provided when the file format prevents normal functions.
pages.js
:
module.exports = [{
name: 'My form',
url: 'http://localhost:8080/form',
waitForSelector: '.form-loaded',
execute() {
document.querySelector('.name').value = 'Name Namerson';
document.querySelector('.email').value = 'email@domain.com';
},
additionalSnapshots: [{
suffix: ' - submitting',
execute() {
document.querySelector('.submit').click();
}
}, {
suffix: ' - after submit',
waitForSelector: '.form-submitted'
}]
}]
Snapshotting pages.js
:
$ percy snapshot pages.js
[percy] Percy has started!
[percy] Snapshot taken: My form
[percy] Snapshot taken: My form - submitting
[percy] Snapshot taken: My form - after submit
[percy] Finalized build #1: https://percy.io/org/project/123
JavaScript files may also export sync or async functions that return a list of pages to snapshot.
module.exports = async () => {
let urls = await getSnapshotUrls()
return urls.map(url => ({ name: url, url }))
}
FAQs
Snapshot a list or static directory of web pages.
The npm package @percy/cli-snapshot receives a total of 266,415 weekly downloads. As such, @percy/cli-snapshot popularity was classified as popular.
We found that @percy/cli-snapshot demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.