Browsers and Viewports
#
Playwright shooterBy default, screenshots are taken with the Playwright shooter on Chromium with a viewport size of 1280x720.
#
ViewportsYou can customise the viewport easily, as well as take screenshots on multiple viewports automatically.
For example, here is a configuration to take each screenshot with a simulated laptop viewport (1366x768) as well as a mobile Pixel 2 viewport (411x731 with 2.625 device scale factor).
const playwrightShooter = require("viteshot/shooters/playwright");const playwright = require("playwright");
module.exports = { // ... shooter: playwrightShooter(playwright.chromium, { contexts: { laptop: { viewport: { width: 1366, height: 768, }, }, pixel2: playwright.devices["Pixel 2"], }, }),};
#
Screenshot pathsBy default, screenshots are stored in a __screenshots__
subdirectory next to the .screenshot.*
file, within a subdirectory corresponding to process.platform
(e.g. darwin
for MacOS).
You can customise this by specifying a prefix path, suffix path or both.
For example if you'd like all screenshots to be stored in a top-level __screenshots__
directory:
const playwrightShooter = require("viteshot/shooters/playwright");const playwright = require("playwright");
module.exports = { // ... shooter: playwrightShooter(playwright.chromium, { output: { prefixPath: `__screenshots__/${process.platform}`, suffixPath: "", }, }),};
#
BrowsersIf you use the default Playwright shooter, you can also choose to take screenshots with a different browser. Simply replace playwright.chromium
with another such as firefox
or webkit
. See Playweight documentation for more details.
Taking screenshots with multiple browsers
If you want to take screenshots with multiple browsers, you can create multiple variants of viteshot.config.js
, such as viteshot.chromium.js
and viteshot.webkit.js
.
Use the -c
flag when running viteshot
to generate screenshots with a specific browser:
$ viteshot -c viteshot.chromium.js
#
Alternative: Percy shooterWhile Playwright generates screenshots on the machine that runs viteshot
, an alternative is to use a service such as Percy, which uploads HTML/CSS snapshots to the cloud before taking screenshots with a suite of browsers.
This means that you won't have to manage screenshots yourself, but it comes at a cost (literally).
To use Percy, first install @percy/puppeteer
and puppeteer
.
Then, update viteshot.config.js
:
const percyShooter = require("viteshot/shooters/percy");
module.exports = { // .... shooter: percyShooter(),};
You can then upload screenshots to Percy by running:
$ percy exec -- viteshot
Do you work at Percy / BrowserStack?
Percy shooter is currently not automatically tested because Percy no longer grants free licenses to open-source projects.
If you work at Percy and would like to help improve the Percy shooter or better yet sponsor ViteShot, please get in touch!