This compare-screenshots.js Node.js module will compare a model screenshot with a screenshot captuad with TestCafe. The code uses TestCafe and Rembrant for Node.js.
Every single run of the tests generates a screenshot of the tested page. This screenshot is then used to track changes and write screenshot-based tests. With this capability, you can generate reports with all the screenshots, and plug this into your Continuous Integration, by recording screenshots for the first time as base ones (or whenever you intentionally change them), and letting your continuous integration check against the recorded screenshots.
Creating a screenshot from within a test is very easy. You can do this using the [t.takeScreenshot( [path] )] action (https://devexpress.github.io/testcafe/documentation/test-api/actions/take-screenshot.html). Call this action when your page is set up to check the layout:
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button')
.takeScreenshot(testScreenshotPath);
});Before running the application, configure your environment:
- Download the example;
- Switch to the directory where you saved it;
- Install node-canvas for Node.js
- Install TestCafe, Rembrant, Colors and UAParser modules using the following command line:
npm installThe TestCafe, Rembrant, Colors and UAParser modules will be installed automatically.
Open index.html and configure screenshotPath and modelPath if necessary. You only type a single command to begin testing.
testcafe chrome index.js -s screenshotsTestCafe automatically starts browsers, runs tests, takes a screenshot and compares it with a model screenshot. The test result will be shown on a console.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent