{"id":23003735,"url":"https://github.com/stechstudio/laravel-visual-testing","last_synced_at":"2025-08-14T01:32:14.103Z","repository":{"id":48099209,"uuid":"167584527","full_name":"stechstudio/laravel-visual-testing","owner":"stechstudio","description":"Visual UI screenshot testing with Laravel Dusk using percy.io","archived":false,"fork":false,"pushed_at":"2021-08-06T18:11:32.000Z","size":127,"stargazers_count":31,"open_issues_count":2,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-25T13:02:03.432Z","etag":null,"topics":["laravel","laravel-dusk","percy","testing","visual-diffs"],"latest_commit_sha":null,"homepage":"","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/stechstudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-25T17:16:03.000Z","updated_at":"2023-02-21T15:42:20.000Z","dependencies_parsed_at":"2022-08-12T18:40:11.862Z","dependency_job_id":null,"html_url":"https://github.com/stechstudio/laravel-visual-testing","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stechstudio%2Flaravel-visual-testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stechstudio%2Flaravel-visual-testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stechstudio%2Flaravel-visual-testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stechstudio%2Flaravel-visual-testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stechstudio","download_url":"https://codeload.github.com/stechstudio/laravel-visual-testing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229790943,"owners_count":18124608,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["laravel","laravel-dusk","percy","testing","visual-diffs"],"created_at":"2024-12-15T07:15:12.066Z","updated_at":"2024-12-15T07:15:12.752Z","avatar_url":"https://github.com/stechstudio.png","language":"PHP","readme":"# Visual UI screenshot testing for Laravel Dusk\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/stechstudio/laravel-visual-testing.svg?style=flat-square)](https://packagist.org/packages/stechstudio/laravel-visual-testing)\n[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)\n![Build Status](https://app.chipperci.com/projects/5cc95e3c-628f-48c6-815c-1f16621c9514/status/master)\n\u003c!--- [![Total Downloads](https://img.shields.io/packagist/dt/stechstudio/laravel-visual-testing.svg?style=flat-square)](https://packagist.org/packages/stechstudio/laravel-visual-testing) --\u003e\n\nThis package extends Dusk with the ability to do visual diffs with the [Percy visual testing](https://percy.io/) platform.\n\n### Why write visual tests?\n\nIf you are new to the idea of visual testing we recommend reading through [Visual testing and visual diffs](https://blog.percy.io/product-spotlight-series-visual-testing-and-visual-diffs-6a1fc540fc93) on the Percy blog.\n\n\u003e Sometimes called visual regression testing or UI testing, visual testing is the process of automatically discovering and reviewing software for perceptual changes.\n\u003e \n\u003e **Visual testing is all about what your users actually see and interact with.**\n\nThis form of testing is very useful in cases where you want to guard against unexpected changed to your UI. Visual testing is not meant to replace your Laravel unit/feature/browser tests, but rather provide another tool in your testing toolbox.\n\n## Getting started\n\nThis package integrates with [Laravel Dusk](https://laravel.com/docs/master/dusk). If you haven't already, first go through the Dusk [installation steps](https://laravel.com/docs/master/dusk#installation) and make sure you can run the example test with `php artisan dusk`.\n\nNext:\n\n1. Sign up for a free account at [percy.io](https://percy.io) and create your first project. Put your `PERCY_TOKEN` in your Laravel .env file (or [specific dusk environment files](https://laravel.com/docs/5.7/dusk#environment-handling) if you are using those).\n\n    ```\n    PERCY_TOKEN=aaabbbcccdddeeefff\n    ```\n\n2. Install the [`@percy/agent`](https://www.npmjs.com/package/@percy/agent) NPM package.\n\n    ```\n    npm install --save-dev @percy/agent\n    ```\n    \n3. Install this composer package.\n\n    ```\n    composer require stechstudio/laravel-visual-testing --dev\n    ```\n\n## How to use\n\nTo take a snapshot call `snapshot()` on the browser instance in any of your Dusk tests. \n\n```php\n$browser-\u003evisit('/auth/login')\n        -\u003esnapshot();\n```\n\nThen run your test suite like your normally would.\n \n```\nphp artisan dusk\n```\n\n### Naming your snapshots\n\nBy default the name of your snapshot will be the relative URL of the page (e.g. `/auth/login`). You can also pass in your own name when taking the snapshot.\n\n```php\n$browser-\u003evisit('/auth/login')\n        -\u003esnapshot('Login page');\n```\n\n### Snapshot options\n\nYou can pass in an array of options when taking a snapshot:\n\n- `widths`: An array of integers representing the browser widths at which you want to take snapshots.\n- `minHeight`: An integer specifying the minimum height of the resulting snapshot, in pixels. Defaults to 1024px.\n\n```php\n$browser-\u003evisit('/auth/login')\n        -\u003esnapshot('Login page', [ 'widths' =\u003e [768, 992, 1200] ]);\n```\n\n### Disabling snapshots\n\nIf you want to run your tests without snapshots, use the `--without-percy` command line option.\n\n### Selecting base build branch\n\nPercy uses a variety of strategies to determine the optimal base build for comparison. For details see [Base build selection](https://docs.percy.io/docs/baseline-picking-logic).\n\nIf you want to override and specify your own base you have two options:\n\n- `--percy-target-branch` : Specify base by branch name\n- `--percy-target-commit` : Specify by target commit SHA (only works if there is a finished Percy build for that commit)\n\n## Basic example\n\nOpen the example test at `tests/Browser/ExampleTest.php`. Add a call to `snapshot()` right after the `visit`, and pass in a name for your snapshot.\n\n```php\npublic function testBasicExample()\n{\n    $this-\u003ebrowse(function (Browser $browser) {\n        $browser-\u003evisit('/')\n            -\u003esnapshot('basic-example') // \u003c-- add this\n            -\u003eassertSee('Laravel');\n                \n    });\n}\n```\n\nNow go run your test:\n\n```\nphp artisan dusk\n```\n\nIf all goes well, you should see output similar to this:\n\n```\n$ php artisan dusk\n[percy] created build #1\n[percy] percy has started.\n\n[percy] snapshot taken: 'basic-example'\n.                                                                   1 / 1 (100%)\n\nTime: 2.37 seconds, Memory: 22.00MB\n\nOK (1 test, 1 assertion)\n[percy] stopping percy...\n[percy] waiting for 1 snapshots to complete...\n[percy] done.\n[percy] finalized build #1\n```\n\nNow go check out your Percy dashboard, and you should see the new build. \n\n![](docs/first-run.png)\n\nAt this point it won't have anything to compare the snapshot to. But if you go modify the `welcome.blade.php` file and run it again, you'll get a nice visual diff of your change.\n\n![](docs/second-run.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstechstudio%2Flaravel-visual-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstechstudio%2Flaravel-visual-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstechstudio%2Flaravel-visual-testing/lists"}