@iqual/playwright-vrt 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -39
- package/dist/src/cli.js +2 -2
- package/dist/src/config.d.ts.map +1 -1
- package/dist/src/config.js +0 -1
- package/dist/src/config.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,19 +1,39 @@
|
|
|
1
|
-
#
|
|
1
|
+
# iqual Playwright VRT
|
|
2
2
|
|
|
3
|
-
**Standalone Visual Regression Testing CLI tool using Playwright
|
|
3
|
+
**Standalone Visual Regression Testing CLI tool using [Playwright](https://github.com/microsoft/playwright) 🎭**
|
|
4
4
|
|
|
5
|
-
Zero-installation visual regression testing that runs directly in CI/CD.
|
|
5
|
+
Zero-installation visual regression testing (VRT) that runs directly in CI/CD. Scale your visual regression testing efforst with a simple config file.
|
|
6
6
|
|
|
7
7
|
## Quick Start
|
|
8
8
|
|
|
9
|
+
```
|
|
10
|
+
bunx playwright install chromium
|
|
11
|
+
|
|
12
|
+
bunx @iqual/playwright-vrt run \
|
|
13
|
+
--reference https://production.example.com \
|
|
14
|
+
--test https://staging.example.com
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
That's it! The tool will:
|
|
18
|
+
- Auto-discover URLs from your sitemap (or crawl the homepage)
|
|
19
|
+
- Create baseline screenshots from the reference URL
|
|
20
|
+
- Compare against test environment
|
|
21
|
+
- Generate visual diff report in `playwright-report/`
|
|
22
|
+
|
|
23
|
+
> [!TIP]
|
|
24
|
+
> Using `--reference` is optional, but requires a baseline if it is not set. You can always (re-)create a baseline with `--udpate-baseline`.
|
|
25
|
+
|
|
9
26
|
## Why Use This?
|
|
10
27
|
|
|
11
|
-
- **No per-project setup** - Just run `bunx @iqual/playwright-vrt run --test <url>` or `--config <file>`
|
|
28
|
+
- **No per-project code setup** - Just run `bunx @iqual/playwright-vrt run --test <url>` or `--config <file>`
|
|
12
29
|
- **Smart defaults** - Works without a config file
|
|
13
30
|
- **Flexible** - Use CLI args for quick tests, config files for complex setups
|
|
14
|
-
- **CI/CD optimized** -
|
|
31
|
+
- **CI/CD optimized** - Allows caching baselines, auto-detects config changes
|
|
15
32
|
|
|
16
|
-
|
|
33
|
+
## Usage with config
|
|
34
|
+
|
|
35
|
+
For more advanced setups, or to allow the generation of configuration files it is also possible
|
|
36
|
+
to add a `playwright-vrt.config.json` config file in your current working directory:
|
|
17
37
|
|
|
18
38
|
```json
|
|
19
39
|
{
|
|
@@ -24,37 +44,13 @@ Zero-installation visual regression testing that runs directly in CI/CD. Test vi
|
|
|
24
44
|
}
|
|
25
45
|
```
|
|
26
46
|
|
|
47
|
+
Then run the VRT using the `--config` flag:
|
|
48
|
+
|
|
27
49
|
```bash
|
|
28
50
|
# Run with config file (includes both URLs)
|
|
29
51
|
bunx @iqual/playwright-vrt run --config ./playwright-vrt.config.json
|
|
30
|
-
|
|
31
|
-
# Or override test URL from config
|
|
32
|
-
bunx @iqual/playwright-vrt run \
|
|
33
|
-
--test https://preview-branch.staging.com \
|
|
34
|
-
--config ./playwright-vrt.config.json
|
|
35
|
-
|
|
36
|
-
# Or compare production vs staging
|
|
37
|
-
bunx @iqual/playwright-vrt run \
|
|
38
|
-
--reference https://production.example.com \
|
|
39
|
-
--test https://staging.example.com
|
|
40
52
|
```
|
|
41
53
|
|
|
42
|
-
```bash
|
|
43
|
-
# First run: create baseline from test URL
|
|
44
|
-
bunx @iqual/playwright-vrt run --test https://staging.example.com --update-baseline
|
|
45
|
-
|
|
46
|
-
# Subsequent runs: compare against cached baseline
|
|
47
|
-
bunx @iqual/playwright-vrt run --test https://staging.example.com
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
**Option 2: Use config file** (`playwright-vrt.config.json`):
|
|
51
|
-
|
|
52
|
-
That's it! The tool will:
|
|
53
|
-
- Auto-discover URLs from your sitemap (or use defaults)
|
|
54
|
-
- Create baseline screenshots from reference URL (or test URL on first run)
|
|
55
|
-
- Compare against test environment
|
|
56
|
-
- Generate visual diff report in `playwright-report/`
|
|
57
|
-
|
|
58
54
|
## Features
|
|
59
55
|
|
|
60
56
|
- ✅ **Zero installation** - Run with `bunx`, no setup needed
|
|
@@ -143,7 +139,7 @@ The tool intelligently caches URLs and baseline snapshots based on your **config
|
|
|
143
139
|
The cache is automatically invalidated and regenerated when:
|
|
144
140
|
|
|
145
141
|
- Configuration changes (URLs, viewports, filters, thresholds, etc.)
|
|
146
|
-
- Test file (`vrt.spec.
|
|
142
|
+
- Test file (`vrt.spec.js`) changes in the package
|
|
147
143
|
|
|
148
144
|
The hash is based on the **final merged config object**, not the config file itself.
|
|
149
145
|
|
|
@@ -164,7 +160,8 @@ This regenerates both URLs and baseline snapshots from the reference system rega
|
|
|
164
160
|
## GitHub Actions
|
|
165
161
|
|
|
166
162
|
```yaml
|
|
167
|
-
-
|
|
163
|
+
- name: Setup Bun
|
|
164
|
+
uses: oven-sh/setup-bun@v1
|
|
168
165
|
|
|
169
166
|
# Cache baseline snapshots to avoid hitting production on every run
|
|
170
167
|
- uses: actions/cache@v4
|
|
@@ -173,12 +170,20 @@ This regenerates both URLs and baseline snapshots from the reference system rega
|
|
|
173
170
|
key: vrt-baseline-${{ hashFiles('playwright-vrt.config.json') }}
|
|
174
171
|
restore-keys: vrt-baseline-
|
|
175
172
|
|
|
176
|
-
-
|
|
173
|
+
- name: Install Playwright VRT dependencies
|
|
174
|
+
shell: bash
|
|
175
|
+
run: |
|
|
176
|
+
bunx playwright install chromium
|
|
177
|
+
|
|
178
|
+
- name: Run Visual regression tests
|
|
179
|
+
shell: bash
|
|
180
|
+
run: |
|
|
177
181
|
bunx @iqual/playwright-vrt run \
|
|
178
|
-
--
|
|
179
|
-
--
|
|
182
|
+
--config playwright-vrt.config.json \
|
|
183
|
+
--verbose
|
|
180
184
|
|
|
181
|
-
-
|
|
185
|
+
- name: Upload VRT report
|
|
186
|
+
uses: actions/upload-artifact@v4
|
|
182
187
|
if: always()
|
|
183
188
|
with:
|
|
184
189
|
name: vrt-report
|
|
@@ -204,5 +209,5 @@ All URLs and baseline snapshots are cached in `playwright-snapshots/` to minimiz
|
|
|
204
209
|
## Requirements
|
|
205
210
|
|
|
206
211
|
- [Bun](https://bun.sh) runtime (for `bunx` command)
|
|
207
|
-
- Or npm/yarn to install globally
|
|
208
212
|
- Playwright `bunx playwright install chromium`
|
|
213
|
+
- NPM/Yarn and Node should also be supported.
|
package/dist/src/cli.js
CHANGED
|
@@ -31,7 +31,7 @@ function isCacheValid(snapshotDir, config) {
|
|
|
31
31
|
try {
|
|
32
32
|
const stored = JSON.parse(fs.readFileSync(hashFile, 'utf-8'));
|
|
33
33
|
const packageDir = path.join(__dirname, '..');
|
|
34
|
-
const testFilePath = path.join(packageDir, 'tests', 'vrt.spec.
|
|
34
|
+
const testFilePath = path.join(packageDir, 'tests', 'vrt.spec.js');
|
|
35
35
|
const currentHashes = {
|
|
36
36
|
config: computeConfigHash(config),
|
|
37
37
|
testFile: fs.existsSync(testFilePath) ? computeFileHash(testFilePath) : '',
|
|
@@ -50,7 +50,7 @@ function isCacheValid(snapshotDir, config) {
|
|
|
50
50
|
*/
|
|
51
51
|
function saveCacheHashes(snapshotDir, config) {
|
|
52
52
|
const packageDir = path.join(__dirname, '..');
|
|
53
|
-
const testFilePath = path.join(packageDir, 'tests', 'vrt.spec.
|
|
53
|
+
const testFilePath = path.join(packageDir, 'tests', 'vrt.spec.js');
|
|
54
54
|
const hashes = {
|
|
55
55
|
config: computeConfigHash(config),
|
|
56
56
|
testFile: fs.existsSync(testFilePath) ? computeFileHash(testFilePath) : '',
|
package/dist/src/config.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,YAAY,CAAC,EAAE;QACb,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IACF,SAAS,CAAC,EAAE,KAAK,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IACH,SAAS,CAAC,EAAE;QACV,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,YAAY,CAAC,EAAE;QACb,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IACF,SAAS,CAAC,EAAE,KAAK,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;IACH,SAAS,CAAC,EAAE;QACV,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,SAAS,CAgB7C,CAAC;AAEF,wBAAsB,UAAU,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC,CAyBvE;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAmCtD"}
|
package/dist/src/config.js
CHANGED
package/dist/src/config.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":";AAqCA,MAAM,CAAC,MAAM,cAAc,GAAuB;IAChD,WAAW,EAAE,cAAc;IAC3B,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,CAAC,GAAG,CAAC;IACd,YAAY,EAAE;QACZ,QAAQ,EAAE,CAAC;QACX,mBAAmB,EAAE,IAAI;KAC1B;IACD,SAAS,EAAE;QACT,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"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"}
|