Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
@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
Snapshot a static directory, snapshots file, or sitemap URL
Usage:
$ percy snapshot [options] <dir|file|sitemap>
Arguments:
dir|file|sitemap Static directory, snapshots file, or sitemap url
Options:
-b, --base-url <string> The base url pages are hosted at when snapshotting
--include <pattern> One or more globs/patterns matching snapshots to include
--exclude <pattern> One or more globs/patterns matching snapshots to exclude
Static options:
--clean-urls Rewrite static index and filepath URLs to be clean
Percy options:
-c, --config <file> Config file path
-d, --dry-run Print snapshot names only
-h, --allowed-hostname <hostname> Allowed hostnames to capture in asset discovery
--disallowed-hostname <hostname> Disallowed hostnames to abort in asset discovery
-t, --network-idle-timeout <ms> Asset discovery network idle timeout
--disable-cache Disable asset discovery caches
--debug Debug asset discovery and do not upload snapshots
Global options:
-v, --verbose Log everything
-q, --quiet Log errors only
-s, --silent Log nothing
--help Display command help
Examples:
$ percy snapshot ./public
$ percy snapshot snapshots.yml
$ percy snapshot https://percy.io/sitemap.xml
When providing a file containing a list of snapshots, the file must be YAML, JSON, or a JS file
exporting a list of pages. Each snapshot must contain at least a url
that can be navigated to
using a browser.
snapshots.yml
:
- http://localhost:8080
- http://localhost:8080/two
Snapshotting snapshots.yml
:
$ percy snapshot snapshots.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 snapshot.
snapshots.json
:
[{
"name": "Snapshot one",
"url": "http://localhost:8080",
"waitForTimeout": 1000
}, {
"name": "Snapshot two",
"url": "http://localhost:8080/two",
"waitForSelector": ".some-element"
}]
Snapshotting snapshots.json
:
$ percy snapshot snapshots.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 snapshot 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.
snapshots.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 snapshots.js
:
$ percy snapshot snapshots.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 }))
}
Instead of an array of snapshots, list files can also contain an object that defines additional
top-level options along with a snapshots
option containing the array of snapshots. This allows
dynamically filtering lists with include
/exclude
options, and enables utilizing features such as
YAML anchors and references.
snapshots.yml
base-url: https://example.com
exclude:
- /page/(\d+)
references:
dismiss-cookie-banner: &dismiss-cookie-banner |
document.querySelector('.cookie-banner .dismiss').click();
snapshots:
- url: /foo
execute: *dismiss-cookie-banner
- url: /foo
name: "/foo - with cookie banner"
- url: /bar
execute: *dismiss-cookie-banner
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
For snapshotting static directories, the following Percy config file options are also accepted:
# .percy.yml
version: 2
static:
base-url: /
clean-urls: false
include: **/*.html
exclude: []
rewrites: {}
options: []
include/exclude - A predicate or an array of predicates matching snapshots to include/exclude.
A predicate can be a string glob or pattern, a regular expression, or a function that accepts a
snapshot object and returns true
or false
if the snapshot is considered matching or not.
// .percy.js
module.exports = {
version: 2,
static: {
include: [
'blog/**/*.html', // glob
'pages/page-(?!10).html$', // pattern
/about-(.+)\.html/i // regexp
],
exclude: [
// function that returns true when matching
({ name }) => DISALLOWED.includes(name)
]
}
};
rewrites - An object containing source-destination pairs for rewriting URLs.
Paths for resources can sometimes be expected to be in a certain format that may not be covered by
the clean-urls
option. For such paths, rewrites can map a short, clean, or pretty path to a
specific resource. Paths are matched using path-to-regexp.
# .percy.yml
version: 2
static:
base-url: /blog
rewrites:
/:year/:month/:title: /posts/:year-:month--:title.html
/:year/:month: /posts/index-:year-:month.html
/:year: /posts/index-:year.html
options - An array of per-snapshot options.
Just like page listing options, static snapshots may also contain
per-snapshot configuration options. However, since pages are matched against the files
option, so are per-snapshot configuration options via an array of options
. If multiple
options match a snapshot, they will be merged with previously matched options.
# .percy.yml
version: 2
static:
options:
- files: /foo-bar.html
waitForSelector: .is-ready
execute: |
document.querySelector('.button').click()
When providing a sitemap URL, the document must be an XML document. For sitemap URLs the --include
and
--exclude
flags can be used to filter snapshots. With a Percy config file, the options
option
is also accepted.
Tip: Sitemaps can contain a lot of URLs, so its best to always start with the
--dry-run
flag while fine tuning theinclude
andexclude
options.
$ percy snapshot https://percy.io/sitemap.xml --dry-run
[percy] Found 10 snapshots
[percy] Snapshot found: /
[percy] Snapshot found: /changelog
[percy] Snapshot found: /customers
[percy] Snapshot found: /enterprise
[percy] Snapshot found: /features
[percy] Snapshot found: /how-it-works
[percy] Snapshot found: /integrations
[percy] Snapshot found: /pricing
[percy] Snapshot found: /security
[percy] Snapshot found: /visual-testing
For snapshotting sitemaps, the following Percy config file options are accepted:
# .percy.yml
version: 2
static:
include: **/*.html
exclude: []
options: []
See the corresponding static options for details on includes
, excludes
, and
options
options.
FAQs
Snapshot a list or static directory of web pages.
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.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.