@testkase/visual

Upload your test suite's screenshots to TestKase Visual and get told what changed.

npx @testkase/visual upload ./screenshots --project "Marketing"

Your tests take the pictures. This uploads them, compares each one against the last approved version, and exits 1 when something needs a person to look at it. It works with Playwright, Cypress, Puppeteer, Selenium or anything else, because a folder of PNGs is not a framework.

Setup

1. Make a project in TestKase and note its name.

2. Create a personal access token and put it in your CI as TESTKASE_TOKEN.

3. Take full-page screenshots in your tests:

   await page.screenshot({ path: "shots/home.png", fullPage: true }); // Playwright, Puppeteer
   cy.screenshot("home", { capture: "fullPage" });                    // Cypress

4. Upload the folder after the suite has run:

   - run: npx playwright test
   - run: npx @testkase/visual upload ./shots --project "Marketing"
     env:
       TESTKASE_TOKEN: ${{ secrets.TESTKASE_TOKEN }}

The filename is the screen name

shots/home.png is the screen "home", and next week's shots/home.png is compared against it. Keep filenames stable. If they change, every picture looks new — new baselines, nothing compared, build green — and this tool has quietly stopped working. Run --dry-run first to see the names it will use, and watch for the warning it prints when a build matches nothing.

To name screens yourself, use --name for one file or --map for a folder.

Exit codes

| Code | Meaning | |---|---| | 0 | Nothing to review | | 1 | Something changed, or a picture could not be uploaded | | 2 | The command was wrong — nothing was created |

npx @testkase/visual --help is the full reference.