/testcafe-visual-regression

Demo to showcase a sample visual regression test suite with TestCafe and Resemblejs

Primary LanguageJavaScriptMIT LicenseMIT

Demo for creating a visual regression test suite in create-react-app

See this Medium article for more information

How it works

  • The set up is a simple web app using create-react-app and nothing much else.

  • TestCafe and Resemblejs have been imported as devDependencies (along with path and fs-extra)

  • There is a TestCafe test script in our package.json to run TestCafe

    • npm run test => testcafe firefox:headless -s ./tests/vrt-screenshots ./tests/*visual.test.js

Visual regression processing

  • npm run test is called (requires the server to be already started using npm start)
  • tests/App.visual.test.js navigates to the homepage and calls tests/vrt-util/vrtUtil.js exported function doVisualRegression(testFixture, testName)
  • doVisualRegression(..) takes the screenshots and stores them in an actual and base folder (if no base screenshot exists.
  • If an actual and base screenshot exists, perform the comparison using Resemblejs. If the comparison detects a mismatch, fail the test and output a diff image in the actual folder.