screenshot-testing-vite v0.0.82

��# screenshot-testing-vite

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

Get started

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

  {
      "scripts": {
        "shoot": "node ./scripts/generate-screenshots.mjs"
      }
  }

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

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

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.

  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

  {
      "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

  {
      "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

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