Playwright automates browsers using really nifty APIs built into web browsers.
This program builds on that to automate tasks for QA testing webpages. Thanks to Playwright, it works across all major browsers and operating systems.
The Plunder CLI is published to npm as @eighty4/plunder and its API is published as @eighty4/plunder-core.
# run directly from npm
npx @eighty4/plunder -h
# install globally and run
npm i -g @eighty4/plunder@latest
plunder -h
Pludering webpages with --css-breakpoints
will use
LightningCSS to capture screenshots on a
CSS breakpoint and 1px outside of a CSS breakpoint.
plunder --css-breakpoints --out-dir www_qa https://alistapart.com
Let's go back to the LightningCSS website again and appreciate those neon light effects!
Plunder takes screenshots of a webpage as they would look on phones, tablets or varying pixel density desktops.
Capture screenshots emulating a curated selection of modern phones and tablets
with --modern-devices
:
plunder --modern-devices --out-dir www_qa https://alistapart.com
Device presets are available that can be added with --device
or -d
.
This flag is a search param, so -d ipad
will match all modern iPad devices.
# emulate ipad and iphone devices
plunder --device ipad --device iphone --out-dir www_qa https://alistapart.com
# emulate high pixel density
plunder --device hidpi --out-dir www_qa https://alistapart.com
# list modern devices used with --modern-devices flag
plunder devices
# see result of an explicit device query
plunder -d hidpi devices
# see exhustive list of queryable devices
plunder -a devices
plunder links https://alistapart.com
pnpm and Node 23 are required for development.
Plunder embraces Node's experimental type stripping support and Node will emit warnings about TypeScript when running unit tests.
Until Node finalizes type stripping support, CLI users will receive warnings
from Node if their --capture-hook
script is a TypeScript file. Hopefully the
next LTS release of Node will remove the warnings!
pnpm i
pnpm --filter \!@eighty4/plunder-webapp build
node cli/lib/plunder.js -h
Plunder out directories will have a web report written to the out directory's
root. The web report is built with React and Vite and distributed with the CLI
package @eighty4/plunder
.
The webapp package's README.md has details on running the Vite app.
The ci_verify.sh
script runs through all the CICD checks done on GitHub Actions:
./ci_verify.sh
The script has flags to symlink the ci_verify.sh
as git hooks.
./ci_verify.sh --on-git-commit
./ci_verify.sh --on-git-push