# screenshot-testing-vite

> screenshot-testing-vite

Latest version **0.0.82** (published 2023-07-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install screenshot-testing-vite
pnpm add screenshot-testing-vite
yarn add screenshot-testing-vite
bun add screenshot-testing-vite
```

Provides the command `stv-cli`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.82 |
| Published | 2023-07-24 |
| First published | 2022-12-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 15.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | danielgrdnv |

## Links

- npm: https://www.npmjs.com/package/screenshot-testing-vite
- npm.io page: https://npm.io/package/screenshot-testing-vite

## Dependencies (6)

- [pngjs](https://npm.io/package/pngjs.md) ^6.0.0
- [commander](https://npm.io/package/commander.md) ^9.4.1
- [pixelmatch](https://npm.io/package/pixelmatch.md) ^5.3.0
- [playwright](https://npm.io/package/playwright.md) ^1.35.0
- [@previewjs/screenshot](https://npm.io/package/@previewjs/screenshot.md) ^0.2.0
- [@previewjs/plugin-react](https://npm.io/package/@previewjs/plugin-react.md) ^10.0.0

## Recent versions

- 0.0.82 (latest) — 2023-07-24
- 0.0.81 — 2023-07-24
- 0.0.8 — 2023-07-24
- 0.0.7 — 2023-07-20
- 0.0.6 — 2023-06-16
- 0.0.5 — 2022-12-16
- 0.0.3 — 2022-12-16
- 0.0.2 — 2022-12-16
- 0.0.1 — 2022-12-16

## README

��# screenshot-testing-vite

#### Library for screenshot testing of the component based on playwright, react, vite
## Get started

```Shell
npm install screenshot-testing-library reg-cli open-cli -D

yarn add screenshot-testing-library reg-cli open-cli -D
```

#### Prediction
If you want to use custom settings to create screenshots, update your package.json
```json
  {
      "scripts": {
        "shoot": "node ./scripts/generate-screenshots.mjs"
      }
  }
```

Then create the file ```./scripts/generate-screenshots.mjs```

```js
import {generateScreenshots} from "screenshot-testing-vite/lib/generate-screenshot.mjs";

generateScreenshots({
    filePathPattern: `**/*.a.stories.{js,jsx,ts,tsx}`, // rewrite file pattern
    viewports: [
        ['iPhone_SE', {viewport: {height: 667, width: 375}}],
        ['GALAXY_S8_plus', {viewport: {height: 740, width: 360}}],
        ['DESKTOP', {viewport: {height: 1080, width: 1920}}],
        ['laptop', {viewport: {height: 768, width: 1366}}],
        ['iPad_mini', {viewport: {height: 1024, width: 768}}]
    ], // default values of devices
})
```
And then use ```yarn shoot```

#### First start
```Shell
stv-cli clear # Use this command primarily to initialize folders.
 
# Generate screenshots, compare them and create a report
stv-cli flow 
# or
yarn shoot
stv-cli compare 

stv-cli approve # Approve 'actual' to 'expected'
```

Then you can match your screenshots.
```Shell
  stv-cli flow 
  # or if you don't use the default config to generate screenshots
  yarn shoot
  stv-cli compare 
  
  stv-cli approve # Approve 'actual' to 'expected'
```

### Watch the difference between screenshots

To view screenshots comfortably, update your package.json
```json
  {
      "scripts": {
        "stv:report": "reg-cli --from screenshots/report.json --report screenshots/report.html",
        "stv:open": "yarn run scr:report && open-cli screenshots/report.html"
      }
  }
```

You can also combine scripts to use it all in one click
```json lines
  {
      "scripts": {
        "stv:report": "reg-cli --from screenshots/report.json --report screenshots/report.html",
        "stv:open": "yarn run scr:report && open-cli screenshots/report.html",

        "shoot": "node ./scripts/generate-screenshots.mjs", // if you are using a custom config
        "stv:flow": "yarn shoot && yarn stv:open",
        //or
        "stv:flow": "stv-cli shoot && yarn stv:open" // if you are using a default config
      }
  }
```

## Commands
```Shell
stv-cli clear # Clear folder screenshots. Use this command primarily to initialize folders.
stv-cli shoot # Generate screenshots and put in to the 'actual'
stv-cli compare # Match PNGs from 'actual' and 'expected'. Generate report.
stv-cli approve # Approve 'actual' to 'expected'
stv-cli flow # Generate screenshots, compare them and create a report
```

---
_Source: https://npm.io/package/screenshot-testing-vite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._