{"id":13828516,"url":"https://github.com/beyondcode/laravel-visual-diff","last_synced_at":"2026-01-13T23:59:58.267Z","repository":{"id":62493730,"uuid":"134583749","full_name":"beyondcode/laravel-visual-diff","owner":"beyondcode","description":"Create visual diffs in your Laravel application tests.","archived":true,"fork":false,"pushed_at":"2020-08-08T04:22:48.000Z","size":29,"stargazers_count":164,"open_issues_count":4,"forks_count":24,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-12-22T01:10:50.750Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beyondcode.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-23T14:43:41.000Z","updated_at":"2024-11-19T05:18:58.000Z","dependencies_parsed_at":"2022-11-02T09:32:01.073Z","dependency_job_id":null,"html_url":"https://github.com/beyondcode/laravel-visual-diff","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/beyondcode/laravel-visual-diff","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondcode%2Flaravel-visual-diff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondcode%2Flaravel-visual-diff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondcode%2Flaravel-visual-diff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondcode%2Flaravel-visual-diff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyondcode","download_url":"https://codeload.github.com/beyondcode/laravel-visual-diff/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondcode%2Flaravel-visual-diff/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28406388,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T21:51:37.118Z","status":"ssl_error","status_checked_at":"2026-01-13T21:45:14.585Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T09:02:50.317Z","updated_at":"2026-01-13T23:59:58.251Z","avatar_url":"https://github.com/beyondcode.png","language":"PHP","readme":"# Laravel Visual Diff\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/beyondcode/laravel-visual-diff.svg?style=flat-square)](https://packagist.org/packages/beyondcode/laravel-visual-diff)\n[![Build Status](https://img.shields.io/travis/beyondcode/laravel-visual-diff/master.svg?style=flat-square)](https://travis-ci.org/beyondcode/laravel-visual-diff)\n[![Quality Score](https://img.shields.io/scrutinizer/g/beyondcode/laravel-visual-diff.svg?style=flat-square)](https://scrutinizer-ci.com/g/beyondcode/laravel-visual-diff)\n[![Total Downloads](https://img.shields.io/packagist/dt/beyondcode/laravel-visual-diff.svg?style=flat-square)](https://packagist.org/packages/beyondcode/laravel-visual-diff)\n\nThis 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.\nBehind the scenes, it uses [Pixelmatch](https://github.com/mapbox/pixelmatch) to diff the two images.\n\nHere are two basic examples of how the package works:\n\nUsing Laravel Dusk:\n\n```php\n\nclass ExampleTest extends DuskTestCase\n{\n    /**\n     * A basic browser test example.\n     *\n     * @return void\n     */\n    public function testBasicExample()\n    {\n        $this-\u003ebrowse(function (Browser $browser) {\n            $browser-\u003evisit('/')\n                    -\u003evisualDiff();\n        });\n    }\n}\n\n```\n\nUsing Laravel HTTP Testing:\n\n```php\n\nclass ExampleTest extends TestCase\n{\n    /**\n     * A basic test example.\n     *\n     * @return void\n     */\n    public function testBasicExample()\n    {\n        $this-\u003eget('/')\n             -\u003evisualDiff();\n    }\n}\n\n```\n\n## Requirements\n\nThis package requires node 7.6.0 or higher and the Pixelmatch Node library.\n\nYou can install the Pixelmatch on MacOS via NPM:\n\n```bash\nnpm install pixelmatch\n```\n\nOr you could install it globally\n\n```bash\nnpm install pixelmatch --global\n```\n\n### Custom node and npm binaries\n\nDepending on your setup, node or npm might be not directly available to VisualDiff.\nIf 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.\n\n## Installation\n\nThis package can be installed through Composer.\n\n```bash\ncomposer require beyondcode/laravel-visual-diff\n```\n\n## Usage\n\nThe package will automatically register the `VisualDiffServiceProvider` with your Laravel application.\n\nThe package adds a new method to either the `TestResponse` or the `Browser` class which is called `visualDiff`.\nDepending on how you want to create visual diffs, follow the usage guidelines for the Laravel Dusk integration or the HTTP testing integration.\n\nThe `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.\n\n### Dusk Integration\n\nJust call the `visualDiff()` method on the Laravel Dusk `Browser` instance that you use for testing:\n\n```php\n$this-\u003ebrowse(function (Browser $browser) {\n    $browser-\u003evisit('/')\n            -\u003evisualDiff();\n});\n``` \n\nThis will automatically create a screenshot in all provided resolutions and create a diff, if a previous screenshot is available.\n\n### HTTP Testing Integration\n\nJust call the `visualDiff()` method on the `TestResponse` instance that you use for testing:\n\n```php\n$this-\u003eget('/')\n     -\u003evisualDiff();\n``` \n\nThis will automatically create a screenshot in all provided resolutions and create a diff, if a previous screenshot is available.\n\n### Dealing with diffs\n\nWhen VisualDiff detects differences in the new screenshot compared to the previous successfully created screenshot, the PHPUnit test will fail.\nIt will tell you which test caused the visual difference as well as giving you the filename of the screenshot diff.\n\nNow 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.\n\nYou can approve the new screenshots by adding a `-d --update-screenshots` flag to the phpunit command.\n\n```bash\n\u003e ./vendor/bin/phpunit -d --update-screenshots\n\nOK (1 test, 1 assertion)\n``` \n\n### Specify multiple resolutions\n\nCreating diffs for multiple resolutions can be very useful - especially if you want to test responsive websites and applications.\n\nYou can define all possible resolutions in your `visualdiff.php` configuration file:\n\n```php\n/**\n * Define all different resolutions that you want to use when performing\n * the regression tests.\n */\n'resolutions' =\u003e [\n    [\n        'width' =\u003e 1920,\n        'height'=\u003e 1080\n    ]\n]\n``` \n\nAlternatively,  you may want to only create one specific diff in multiple resolutions.\nYou can do this using the `visualDiffForResolutions` method and provide an array with the resolutions to test.\n\n```php\n$this-\u003eget('/')\n     -\u003evisualDiffForResolutions([\n        [\n            'width' =\u003e 1920,\n            'height' =\u003e 1080\n        ],\n        [\n            'width' =\u003e 640,\n            'height' =\u003e 480\n        ],\n     ]);\n```\n\n### See diff results in your terminal window\n\nIf 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.\n\n![iTerm 2](https://beyondco.de/github/visualdiff.png)\n\n### Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n### Security\n\nIf you discover any security related issues, please email marcel@beyondco.de instead of using the issue tracker.\n\n## Credits\n\n- [Marcel Pociot](https://github.com/mpociot)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","funding_links":[],"categories":["PHP"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondcode%2Flaravel-visual-diff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyondcode%2Flaravel-visual-diff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondcode%2Flaravel-visual-diff/lists"}