@tdd-buffet/visual

Visual testing for tdd-buffet

Usage no npm install needed!

<script type="module">
  import tddBuffetVisual from 'https://cdn.skypack.dev/@tdd-buffet/visual';
</script>

README

Visual testing for tdd-buffet using Mugshot

Build Status codecov npm type definitions


Install

npm install tdd-buffet @tdd-buffet/visual

Create a visual test

import { describe } from 'tdd-buffet/suite/gui';
import { vit } from '@tdd-buffet/visual';

describe('Visual suite', () => {
  vit('screenshot name', async (page) => {
    await page.goto('http://www.github.com');
  });
});

The above will take a screenshot of the first child in body and save it at tests/gui/screenshots/${fullTestName}.png (relative to cwd) where

  • fullTestName is the full name of the vit test including all parent describe block names (in this case visual_suite_screenshot_name).

You can mix and match "normal" tests (it) and visual tests (vit) and only the visual ones will result in screenshots being taken.