PHPackages beyondcode/laravel-visual-diff - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Testing & Quality](/categories/testing) 4. / 5. beyondcode/laravel-visual-diff AbandonedArchivedLibrary[Testing & Quality](/categories/testing) beyondcode/laravel-visual-diff ============================== Create visual diffs in your application tests. 1.1.0(6y ago)16429.5k23[3 issues](https://github.com/beyondcode/laravel-visual-diff/issues)[1 PRs](https://github.com/beyondcode/laravel-visual-diff/pulls)MITPHPPHP ^7.1 Since May 23Pushed 5y ago1 watchersCompare [ Source](https://github.com/beyondcode/laravel-visual-diff)[ Packagist](https://packagist.org/packages/beyondcode/laravel-visual-diff)[ Docs](https://github.com/beyondcode/laravel-visual-diff)[ RSS](/packages/beyondcode-laravel-visual-diff/feed)WikiDiscussions master Synced 5d ago READMEChangelog (2)Dependencies (5)Versions (3)Used By (0) Laravel Visual Diff =================== [](#laravel-visual-diff) [![Latest Version on Packagist](https://camo.githubusercontent.com/4d7dbe476ed1d9b334f9443150ca30bd97b8a603595aced64cf21564d064a98b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6265796f6e64636f64652f6c61726176656c2d76697375616c2d646966662e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/beyondcode/laravel-visual-diff)[![Build Status](https://camo.githubusercontent.com/72867bd4c16de56f6eb7aca3f8ed6bd25c5b71c80ae7f9c45890b932c6ff433d/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6265796f6e64636f64652f6c61726176656c2d76697375616c2d646966662f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/beyondcode/laravel-visual-diff)[![Quality Score](https://camo.githubusercontent.com/ba3c1570cd1b49bede057c2f92f7e78fe54cb215193013f84692fbca1b28961e/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f6265796f6e64636f64652f6c61726176656c2d76697375616c2d646966662e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/beyondcode/laravel-visual-diff)[![Total Downloads](https://camo.githubusercontent.com/96350120996243493a77ab84299a44ad48b23d4a22fe0c99f5f6bafcdba73468/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6265796f6e64636f64652f6c61726176656c2d76697375616c2d646966662e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/beyondcode/laravel-visual-diff) This package can create a visual diff of two screenshots of your Laravel application. It works for both - regular HTTP tests, as well as tests using Laravel Dusk. Behind the scenes, it uses [Pixelmatch](https://github.com/mapbox/pixelmatch) to diff the two images. Here are two basic examples of how the package works: Using Laravel Dusk: ``` class ExampleTest extends DuskTestCase { /** * A basic browser test example. * * @return void */ public function testBasicExample() { $this->browse(function (Browser $browser) { $browser->visit('/') ->visualDiff(); }); } } ``` Using Laravel HTTP Testing: ``` class ExampleTest extends TestCase { /** * A basic test example. * * @return void */ public function testBasicExample() { $this->get('/') ->visualDiff(); } } ``` Requirements ------------ [](#requirements) This package requires node 7.6.0 or higher and the Pixelmatch Node library. You can install the Pixelmatch on MacOS via NPM: ``` npm install pixelmatch ``` Or you could install it globally ``` npm install pixelmatch --global ``` ### Custom node and npm binaries [](#custom-node-and-npm-binaries) Depending on your setup, node or npm might be not directly available to VisualDiff. If you need to manually set these binary paths, you can do this by setting the `npm_binary` and `node_binary` config settings in the `visualdiff.php` configuration file. Installation ------------ [](#installation) This package can be installed through Composer. ``` composer require beyondcode/laravel-visual-diff ``` Usage ----- [](#usage) The package will automatically register the `VisualDiffServiceProvider` with your Laravel application. The package adds a new method to either the `TestResponse` or the `Browser` class which is called `visualDiff`. Depending on how you want to create visual diffs, follow the usage guidelines for the Laravel Dusk integration or the HTTP testing integration. The `visualDiff` method accepts a name, that will be used for the screenshot generation. If you do not provide a name, the package will try and guess the test name. If this does not work for you, please provide a name manually instead. ### Dusk Integration [](#dusk-integration) Just call the `visualDiff()` method on the Laravel Dusk `Browser` instance that you use for testing: ``` $this->browse(function (Browser $browser) { $browser->visit('/') ->visualDiff(); }); ``` This will automatically create a screenshot in all provided resolutions and create a diff, if a previous screenshot is available. ### HTTP Testing Integration [](#http-testing-integration) Just call the `visualDiff()` method on the `TestResponse` instance that you use for testing: ``` $this->get('/') ->visualDiff(); ``` This will automatically create a screenshot in all provided resolutions and create a diff, if a previous screenshot is available. ### Dealing with diffs [](#dealing-with-diffs) When VisualDiff detects differences in the new screenshot compared to the previous successfully created screenshot, the PHPUnit test will fail. It will tell you which test caused the visual difference as well as giving you the filename of the screenshot diff. Now you need to handle with this visual diff, just as you would with a code-diff. Review the changes and either approve the visual difference, or revert the UI state back to the successful state. You can approve the new screenshots by adding a `-d --update-screenshots` flag to the phpunit command. ``` > ./vendor/bin/phpunit -d --update-screenshots OK (1 test, 1 assertion) ``` ### Specify multiple resolutions [](#specify-multiple-resolutions) Creating diffs for multiple resolutions can be very useful - especially if you want to test responsive websites and applications. You can define all possible resolutions in your `visualdiff.php` configuration file: ``` /** * Define all different resolutions that you want to use when performing * the regression tests. */ 'resolutions' => [ [ 'width' => 1920, 'height'=> 1080 ] ] ``` Alternatively, you may want to only create one specific diff in multiple resolutions. You can do this using the `visualDiffForResolutions` method and provide an array with the resolutions to test. ``` $this->get('/') ->visualDiffForResolutions([ [ 'width' => 1920, 'height' => 1080 ], [ 'width' => 640, 'height' => 480 ], ]); ``` ### See diff results in your terminal window [](#see-diff-results-in-your-terminal-window) If you use [iTerm2](https://www.iterm2.com/) as your terminal of choice, you will see an image representation of the diff when you run your tests. [![iTerm 2](https://camo.githubusercontent.com/51c2996eac0dc9833d5625a52f5e15750ea08ee2109c0e675456dae5128a1247/68747470733a2f2f6265796f6e64636f2e64652f6769746875622f76697375616c646966662e706e67)](https://camo.githubusercontent.com/51c2996eac0dc9833d5625a52f5e15750ea08ee2109c0e675456dae5128a1247/68747470733a2f2f6265796f6e64636f2e64652f6769746875622f76697375616c646966662e706e67) ### Changelog [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. ### Security [](#security) If you discover any security related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [Marcel Pociot](https://github.com/mpociot) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 37 — LowBetter than 83% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity39 Limited adoption so far Community15 Small or concentrated contributor base Maturity59 Maturing project, gaining track record Bus Factor1 Top contributor holds 87% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~447 days Total 2 Last Release 2468d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/863e91ca13b8c4031f202c0eee4f06b3a4352f92cf9cd397b03609b20247ed16?d=identicon)[beyondcode](/maintainers/beyondcode) --- Top Contributors [![mpociot](https://avatars.githubusercontent.com/u/804684?v=4)](https://github.com/mpociot "mpociot (20 commits)")[![BramRoets](https://avatars.githubusercontent.com/u/2612285?v=4)](https://github.com/BramRoets "BramRoets (2 commits)")[![chapeupreto](https://avatars.githubusercontent.com/u/834048?v=4)](https://github.com/chapeupreto "chapeupreto (1 commits)") --- Tags beyondcodevisual regressionlaravel-visual-diff ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/beyondcode-laravel-visual-diff/health.svg) ``` [![Health](https://phpackages.com/badges/beyondcode-laravel-visual-diff/health.svg)](https://phpackages.com/packages/beyondcode-laravel-visual-diff) ``` ### Alternatives [phpbench/phpbench PHP Benchmarking Framework 2.0k13.0M627](/packages/phpbench-phpbench)[christophrumpel/missing-livewire-assertions This package adds missing livewire test assertions. 149336.0k9](/packages/christophrumpel-missing-livewire-assertions)[acquia/orca A tool for testing a company's software packages together in the context of a realistic, functioning, best practices Drupal build 32902.4k](/packages/acquia-orca)[calebdw/larastan-livewire A Larastan / PHPStan extension for Livewire. 43482.4k3](/packages/calebdw-larastan-livewire)[encodia/laravel-health-env-vars Custom check for Spatie's Laravel Health - Ensure every .env variable you need has been set 20143.5k](/packages/encodia-laravel-health-env-vars) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)